---
schema_version: "1"
id: 2a57aca38e6fddeddc7d57380538eb98ad8d01497203132562c38106b61e343e
title: Implement Social Login
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/pwa-kit-managed-runtime/guides/social-login.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/social-login.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3a3185ffa5a08e6e867e6a40d86c40805444f81d249fa1d7925a2b3f68201179
products:
  - Composable Storefront
  - Salesforce APIs
---
# Implement Social Login

PWA Kit comes out of the box with the option to use social login for your shoppers. Include the feature in your [Progressive Web App (PWA) Kit](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pwa-developer-workflow.html) 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](https://pwa-kit.mobify-storefront.com/) shows the default implementation of social login.

To enable and configure social login for your PWA Kit 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.

## Supported IdPs

PWA Kit supports the identity providers (IdPs) listed under [Supported Identity Providers](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-identity-providers.html#supported-identity-providers).

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

## Prerequisites

To use social login:

- Build your site using Composable Storefront and [Retail React App](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/README.md) version 6.0 or later.
- To add your chosen IdP, complete the steps in [Registering an Identity Provider](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-identity-providers.html#registering-an-identity-provider).
- [Configure a Shopper Login and API Access (SLAS) Client](https://developer.salesforce.com/docs/commerce/commerce-api/guide/authorization-for-shopper-apis.html#create-a-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, PWA Kit 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.

## Configure Social Login in PWA Kit

**a. Update `template-retail-react-app/config/default.js`**

To configure social login in your PWA Kit project, update `template-retail-react-app/config/default.js` as shown in this example.

Ensure that the redirect URI path configured in your PWA Kit 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.

```jsx
module.exports = {
    app: {
        login: {
            social: {

               // Enable social login and add your chosen IdPs and Redirect URI.
                enabled: true,
                idps: ['Google', 'Apple'],
                redirectURI: '/social-callback' // relative path
            }
            // More code here...

         sites,
         commerceAPI: {
            proxyPath: `/mobify/proxy/api`,
            parameters: {

            // Add your clientId, organizationId, short code, and siteId.
                clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
                organizationId: 'f_ecom_zzrf_001',
                shortCode: '8o7m175y',
                siteId: 'RefArchGlobal'
            }

           // More code here...
```

**b. Optional: Use an Environment Variable to Set the Redirect URI**

**note:** The value of the environment variable for social login overrides any values that you added in `template-retail-react-app/config/default.js`.

Optionally, you can set the redirect URI using an environment variable instead of `template-retail-react-app/config/default.js`. Use `template-retail-react-app/config/default.js` to enable social login and set the IdPs. Configure this environment variable to set the redirect URI.

`SOCIAL_LOGIN_REDIRECT_URI`

See [Environment Variables](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/environment-variables.md).

## Add Icons for Supported IdPs

By default, PWA Kit 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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-identity-providers.html#supported-identity-providers). To do so, complete these steps.

**a. Import Icons into the `SocialLogin` Component**

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

```jsx
// Icons
import {
  AppleIcon,
  GoogleIcon,
  FacebookIcon
} from '@salesforce/retail-react-app/app/components/icons'
```

**b. Extend the `IDP_CONFIG` Object**

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.

```jsx
const IDP_CONFIG = {
  apple: {
    icon: AppleIcon,
    message: defineMessage({
      id: 'login_form.button.apple',
      defaultMessage: 'Apple'
    })
  },
  google: {
    icon: GoogleIcon,
    message: defineMessage({
      id: 'login_form.button.google',
      defaultMessage: 'Google'
    })
  },
  facebook: {
    icon: FacebookIcon,
    message: defineMessage({
      id: 'login_form.button.facebook',
      defaultMessage: 'Facebook'
    })
  }
}
```

## Best Practices for Social Login

- Follow security best practices to protect shopper accounts. For example:
  - If you’re using embedded CDN (eCDN), you can apply [eCDN Rate Limiting Rules](https://developer.salesforce.com/docs/commerce/commerce-api/guide/cdn-rate-limiting-rules.html).
  - If you’re using a third-party content delivery network (CDN) such as Cloudfare, you can [Block requests by Threat Score](https://developers.cloudflare.com/waf/custom-rules/use-cases/block-ip-reputation/).
- Track shopper usage of authentication options and diagnose issues efficiently. For example, use [Log Center](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/debugging.html#debug-using-log-center) to access logs from Managed Runtime (MRT) and your B2C Commerce instance.
- [Merge Shopper Profiles](https://developer.salesforce.com/docs/commerce/commerce-api/guide/merge-shopper-profiles.html) 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.

**note:** - 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](https://developer.salesforce.com/docs/commerce/commerce-api/guide/merge-shopper-profiles.html).

## Troubleshoot Social Login

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

### Shoppers Can’t Log in

**Potential Cause:** The social login configuration is incorrect.

**Suggested Solution:** Ensure that the redirect URI path configured in your PWA Kit project matches the path configured in your SLAS client. See [Configure Social Login](#configure-social-login-in-pwa-kit).

### Shopper Profile Conflicts Occur

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

**Suggested Solution:** Follow the steps in [Merge Shopper Profiles](https://developer.salesforce.com/docs/commerce/commerce-api/guide/merge-shopper-profiles.html) to merge records for shoppers registered with B2C Commerce and a third-party IdP.

## See Also

- [SLAS Identity Providers](https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-identity-providers.html)