Configure SLAS Plugin PWA kit

Prerequisites

Before starting, ensure the following are set up:

Access to the Salesforce Commerce Cloud (SFCC) environment.
ReachFive Salesforce Cartridge (SFCC) is installed in your Salesforce environment. See the ReachFive Cartridge GitHub repository for installation instructions.
Salesforce PWA Kit is installed and accessible in your project. Refer to the Salesforce PWA Kit documentation.
Basic knowledge of SLAS (Salesforce Login and Authentication Service). Learn more in the SLAS Identity Providers Guide.

Configure SLAS Identity provider

Login to SLAS Console:

Access the SLAS configuration settings through your Salesforce admin panel.
Add ReachFive as an Identity Provider:
- Go to Identity Providers and select "Add New Provider."
- Provide the following details:
  - Provider Name: ReachFive
  - Client ID: Retrieve this from your ReachFive dashboard.
  - Scopes: Include relevant scopes such as openid, profile, and email.
  - Redirect URI: Set this to match the callback URL configured in your ReachFive account.
Save and test the configuration:

Ensure the connection is working by testing a login flow with SLAS and ReachFive.

Integrate ReachFive with Salesforce PWA Kit

Set Up ReachFive SDK:

Install the ReachFive JavaScript SDK in your PWA Kit project and configure it with your ReachFive domain, client ID, and redirect URIs.

SDK
Helper

import React, { useEffect, useState } from 'react';
import { useCurrentCustomer } from '@salesforce/retail-react-app/app/hooks/use-current-customer'
import useNavigation from "@salesforce/retail-react-app/app/hooks/use-navigation";
import { useAccessToken } from '@salesforce/commerce-sdk-react'
import { AuthHelpers, useAuthHelper } from '@salesforce/commerce-sdk-react'
import { getReachFiveClientUI } from './helper';
import { getAppOrigin } from "@salesforce/pwa-kit-react-sdk/utils/url";
import { getConfig } from "@salesforce/pwa-kit-runtime/utils/ssr-config";

const onClient = typeof window !== 'undefined';

export const Auth = () => {
    const [authenticated, setAuthenticated] = useState(false);
    const [userData, setUserData] = useState(null);
    const navigate = useNavigation();
    const logout = useAuthHelper(AuthHelpers.Logout)
    const { data: customer } = useCurrentCustomer();
    const { getTokenWhenReady } = useAccessToken();

    const handleLogout = async () => {
        const client = await getReachFiveClientUI();
        await client.core.logout();
        await logout.mutateAsync();
        setAuthenticated(false);
        navigate('/');
    }

    useEffect(() => {
        try {
            const getSdk = async () => {
                const client = await getReachFiveClientUI();
                const info = await client.core.getSessionInfo();
                if (info?.isAuthenticated) {
                    setAuthenticated(true);
                    setUserData(info);
                } else {
                    console.log('Show social login...');
                    // wheras show social login, call authorize with idp
                    // const socialLogin = (async () => await client.showSocialLogin({
                    const socialLogin = (async () => await client.showAuth({
                        container: 'social-login-container',
                        auth: {
                            redirectUri: `${window.location.origin}/idp-callback`,
                        },
                        allowLogin: true,
                        allowWebAuthnSignup: true,
                        allowWebAuthnLogin: true,
                    }))();
                }
            }
            if (onClient) {
                getSdk();
            }
        } catch (error) {
            console.error(error)
        }
    }, [onClient]);

    let userInfo = 'userData not found';
    let customerInfo = 'customer not found';
    try {
        userInfo = JSON.stringify(userData, null, 2);
        customerInfo = JSON.stringify(customer, null, 2);
    } catch (error) {
        console.error(error)
    }

    return <>
        {authenticated ?
            <div>Authenticated - getUserInfo
                <br /> ReachFiveUserInfo: {userInfo}
                <br /> PWA User: {customerInfo}
            </div> :
            <>
                <br />Social login:
                <br /> <div id="social-login-container"></div>
            </>}
        <br /> <button type="submit" onClick={handleLogout}>Logout</button>

    </>;
};

export default Auth;

import { getConfig } from "@salesforce/pwa-kit-runtime/utils/ssr-config";

let client = {
    core: null,
    ui: null
};

const makeClient = (createClient) => {
    const config = getConfig();
    return createClient({
        // Required parameters
        domain: config.app.idp.domain,
        clientId: config.app.idp.clientId,
        // Optional parameter
        language: 'en',
        locale: 'en'
    })
};

export const getClient = async (clientType) => {
    switch (clientType) {
        case 'ui': {
            const {
                createClient,
            } = await import('@reachfive/identity-ui');
            client.core = makeClient(createClient);
            return client.core;
        }
        case 'core':
        default: {
            const {
                createClient,
            } = await import('@reachfive/identity-core');
            client.ui = makeClient(createClient);
            return client.ui;
        }
    }
};

export const getReachFiveClient = async () => {
    return await getClient('core');
};

export const getReachFiveClientUI = async () => {
    return await getClient('ui');
};

Override authentication components:

Follow the PWA Kit Extensibility Guide to override the login components:
- Replace the default login and sign-up forms with custom components using the ReachFive SDK.
- Implement the necessary endpoints to handle the SLAS token exchange.
Update Routes:

Add or modify routes in the PWA Kit to include custom login and logout flows.

Configure ReachFive Salesforce cartridge

Install and activate the cartridge:

Follow the ReachFive Salesforce Cartridge Installation Guide to install and activate the cartridge in your SFCC instance.
Set up Client Configurations:

In the Salesforce Business Manager:
- Navigate to Administration > ReachFive Configurations.
- Add your ReachFive credentials (Client ID, Secret, and API endpoints).
Enable ReachFive in SLAS:
- Map the ReachFive client ID to SLAS in the cartridge settings.
- Configure the SLAS token validation endpoint to work with ReachFive.

Test the integration

Simulate a Login Flow:

Navigate to your PWA Kit application and initiate a login flow. Ensure that the authentication is routed through SLAS and completed with ReachFive.
Verify User Data:

Check that the user data retrieved matches the configuration (e.g., profile, email, etc.).
Debugging:

Use browser developer tools or server logs to identify any issues in token exchange, redirects, or SLAS integration.