@salesforce/pwa-kit-create-app 3.9.0-preview.1 → 3.9.0-preview.2

package/assets/bootstrap/js/config/default.js.hbs

@@ -17,6 +17,33 @@ module.exports = {
             // This boolean value dictates whether or not default site or locale values are shown in the url. Defaults to: false
             // showDefaults: true
         },
+        login: {
+            passwordless: {
+                // Enables or disables passwordless login for the site. Defaults to: false
+                enabled: false,
+                // The callback URI, which can be an absolute URL (including third-party URIs) or a relative path set up by the developer.
+                // Required in 'callback' mode; if missing, passwordless login defaults to 'sms' mode, which requires Marketing Cloud configuration.
+                // If the env var `PASSWORDLESS_LOGIN_CALLBACK_URI` is set, it will override the config value.
+                callbackURI:
+                    process.env.PASSWORDLESS_LOGIN_CALLBACK_URI || '/passwordless-login-callback'
+            },
+            social: {
+                // Enables or disables social login for the site. Defaults to: false
+                enabled: false,
+                // The third-party identity providers supported by your app. The PWA Kit supports Google and Apple by default.
+                // Additional IDPs will also need to be added to the IDP_CONFIG in the SocialLogin component.
+                idps: ['google', 'apple'],
+                // The redirect URI used after a successful social login authentication.
+                // This should be a relative path set up by the developer.
+                // If the env var `SOCIAL_LOGIN_REDIRECT_URI` is set, it will override the config value.
+                redirectURI: process.env.SOCIAL_LOGIN_REDIRECT_URI || '/social-callback'
+            },
+            resetPassword: {
+                // The callback URI, which can be an absolute URL (including third-party URIs) or a relative path set up by the developer.
+                // If the env var `RESET_PASSWORD_CALLBACK_URI` is set, it will override the config value.
+                callbackURI: process.env.RESET_PASSWORD_CALLBACK_URI || '/reset-password-callback'
+            }
+        },
         // The default site for your app. This value will be used when a siteRef could not be determined from the url
         defaultSite: '{{answers.project.commerce.siteId}}',
         // Provide aliases for your sites. These will be used in place of your site id when generating paths throughout the application.

package/assets/bootstrap/js/overrides/app/ssr.js.hbs

@@ -13,6 +13,19 @@ import {defaultPwaKitSecurityHeaders} from '@salesforce/pwa-kit-runtime/utils/mi
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import helmet from 'helmet'
 
