Implement Social Sign In

Sometimes, due to your site's style requirements, you may need to create a custom button, which cannot be achieved using the default login button provided by Facebook. In these cases, you will need to make a few changes to your implementation. Check Facebook Login Best Practices to ensure you meet Facebook’s requirements.

useEffect(() => {
    if(facebookAppId){
        Identity.initFacebookLogin(appId, null, true);
    }
}, [appId]);

2. Add the Facebook button.

<Button
    id="facebook-btn"
    variant="secondary-reverse"
    iconLeft={FacebookIcon}
    className={`${className}__Facebook`}
    onClick={() => window.onFacebookSignOn()}
>
    Sign In with Facebook
</Button>

You must first have read access to the @arcxp/react-sign-in-with-google Github Package repository. If your Github account does not have read access to the Github Packages under the @arcxp Github org, reach out to your TAM. Add your Github developer token to your .npmrc file, then install the package to your React project.

npm install @arcxp/react-sign-in-with-google
yarn add @arcxp/react-sign-in-with-google

@arcxp/react-sign-in-with-google makes use of the context/provider pattern to scope your Identity & Sign In With Google configuration to a tree of components in your React application.

import React from 'react';
import { createRoot } from 'react-dom';
import ArcSiwgContextProvider from '@arcxp/react-sign-in-with-google/lib-esm/ArcSiwgContext';
import Identity from '@arc-publishing/sdk-identity';

export const App = ({children}) => {
    return (
        <ArcSiwgContextProvider
            arcIdentity={Identity}
            displayOneTap
            onLoginSuccess={() => {
                // remove regwall or redirect to profile page
            }}
            onLoginFailure={e => {
                console.error(e);
            }}
            googleIdConfiguration={{
                auto_select: true
            }}
        >
        {/* Your app here */}
        </ArcSiwgContextProvider>
    );
};

const container = document.getElementById('app');
const root = createRoot(container);
root.render(
    <App/>
);

onLoginSuccess: function. The “default” onLoginSuccess that is called after the user successfully signs in with Google & receives valid credentials from Arc Identity. Provide a function to perform post login actions such as:

onLoginFailure: function. The “default” onLoginFailure that is called after the user fails to log in successfully with Google. Provide a function to perform post login failure actions such as displaying errors.

googleIdConfiguration: object. takes all the fields described in Sign In With Google JavaScript API reference | Authentication | Google for Developers

displayOneTap: boolean. if this parameter is set to true, AND the user is logged out from Arc Identity’s perspective, the Google One Tap prompt will render to the user.

2. Include the Sign In with Google button as part of the page.

ArcSiwgButton renders the Sign In With Google button & can be used for user login and registration. This component MUST be rendered as a descendent of ArcSiwgContextProvider in your component tree. ArcSiwgButton accepts optional “onLoginSuccess” and “onLoginFailure” props that, if defined, are used instead of the default “onLoginSuccess” and “onLoginFailure” functions provided to ArcSiwgContextProvider as props.

import React from 'react';
import ArcSiwgButton from '@wpmedia/react-sign-in-with-google/lib-esm/ArcSiwgButton';
export const Login = () => {
    return (
        <>
        <h1>Login</h1>
        <>{/* login form here */}
        <ArcSiwgButton
            gsiButtonConfiguration={{
                type: 'standard',
                theme: 'outline',
                size: 'large',
                text: 'signin_with',
                shape: 'rectangular',
                logo_alignment: 'left',
                width: '400'
            }}
            onLoginSuccess={() => {
                // overrides the default "onLoginSuccess" passed to the closest ancestor ArcSiwgContextProvider
                history.push('/profile');
            }}
            onLoginFailure={(e) => {
                console.error('error logging in', e);
            }}
        />
        </>
    );
};

If you are not using a React or PageBuilder based site, Arc XP Identity supports implementing Sign In With Google using the JavaScript Arc XP Identity SDK directly.

The Identity.signInWithGoogle() method accepts the Google OAuth credential response, internally it calls socialLogin('google', {credentials}) passing the credentials/token to the Arc XP Identity API to exchange for Arc XP Identity access and refresh tokens. Use Identity.signInWithGoogle to pass as callbacks to the Sign In With Google SDK.

<html>
    <head>
    <script></script>
    </head>
    <body>
    </body>
</html>

2. Initialize the Sign In With Google library and Identity SDK

When the Google client library loads on the page, initialize the Arc XP Identity SDK and Google client library.

Remember that Arc XP Identity supports login through only the popup mode when specifying optional Google ID Configuration values. For more information, see the following sections in Google Identity’s documentation:

index.js
import Identity from '@arc-publishing/sdk-identity';

window.onload(() => {
    if (!google?.accounts) {
        throw new Error('Google client library is not loaded.');
    }
    const googleIdConfig = {
        client_id: siteConfigs?.googleClientId,
        callback: (credentialResponse) => {
            return Identity.signInWithGoogle(credentialResponse)
            .then(() => {
                // handle successful login
            }).catch(e => {
                console.error('error logging in', e);
                // handle login failure
                // for instance, display error message,
            });
        },
        auto_select: true
    };
    google.accounts.id.initialize(googleIdConfig);
});

3. Render the Sign In With Google button

When the Arc XP Identity SDK and Google client library are both loaded and initialized, you can render the Sign In With Google button. In your login page, include a div with a unique ID for your Sign In With Google button. We use this ID to tell the Google client library where to render the Sign In With Google button.

<div
    id='sign-in-with-google-button'
/div>

Then, in your index.js, add the following code after where you call google.accounts.id.initialize().

google.accounts.id.renderButton(
    document.getElementById('sign-in-with-google-button'),
    { theme: 'outline', size: 'large' }
);

You can pass different attributes to customize the Google Login button. For more details, refer to the Data type: GsiButtonConfiguration section for more details.

4. Open the One Tap prompt

To open the One Tap prompt, call google.accounts.id.prompt after the Google client library loads and initializes.

Before you call this function, you should make sure the user is not already logged in to Arc XP by using Identity.isLoggedIn. See Method: google.accounts.id.prompt in Google’s documentation.

Due to the style requirements of your site, you may need to create a custom Google Login button. If you are using a custom button, you will need to make some changes to the code provided above. Before doing that, make sure you are following the Sign In with Google branding guidelines. The code provided in the Step 3 (previous section) should be updated with the custom button. It is on charge to call the google prompt for the One Tap user experience. Check Sign In With Google JavaScript API reference and Understand the One Tap user experience for more details.

<Button
  id="custom-google-signin-btn"
  iconLeft={GoogleIcon}
  className={`${className}__Google`}
  onClick={() =>
  window?.google?.accounts?.id?.prompt((notification) => {
    if (notification.isSkippedMoment()) {
          alert(googleNotification);
      // Remove cookie works in Safari
      document.cookie = `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
    window.google.accounts.id.prompt();
    }
  })
  }
>
  Sign In with Google
</Button>