Implement Social Login for Storefront Next

Storefront Next offers a native social login feature for your shoppers. Include social login in your Storefront Next site to improve the shopper experience. With social login, shoppers can quickly log into your site and create profiles by using their social network accounts.

Our demo site shows the default implementation of social login. Test the social login flow on the demo site by clicking Sign In, and then Continue with Apple or Continue with Google.

To enable and configure social login for your Storefront Next site, follow the steps in this guide. Throughout this guide we use an example storefront with the URL: https://www.example.com. Replace example.com with your domain name.

Storefront Next supports the identity providers (IdPs) listed under Supported Identity Providers.

If you meet the prerequisites, the Google and Apple social logins are available in the Retail React App by default.

  • To use password reset, build your site by using Storefront Next and the Storefront Next template version 1.0.0 or later.
  • Add your chosen IdP by completing the steps in Registering an Identity Provider.
  • Configure a Shopper Login and API Access (SLAS) Client. In your client’s Redirect URI field, enter the redirect URI that you want to use in the social login flow. By default, Storefront Next uses /social-callback as the path. For example, if your domain is example.com, enter: https://www.example.com/social-callback. Replace example.com with your actual domain.

To configure social login in your Storefront Next project, update config.server.ts as shown in this example.

Ensure that the redirect URI path configured in your Storefront Next project matches the path configured in your SLAS client. The SLAS client can use a wildcard for the full URI, but the paths must match exactly.

The value of the environment variable for social login overrides any values that you added in config.server.ts.

Optionally, you can set the redirect URI using an environment variable instead of config.server.ts. Use config.server.ts to enable social login and set the IdPs. Configure this environment variable to set the redirect URI.

PUBLIC__app__features__SOCIAL_LOGIN_REDIRECT_URI

By default, Storefront Next imports and configures the icons for the Google and Apple social logins in the SocialLogin component in the template-retail-react-app/app/components/social-login/index.jsx file. On your site, you can include icons for other supported IdPs. To do so, complete these steps.

In this example, we import the Facebook icon into the SocialLogin component.

Use the IDP_CONFIG object in the SocialLogin component to display buttons for your additional social logins, each with their respective icons and localized messages.

In this example, we add the configuration for Facebook. Ensure that each IdP key matches the lowercase name of your chosen IdP.

  • Follow security best practices to protect shopper accounts. For example:
  • Track shopper usage of authentication options and diagnose issues efficiently. For example, use Log Center to access logs from Managed Runtime (MRT) and your B2C Commerce instance.
  • Merge Shopper Profiles in Shopper Login and API Access Service (SLAS) to ensure that shoppers with both a B2C Commerce identity and a third-party IdP can log in seamlessly without creating duplicate accounts.
  • If both profiles exist before you configured loginMergeClaims and before a shopper logged into your site, no merge is performed. Accounts can’t be merged retroactively.
  • The steps in the Merge Shopper Profiles guide apply to shoppers who have the same login ID for their B2C Commerce profile and a third-party IdP.

For more details about merging profiles and the supported use cases, see Merge Shopper Profiles.

This section provides suggested solutions for a few common errors that you can encounter related to social login.

Potential Cause: The social login configuration is incorrect.

Suggested Solution: Ensure that the redirect URI path configured in your Storefront Next project matches the path configured in your SLAS client. See Configure Social Login.

Potential Cause: Shoppers have separate profiles for B2C Commerce and third-party IdPs.

Suggested Solution: Follow the steps in Merge Shopper Profiles to merge records for shoppers registered with B2C Commerce and a third-party IdP.