Use a SLAS Private Client

SLAS clients handle how your application interacts with the Shopper Login and API Access Service (SLAS) to authenticate and authorize shoppers. SLAS clients come in two types: public and private.

SLAS private clients offer several advantages over a public client, including:

  • Pre-authorize guest shoppers to request access to a store which results in faster page load times.
  • Enable the use of features not available to SLAS public clients including passwordless login and password reset. See Private SLAS Client Use Cases.

To take advantage of a SLAS private client, your project must be able to securely store a client secret. Consider using a public client if your project runs client-side and must communicate with SLAS directly.

PWA Kit 3.5 and above supports the use of both SLAS public and and private clients.

All PWA versions prior to PWA Kit 3.5 support only SLAS public clients.

If you have an existing PWA Kit site using a SLAS public client, we encourage you to read on and consider switching to a private client.

Before running the commands in this guide, replace any placeholders with actual values. Placeholders are formatted like this: $PLACEHOLDER.

When working with private clients, care should be taken to not expose the client secret to shoppers and client-side browsers.

To help secure the client secret, the PWA Kit Retail React App stores the secret server-side through the use of environment variables. See Set Environment Variables for information on how to store the client secret.

At a high level, you'll do the following to set up a SLAS private client with your PWA Kit site.

  • Create the SLAS private client
  • Configure the PWA Kit
  • Set environment variables

Start by completing the instructions in Authorization for Shopper APIs and Set Up API Access to create your SLAS Private Client.

Once you have created your SLAS private client, follow the steps below to use it with your PWA Kit site:

  1. Update to PWA Kit v3.5 or above.
  2. In your ssr.js file, set the useSLASPrivateClient property inside the options object to true.
  3. In your _app-config/index.js file, set the the enablePWAKitPrivateClient prop inside the CommerceAPIProvider to true.
  4. In your PWA Kit configuration file, set your commerceAPI clientId to your SLAS private client ID.
  5. In your environment, set the PWA_KIT_SLAS_CLIENT_SECRET environment variable to your SLAS private client secret.
  1. In your PWA Kit configuration file, set your commerceAPI clientId to your SLAS private client ID.
  2. In your environment, set the PWA_KIT_SLAS_CLIENT_SECRET environment variable to your SLAS private client secret.

Run the following command to set the PWA_KIT_SLAS_CLIENT_SECRET environment variable locally in an active command prompt:

  • On Mac / Unix, run export PWA_KIT_SLAS_CLIENT_SECRET=$YOUR_CLIENT_SECRET
  • On Windows, run set PWA_KIT_SLAS_CLIENT_SECRET=$YOUR_CLIENT_SECRET

In a local development environment, you will want to set the PWA_KIT_SLAS_CLIENT_SECRET more permanently so that it is included automatically when you open a new command prompt.

On Mac / Unix, you can do this by setting the PWA_KIT_SLAS_CLIENT_SECRET environment variable in your machine's .bashrc file. On Windows, you can do this by setting the PWA_KIT_SLAS_CLIENT_SECRET environment variable via Control Panel -> System -> Advanced -> Environment Variables.

If you are running your PWA Kit site remotely on Managed Runtime, you can set the PWA_KIT_SLAS_CLIENT_SECRET environment variable by running the following command in your terminal after replacing the variables to match with your environment.

For details on how to get a Managed Runtime API key and other properties of your remote environment, refer to our Push and Deploy Bundles guide.

For more information on setting environment variables, refer to the Managed Runtime API

In addition to the PWA Kit setup steps described above, on a Phased Launch storefront that is using both PWA Kit and SFRA, you will also want to update Plugin SLAS to use your SLAS private client. See the Plugin SLAS readme for instructions on how to set up a SLAS private client to work with SFRA.

  • If you see HTTP 400 calls to SLAS /authorize, the PWA Kit site is using the SLAS public client flows with your private client ID. In your _app-config/index.js file, set the enablePWAKitPrivateClient prop inside the CommerceAPIProvider to true.

  • On a local development environment, the PWA Kit server will not start if the useSLASPrivateClient property is enabled in ssr.js and the PWA_KIT_SLAS_CLIENT_SECRET environment variable has not been set. Set the environment variable to your SLAS client secret to continue.

  • After deploying your PWA Kit site to Managed Runtime, if you see an HTTP 501 error when making a call to SLAS, it could mean the PWA_KIT_SLAS_CLIENT_SECRET environment variable has not been set. After setting it, please wait e a few minutes for the change to apply.