@W-14455649@ - DO NOT MERGE - Spike slas private client v2 #1585

vcua-mobify · 2023-11-30T19:47:31Z

PR for spiking how we might add private clients to the PWA

WIP

Currently works on local build and MRT

MRT test environment: https://scaffold-pwa-private-client.mobify-storefront.com/

TODO
Unify the proxies. Right now, slas is using a separate proxy from everything else

vcua-mobify · 2023-11-30T19:48:04Z

packages/commerce-sdk-react/package.json

@@ -40,7 +40,7 @@
    "version": "node ./scripts/version.js"
  },
  "dependencies": {
-    "commerce-sdk-isomorphic": "^1.10.4",
+    "commerce-sdk-isomorphic": "/Users/vcua/Git/commerce-sdk-isomorphic",


This PR needs the changes in SalesforceCommerceCloud/commerce-sdk-isomorphic#138 to work

FYI if anyone wants to run this PR locally, you'll need to update this line to point to your own copy of commerce-sdk-isomorphic. Specifically, pull in the PR: SalesforceCommerceCloud/commerce-sdk-isomorphic#138.

Also, in your copy of commerce-sdk-isomorphic, build it first by running:

yarn install yarn run renderTemplates yarn build:lib

vcua-mobify · 2023-11-30T19:48:41Z

packages/commerce-sdk-react/src/auth/index.ts

@@ -405,7 +405,8 @@ class Auth {
            }
        }
        return await this.queueRequest(
-            () => helpers.loginGuestUser(this.client, {redirectURI: this.redirectURI}),
+            //() => helpers.loginGuestUser(this.client, {redirectURI: this.redirectURI}),
+            () => helpers.loginGuestUserPrivateClient(this.client,{redirectURI: this.redirectURI}),


This consumes a change made in commerce-sdk-isomorphic to skip the /authorize call when logging in as a guest

vcua-mobify · 2023-11-30T19:49:31Z

packages/pwa-kit-runtime/package.json

@@ -37,7 +37,7 @@
    "cross-env": "^5.2.1",
    "express": "^4.18.2",
    "header-case": "1.0.1",
-    "http-proxy-middleware": "0.21.0",
+    "http-proxy-middleware": "^2.0.6",


I updated this dependency for the purposes of this spike. Upgrading required minimal changes and did not seem to have broken anything.

vcua-mobify · 2023-11-30T19:53:23Z

packages/template-retail-react-app/app/ssr.js

@@ -59,6 +61,34 @@ const {handler} = runtime.createHandler(options, (app) => {
        })
    )

