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:
- Update to PWA Kit v3.5 or above.
- In your
ssr.js
file, set theuseSLASPrivateClient
property inside the options object totrue
. - In your
_app-config/index.js
file, set the theenablePWAKitPrivateClient
prop inside the CommerceAPIProvider totrue
. - In your PWA Kit configuration file, set your commerceAPI clientId to your SLAS private client ID.
- In your environment, set the
PWA_KIT_SLAS_CLIENT_SECRET
environment variable to your SLAS private client secret.
- In your PWA Kit configuration file, set your commerceAPI clientId to your SLAS private client ID.
- 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 theenablePWAKitPrivateClient
prop inside the CommerceAPIProvider totrue
. -
On a local development environment, the PWA Kit server will not start if the
useSLASPrivateClient
property is enabled inssr.js
and thePWA_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.