+import express from 'express'
+import {emailLink} from '@salesforce/retail-react-app/app/utils/marketing-cloud/marketing-cloud-email-link'
+import {
+    PASSWORDLESS_LOGIN_LANDING_PATH,
+    RESET_PASSWORD_LANDING_PATH
+} from '@salesforce/retail-react-app/app/constants'
+import {
+    validateSlasCallbackToken,
+    jwksCaching
+} from '@salesforce/retail-react-app/app/utils/jwt-utils'
+
+const config = getConfig()
+
 const options = {
     // The build directory (an absolute path)
     buildDir: path.resolve(process.cwd(), 'build'),
@@ -21,7 +34,7 @@ const options = {
     defaultCacheTimeSeconds: 600,
 
     // The contents of the config file for the current environment
-    mobify: getConfig(),
+    mobify: config,
 
     // The port that the local dev server listens on
     port: 3000,
@@ -49,7 +62,40 @@ const options = {
 
 const runtime = getRuntime()
 
+const resetPasswordCallback =
+    config.app.login?.resetPassword?.callbackURI || '/reset-password-callback'
+const passwordlessLoginCallback =
+    config.app.login?.passwordless?.callbackURI || '/passwordless-login-callback'
+
+// Reusable function to handle sending a magic link email.
+// By default, this implementation uses Marketing Cloud.
+async function sendMagicLinkEmail(req, res, landingPath, emailTemplate, redirectUrl) {
+    // Extract the base URL from the request
+    const base = req.protocol + '://' + req.get('host')
+
+    // Extract the email_id and token from the request body
+    const {email_id, token} = req.body
+
+    // Construct the magic link URL
+    let magicLink = `${base}${landingPath}?token=${encodeURIComponent(token)}`
+    if (landingPath === RESET_PASSWORD_LANDING_PATH) {
+        // Add email query parameter for reset password flow
+        magicLink += `&email=${encodeURIComponent(email_id)}`
+    }
+    if (landingPath === PASSWORDLESS_LOGIN_LANDING_PATH && redirectUrl) {
+        magicLink += `&redirect_url=${encodeURIComponent(redirectUrl)}`
+    }
+
+    // Call the emailLink function to send an email with the magic link using Marketing Cloud
+    const emailLinkResponse = await emailLink(email_id, emailTemplate, magicLink)
+
+    // Send the response
+    res.send(emailLinkResponse)
+}
+
 const {handler} = runtime.createHandler(options, (app) => {
+    app.use(express.json()) // To parse JSON payloads
+    app.use(express.urlencoded({extended: true}))
     // Set default HTTP security headers required by PWA Kit
     app.use(defaultPwaKitSecurityHeaders)
     // Set custom HTTP security headers
@@ -82,6 +128,45 @@ const {handler} = runtime.createHandler(options, (app) => {
         res.set('Cache-Control', `max-age=31536000`)
         res.send()
     })
+
+    app.get('/:shortCode/:tenantId/oauth2/jwks', (req, res) => {
+        jwksCaching(req, res, {shortCode: req.params.shortCode, tenantId: req.params.tenantId})
+    })
+
+    // Handles the passwordless login callback route. SLAS makes a POST request to this
+    // endpoint sending the email address and passwordless token. Then this endpoint calls
+    // the sendMagicLinkEmail function to send an email with the passwordless login magic link.
+    // https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html#receive-the-callback
+    app.post(passwordlessLoginCallback, (req, res) => {
+        const slasCallbackToken = req.headers['x-slas-callback-token']
+        const redirectUrl = req.query.redirectUrl
+        validateSlasCallbackToken(slasCallbackToken).then(() => {
+            sendMagicLinkEmail(
+                req,
+                res,
+                PASSWORDLESS_LOGIN_LANDING_PATH,
+                process.env.MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE,
+                redirectUrl
+            )
+        })
+    })
+
+    // Handles the reset password callback route. SLAS makes a POST request to this
+    // endpoint sending the email address and reset password token. Then this endpoint calls
+    // the sendMagicLinkEmail function to send an email with the reset password magic link.
+    // https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-password-reset.html#slas-password-reset-flow
+    app.post(resetPasswordCallback, (req, res) => {
+        const slasCallbackToken = req.headers['x-slas-callback-token']
+        validateSlasCallbackToken(slasCallbackToken).then(() => {
+            sendMagicLinkEmail(
+                req,
+                res,
+                RESET_PASSWORD_LANDING_PATH,
+                process.env.MARKETING_CLOUD_RESET_PASSWORD_TEMPLATE
+            )
+        })
+    })
+
     app.get('/robots.txt', runtime.serveStaticFile('static/robots.txt'))
     app.get('/favicon.ico', runtime.serveStaticFile('static/ico/favicon.ico'))
 

package/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs

@@ -13,6 +13,19 @@ import {defaultPwaKitSecurityHeaders} from '@salesforce/pwa-kit-runtime/utils/mi
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import helmet from 'helmet'
 
+import express from 'express'
+import {emailLink} from '@salesforce/retail-react-app/app/utils/marketing-cloud/marketing-cloud-email-link'
+import {
+    PASSWORDLESS_LOGIN_LANDING_PATH,
+    RESET_PASSWORD_LANDING_PATH
+} from '@salesforce/retail-react-app/app/constants'
+import {
+    validateSlasCallbackToken,
+    jwksCaching
+} from '@salesforce/retail-react-app/app/utils/jwt-utils'
+
+const config = getConfig()
+
 const options = {
     // The build directory (an absolute path)
     buildDir: path.resolve(process.cwd(), 'build'),
@@ -21,7 +34,7 @@ const options = {
     defaultCacheTimeSeconds: 600,
 
     // The contents of the config file for the current environment
-    mobify: getConfig(),
+    mobify: config,
 
     // The port that the local dev server listens on
     port: 3000,
@@ -49,7 +62,40 @@ const options = {
 
 const runtime = getRuntime()
 
+const resetPasswordCallback =
+    config.app.login?.resetPassword?.callbackURI || '/reset-password-callback'
+const passwordlessLoginCallback =
+    config.app.login?.passwordless?.callbackURI || '/passwordless-login-callback'
+
+// Reusable function to handle sending a magic link email.
+// By default, this implementation uses Marketing Cloud.
+async function sendMagicLinkEmail(req, res, landingPath, emailTemplate, redirectUrl) {
+    // Extract the base URL from the request
+    const base = req.protocol + '://' + req.get('host')
+
+    // Extract the email_id and token from the request body
+    const {email_id, token} = req.body
+
+    // Construct the magic link URL
+    let magicLink = `${base}${landingPath}?token=${encodeURIComponent(token)}`
+    if (landingPath === RESET_PASSWORD_LANDING_PATH) {
+        // Add email query parameter for reset password flow
+        magicLink += `&email=${encodeURIComponent(email_id)}`
+    }
+    if (landingPath === PASSWORDLESS_LOGIN_LANDING_PATH && redirectUrl) {
+        magicLink += `&redirect_url=${encodeURIComponent(redirectUrl)}`
+    }
+
+    // Call the emailLink function to send an email with the magic link using Marketing Cloud
+    const emailLinkResponse = await emailLink(email_id, emailTemplate, magicLink)
+
+    // Send the response
+    res.send(emailLinkResponse)
+}
+
 const {handler} = runtime.createHandler(options, (app) => {
+    app.use(express.json()) // To parse JSON payloads
+    app.use(express.urlencoded({extended: true}))
     // Set default HTTP security headers required by PWA Kit
     app.use(defaultPwaKitSecurityHeaders)
     // Set custom HTTP security headers
@@ -82,6 +128,45 @@ const {handler} = runtime.createHandler(options, (app) => {
         res.set('Cache-Control', `max-age=31536000`)
         res.send()
     })
+
+    app.get('/:shortCode/:tenantId/oauth2/jwks', (req, res) => {
+        jwksCaching(req, res, {shortCode: req.params.shortCode, tenantId: req.params.tenantId})
+    })
+
+    // Handles the passwordless login callback route. SLAS makes a POST request to this
+    // endpoint sending the email address and passwordless token. Then this endpoint calls
+    // the sendMagicLinkEmail function to send an email with the passwordless login magic link.
+    // https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-passwordless-login.html#receive-the-callback
+    app.post(passwordlessLoginCallback, (req, res) => {
+        const slasCallbackToken = req.headers['x-slas-callback-token']
+        const redirectUrl = req.query.redirectUrl
+        validateSlasCallbackToken(slasCallbackToken).then(() => {
+            sendMagicLinkEmail(
+                req,
+                res,
+                PASSWORDLESS_LOGIN_LANDING_PATH,
+                process.env.MARKETING_CLOUD_PASSWORDLESS_LOGIN_TEMPLATE,
+                redirectUrl
+            )
+        })
+    })
+
+    // Handles the reset password callback route. SLAS makes a POST request to this
+    // endpoint sending the email address and reset password token. Then this endpoint calls
+    // the sendMagicLinkEmail function to send an email with the reset password magic link.
+    // https://developer.salesforce.com/docs/commerce/commerce-api/guide/slas-password-reset.html#slas-password-reset-flow
+    app.post(resetPasswordCallback, (req, res) => {
+        const slasCallbackToken = req.headers['x-slas-callback-token']
+        validateSlasCallbackToken(slasCallbackToken).then(() => {
+            sendMagicLinkEmail(
+                req,
+                res,
+                RESET_PASSWORD_LANDING_PATH,
+                process.env.MARKETING_CLOUD_RESET_PASSWORD_TEMPLATE
+            )
+        })
+    })
+
     app.get('/robots.txt', runtime.serveStaticFile('static/robots.txt'))
     app.get('/favicon.ico', runtime.serveStaticFile('static/ico/favicon.ico'))
 

package/assets/templates/@salesforce/retail-react-app/config/default.js.hbs

@@ -35,7 +35,7 @@ module.exports = {
                 // The third-party identity providers supported by your app. The PWA Kit supports Google and Apple by default.
                 // Additional IDPs will also need to be added to the IDP_CONFIG in the SocialLogin component.
                 idps: ['google', 'apple'],
-                // The redirect URI used after a successful social login authentication. 
+                // The redirect URI used after a successful social login authentication.
                 // This should be a relative path set up by the developer.
                 // If the env var `SOCIAL_LOGIN_REDIRECT_URI` is set, it will override the config value.
                 redirectURI: process.env.SOCIAL_LOGIN_REDIRECT_URI || '/social-callback'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-create-app",
-  "version": "3.9.0-preview.1",
+  "version": "3.9.0-preview.2",
   "description": "Salesforce's project generator tool",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-create-app#readme",
   "bugs": {
@@ -38,13 +38,13 @@
     "tar": "^6.2.1"
   },
   "devDependencies": {
-    "@salesforce/pwa-kit-dev": "3.9.0-preview.1",
-    "internal-lib-build": "3.9.0-preview.1",
+    "@salesforce/pwa-kit-dev": "3.9.0-preview.2",
+    "internal-lib-build": "3.9.0-preview.2",
     "verdaccio": "^5.22.1"
   },
   "engines": {
     "node": "^16.11.0 || ^18.0.0 || ^20.0.0 || ^22.0.0",
     "npm": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
   },
-  "gitHead": "a4afa2da67a0c99f51ac1dfd9f63cd414f342dec"
+  "gitHead": "6965aa2fc067c784660c4bb816e699789ea386c5"
 }