+    const createSlasHandler = ({clientId, secret, shortCode}) => {


The main event happens here. A SLAS request coming from commerce-sdk-react is intercepted and we add the client secret as an auth header to /token calls.

We may want to allow developers to set additional endpoints where this client secret is added (ie. /password/action for password reset).

vcua-mobify · 2023-12-01T22:25:27Z

packages/commerce-sdk-react/src/auth/index.ts

@@ -22,6 +22,7 @@ type Helpers = typeof helpers
 interface AuthConfig extends ApiClientConfigParams {
    redirectURI: string
    proxy: string
+    slasProxy: string


We are setting up a new proxy in ssr.js to insert the client secret. This new slasProxy is how I am consuming that separate proxy at this time

vcua-mobify · 2023-12-01T22:26:18Z

packages/commerce-sdk-react/src/auth/index.ts

@@ -168,7 +169,7 @@ class Auth {

    constructor(config: AuthConfig) {
        this.client = new ShopperLogin({
-            proxy: config.proxy,
+            proxy: config.slasProxy,


Using the regular config.proxy would send calls to /mobify/proxy/api/ which does not include the logic for inserting the client secret at this time. So I added this new slasProxy for requests that do go need the client secret

vcua-mobify · 2023-12-01T22:27:26Z

packages/commerce-sdk-react/src/test-utils.tsx

@@ -23,6 +23,7 @@ export const DEFAULT_TEST_HOST = 'http://localhost:8888'

 export const DEFAULT_TEST_CONFIG = {
    proxy: `${DEFAULT_TEST_HOST}/mobify/proxy/api`,
+    slasProxy: `${DEFAULT_TEST_HOST}`,


This is how I am consuming the new proxy set in ssr.js. As mentioned in other comments, it is currently separate from /mobify/proxy/api

vcua-mobify · 2023-12-01T22:28:05Z

packages/template-retail-react-app/app/ssr.js

+        const clientId = process?.env?.SLAS_PRIVATE_CLIENT_ID
+        const secret = process?.env?.SLAS_PRIVATE_CLIENT_SECRET
+        const shortCode = process?.env?.CC_SHORT_CODE
+        const target = `https://${shortCode}.api.commercecloud.salesforce.com`


These environment variables are read either from your local terminal or from MRT's env variables

I was trying out an approach that used a new env-vars.json file to store the client secret but maybe just setting the env var in the terminal is better? This way, there is no risk in accidentally committing a file with the client secret and we don't have to read in a file.

Less logic also as process.env can work locally and on MRT.

vcua-mobify · 2023-12-02T00:27:45Z

packages/template-retail-react-app/app/ssr.js

+                    const encodedClientCredential = Buffer.from(`${clientId}:${secret}`).toString(
+                        'base64'
+                    )
+                    outGoingReq.setHeader('Authorization', `Basic ${encodedClientCredential}`)


We could add a conditional here to only set the secret if it is defined. If it's not defined (ie. we're using a SLAS public client), do nothing.

vmarta · 2023-12-02T00:02:45Z

packages/template-retail-react-app/app/ssr.js

+        const clientId = process?.env?.SLAS_PRIVATE_CLIENT_ID
+        const secret = process?.env?.SLAS_PRIVATE_CLIENT_SECRET
+        const shortCode = process?.env?.CC_SHORT_CODE


These are the same env vars used for Storefront Preview, right? If so, let's keep in mind that most likely the customer will need to use a different api client for their website... a client that does not have access/scope to set the shopper context.

vmarta · 2023-12-02T01:52:58Z

packages/commerce-sdk-react/package.json

@@ -40,7 +40,7 @@
    "version": "node ./scripts/version.js"
  },
  "dependencies": {
-    "commerce-sdk-isomorphic": "^1.10.4",
+    "commerce-sdk-isomorphic": "/Users/vcua/Git/commerce-sdk-isomorphic",


FYI if anyone wants to run this PR locally, you'll need to update this line to point to your own copy of commerce-sdk-isomorphic. Specifically, pull in the PR: SalesforceCommerceCloud/commerce-sdk-isomorphic#138.

Also, in your copy of commerce-sdk-isomorphic, build it first by running:

yarn install yarn run renderTemplates yarn build:lib

kevinxh · 2024-04-08T18:47:02Z

stale PR, closed

vcua-mobify added 5 commits November 29, 2023 16:18

Update http-proxy-middleware

2e7d824

Use test env

d4a6f31

Consume local commerce-sdk-isomorphic changes

7632c1e

Add a proxy in ssr.js

4ba2b8c

Read private client settings from a new file

04ffa7d

vcua-mobify added the do not merge No matter what, do not merge this pr label Nov 30, 2023

vcua-mobify requested a review from a team as a code owner November 30, 2023 19:47

vcua-mobify commented Nov 30, 2023

View reviewed changes

vcua-mobify added 5 commits November 30, 2023 17:39

Fix config

75f1022

Attempt to read config in runtime

3da5b7c

Add a separate slasProxy to commerce-sdk-react

cbda6ee

Use env vars instead of env file

e2daa02

Revert runtime changes

087d1ea

vcua-mobify commented Dec 1, 2023

View reviewed changes

vcua-mobify commented Dec 2, 2023

View reviewed changes

vmarta reviewed Dec 2, 2023

View reviewed changes

kevinxh closed this Apr 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-14455649@ - DO NOT MERGE - Spike slas private client v2 #1585

@W-14455649@ - DO NOT MERGE - Spike slas private client v2 #1585

vcua-mobify commented Nov 30, 2023 •

edited

Loading

vcua-mobify Nov 30, 2023

vmarta Dec 2, 2023

vcua-mobify Nov 30, 2023

vcua-mobify Nov 30, 2023

vcua-mobify Nov 30, 2023

vcua-mobify Dec 1, 2023 •

edited

Loading

vcua-mobify Dec 1, 2023 •

edited

Loading

vcua-mobify Dec 1, 2023

vcua-mobify Dec 1, 2023

vcua-mobify Dec 1, 2023 •

edited

Loading

vcua-mobify Dec 2, 2023

vmarta Dec 2, 2023

vmarta Dec 2, 2023

kevinxh commented Apr 8, 2024

@W-14455649@ - DO NOT MERGE - Spike slas private client v2 #1585

@W-14455649@ - DO NOT MERGE - Spike slas private client v2 #1585

Conversation

vcua-mobify commented Nov 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vcua-mobify Dec 1, 2023 • edited Loading

Choose a reason for hiding this comment

vcua-mobify Dec 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vcua-mobify Dec 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinxh commented Apr 8, 2024

vcua-mobify commented Nov 30, 2023 •

edited

Loading

vcua-mobify Dec 1, 2023 •

edited

Loading

vcua-mobify Dec 1, 2023 •

edited

Loading

vcua-mobify Dec 1, 2023 •

edited

Loading