Use a SLAS Private Client

Shopper Login and API Access (SLAS) API Clients allow your application 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

This video shows you how to set up a SLAS private client for the PWA Kit and a phased Headless rollout.

SLAS Private Client in a Composable Storefront
undefined

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. If you haven't already done so, upgrade to PWA Kit v3.5 or above.

  2. In your PWA Kit configuration file (config/default.js), set your commerceAPI clientId to your SLAS private client ID.

  3. In your _app-config/index.js, set the enablePWAKitPrivateClient prop of <CommerceAPIProvider> to true.

  4. In your ssr.js, set the useSLASPrivateClient property of options pass to runtime.createHandler to true:

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, see Environment Variables.

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're extending your PWA Kit implementation to use other SLAS endpoints that require private clients like Passwordless Login, you can extend the set of endpoints available using the applySLASPrivateClientToEndpoints option for runtime.createHandler:

  • 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.