Basic Auth Implementation in Retail React App Take 2️⃣

packages/template-retail-react-app/app/commerce-api/auth.js

@@ -305,7 +305,9 @@ class Auth {
         const authorization = `Basic ${btoa(`${credentials.email}:${credentials.password}`)}`
         const options = {
             headers: {
-                Authorization: authorization,
+                // @@@
+                // Authorization: authorization,
+                'X-Authorization': authorization,
                 'Content-Type': `application/x-www-form-urlencoded`
             },
             body: {
@@ -352,7 +354,7 @@ class Auth {
 
         const options = {
             headers: {
-                Authorization: '',
+                // Authorization: '',
                 'Content-Type': `application/x-www-form-urlencoded`
             },
             parameters: {

packages/template-retail-react-app/app/commerce-api/index.js

@@ -205,7 +205,9 @@ class CommerceAPI {
         const [fetchOptions, ...restParams] = params
         const newFetchOptions = {
             ...fetchOptions,
-            headers: {...fetchOptions.headers, Authorization: this.auth.authToken}
+            // @@@
+            // headers: {...fetchOptions.headers, Authorization: this.auth.authToken}
+            headers: {...fetchOptions.headers, 'X-Authorization': this.auth.authToken}
         }
         return [newFetchOptions, ...restParams]
     }

packages/template-retail-react-app/app/commerce-api/utils.js

@@ -184,7 +184,9 @@ export const createOcapiFetch = (commerceAPIConfig) => async (
     methodName,
     body
 ) => {
-    const proxy = `/mobify/proxy/ocapi`
+    // @@@
+    // const proxy = `/mobify/proxy/ocapi`
+    const proxy = `/proxy/ocapi`
 
     // The api config will only have `ocapiHost` during testing to workaround localhost proxy
     const host = commerceAPIConfig.ocapiHost

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

@@ -11,6 +11,7 @@ const {getRuntime} = require('pwa-kit-runtime/ssr/server/express')
 const {isRemote} = require('pwa-kit-runtime/utils/ssr-server')
 const {getConfig} = require('pwa-kit-runtime/utils/ssr-config')
 const helmet = require('helmet')
+const {createProxyMiddleware} = require('http-proxy-middleware')
 
 const options = {
     // The build directory (an absolute path)
@@ -32,7 +33,86 @@ const options = {
 
 const runtime = getRuntime()
 
+// @@@
+const AUTH = {
+    username: 'storefront',
+    password: 'password'
+}
+
+function basicAuthMiddleware(req, res, next) {
+    const shouldSkipAuth =
+        req.path.startsWith('/proxy') ||
+        req.path.startsWith('/mobify') ||
+        req.path.startsWith('/callback')
+    if (shouldSkipAuth) {
+        return next()
+    }
+
+    const authorization = (req.get('authorization') || '').split(' ')[1] || ''
+    const [username, password] = Buffer.from(authorization, 'base64')
+        .toString()
+        .split(':')
+
+    const hasValidAuth = username == AUTH.username && password == AUTH.password
+    if (hasValidAuth) {
+        return next()
+    }
+
+    res.set('WWW-Authenticate', 'Basic realm="Storefront"')
+    res.status(401).send('Auth Required! :woman-gesturing-no:')
+}
+
+// Basic auth credentials are in the `authorization` header, while
+// SCAPI/OCAPI JWTs are in `x-authorization`.
+function swapAuthHeader(proxyReq, req, res) {
+    proxyReq.removeHeader('Authorization')
+
+    const authorization = proxyReq.getHeader('X-Authorization')
+    proxyReq.removeHeader('X-Authorization')
+    // Avoid OCAPI origin protection.
+    proxyReq.removeHeader('Origin')
+    if (authorization) {
+        proxyReq.setHeader('Authorization', authorization)
+    }
+}
+
+// Useful for testing!
+const proxyHTTPBin = createProxyMiddleware({
+    target: 'https://httpbin.org/anything',
+    secure: true,
+    changeOrigin: true,
+    onProxyReq: swapAuthHeader,
+    pathRewrite: {
+        '.*': ''
+    }
+})
+
+const proxySCAPI = createProxyMiddleware({
+    target: 'https://kv7kzm78.api.commercecloud.salesforce.com',
+    secure: true,
+    changeOrigin: true,
+    onProxyReq: swapAuthHeader,
+    pathRewrite: {
+        '^/proxy/scapi/': '/'
+    }
+})
+
+const proxyOCAPI = createProxyMiddleware({
+    target: 'https://zzte-053.sandbox.us02.dx.commercecloud.salesforce.com',
+    secure: true,
+    changeOrigin: true,
+    onProxyReq: swapAuthHeader,
+    pathRewrite: {
+        '^/proxy/ocapi/': '/'
+    }
+})
+
 const {handler} = runtime.createHandler(options, (app) => {
+    app.use(basicAuthMiddleware)
+    app.all('/proxy/httpbin/*', proxyHTTPBin)
+    app.all('/proxy/scapi/*', proxySCAPI)
+    app.all('/proxy/ocapi/*', proxyOCAPI)
+
     // Set HTTP security headers
     app.use(
         helmet({

packages/template-retail-react-app/config/default.js

@@ -20,7 +20,9 @@ module.exports = {
         },
         sites,
         commerceAPI: {
-            proxyPath: `/mobify/proxy/api`,
+            // @@@
+            // proxyPath: `/mobify/proxy/api`,
+            proxyPath: `/proxy/api`,
             parameters: {
                 clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
                 organizationId: 'f_ecom_zzrf_001',

packages/template-retail-react-app/package.json

@@ -90,5 +90,8 @@
         "iOS >= 9.0",
         "Android >= 4.4.4",
         "last 4 ChromeAndroid versions"
-    ]
+    ],
+    "dependencies": {
+        "http-proxy-middleware": "^2.0.6"
+    }
 }