To handle static redirects, perform the following steps.

To handle static redirects

1. Add the static URL as an Allowed Return URL in your LWA security profile.
   For example, if you use the delivery card in a cart page whose URL is https://www.example.com/cart, add https://www.example.com/cart to the Allowed Return URLs in the LWA security profile.

2. In your code, either hard-code the static URL into the lwaConfig that your delivery card uses, or set the static redirect URL based on the HTML of the page. The following code examples show both approaches.

   Set the static URL as the redirectUrl in the lwaConfig that the delivery card uses

   JavaScript

   const lwAConfig = {
    clientId: "yourLoginWithAmazonClientId",
    redirectUrl: "https://www.example.com/cart",
    signOutCallback: function() {
       // Placeholder for implementing the sign-out logic, such as clearing the shopper's state for the current session           }, 
    }
   };
   

   Set the static redirect URL that you get from the current page's HTML

   JavaScript

   const lwAConfig = {
    clientId: "yourLoginWithAmazonClientId",
    redirectUrl: windows.location.href,
    signOutCallback: function() {
      // Placeholder for implementing the sign-out logic, such as clearing the shopper's state for the current session           }, 
    }
   };
   

Static redirection isn't practical for all pages with a delivery card. For example, if you want to redirect a shopper back to product detail pages where the URL contains variables like product names or product IDs, it isn't feasible to allow-list every product URL in the Allowed Return URLs of your LWA security profile. For these cases, use dynamic redirects.

To enable dynamic redirects, you must set up a redirect handler page such as https://www.example.com/bwp-signin-redirect. Add your redirect handler page's URL to the Allowed Return URLs of your LWA security profile. Your redirect handler page manages the authentication response from Amazon and directs users to destination URLs dynamically after the user signs in. You can include the dynamic URL and an anti-forgery key in the state parameter of your request to ensure redirection back to the dynamic URL and safeguard against cross-site request forgery (CSRF).

To handle dynamic redirection, perform the following steps.

To handle dynamic redirects

1. Add the URL of your redirect handler page (for example,https://www.example.com/bwp-signin-redirect) to the Allowed Return URLs in your LWA security profile.

2. On dynamic page load, generate an encoded state and maintain a server-side mapping between
   the current browser session and the state. See the code example later in this section.

3. When the shopper clicks the sign-in link, redirect them to the redirect handler page and include the state.

4. After sign-in is complete, process and verify the authorization code that LWA provides in the redirect. For details, see Handle the Authorization Code Flow.

5. Redirect the shopper to the final URL.

For details, see Dynamically Redirect Users in the LWA documentation.

The following diagram provides an overview of how to handle dynamic redirect on page load.

Dynamic redirection includes the following steps:

1. The shopper visits a dynamic URL such as a product detail page.
   The dynamic redirection flow starts when the shopper visits a product detail page that contains a delivery card that they use to sign in.

2. The web server generates a state with a dynamic URL and an anti-forgery key.
   To handle the page load request, you must set up a route to handle requests to dynamic URLs on the server side. When the server receives a GET request, it can generate a state with the current page’s URL and an anti-forgery key. We recommend that you encode the state with at least 256 bits of entropy. For details, see Calculating the State Parameter.

   JavaScript

   // JavaScript running on the server-side (using Node.js)
   
   //...other JavaScript code
   const express = require('express'); 
   const app = express();
   const crypto = require('crypto');
   
   // The client is requesting to load the product detail page.
   app.post('/products/:<product-id>', (req, res) => {
   const productId = req.params.productId;
   const tabId = req.tabId; // Assumes a unique tabId is generated for each tab.
   const sessionId = req.sessionID; // Assumes session management middleware that assigns a session ID.  
   
   // Get the current page URL.
   const protocol = req.protocol;
   const host = req.hostname;
   const urlPath = req.originalUrl; // Includes the path and query string
   const dynamicUrl = `${protocol}://${host}${urlPath}`; 
   
   // Generate a UUID as an anti-forgery key. 
   // This is specific to CSRF handling, so it is optional if your site has other CSRF-handling mechanisms.
   const antiForgeryKey = crypto.randomUUID();    
   
     // Generate a state with a dynamic URL and an anti-forgery key.
   const state = Buffer.from(`${antiForgeryKey} ${dynamicUrl}`).toString('base64');   
   
     // ... Next steps.
   });
   
   // ...other JavaScript
   
   

3. The web server stores the state in the current session information and returns to the product detail page with the state.
   See the following code.

   JavaScript

   // JavaScript running on the server-side (using Node.js)
   
   // ...Other JavaScript code
   
   // Store data in the session management database.
   async function saveToSessionDB(sessionId, data) {
    // Implement database saving logic here.
   }
   
   // Get the date from the session database.
   async function getFromSessionDB(sessionId, data) {
    // Your database logic to retrieve session data.
    return data_from_db; // Simulate retrieval
   }
   
   // The client is requesting to load the product detail page.
   app.post('/products/:<product-id>', (req, res) => {
   
      // ... Other JavaScript code  
      try {
       // Get sessionState map from the session database.
       const sessionState = await getFromSessionDB(sessionId, 'sessionState')    
      
       // Store the state created in the previous step in the current session information.
       sessionState[tabId] = state;
        
       await saveToSessionDB(sessionId, { 'sessionState' : sessionState});    
      
        // Return the product detail page with the state.
       res.render('product-detail-page', { productId: productId, state: state });
      } catch (error) {
       // Implement error handling here.
      }
   });
   
   // ...other JavaScript
   

4. The browser renders a delivery card with the state and a redirect URL in the lwaConfig.
   Upon receiving the state from the server, the client can render the delivery card with the received state. For additional delivery card examples, see Delivery Card Examples.

   JavaScript

   // Javascript running on the client side.
   
   // Import the pni-web-components.js in your HTML file.
   <script type="module" src="/path/to/pni-web-components.js"></script>
   
   //...Other HTML
   
   <script>
     document.addEventListener('DOMContentLoaded', function() {
       const deliveryCard = document.createElement('delivery-card'); 
       deliveryCard.lwaConfig = {
         clientId: "amzn1.application-oa2-client.your-unique-client-id",
         redirectUrl: "https://www.example.com/bwp-signin-redirect",
         signOutCallback: function() {
         // Placeholder for implementing the sign-out logic, such as clearing the shopper's state for the current session }, 
       },
       state: "receivedState",
     }; 
     document.body.appendChild(deliveryCard);
   });
   </script>
   
   //...Other HTML
   

The following diagram provides an overview of the authorization code flow.

The authorization code flow has the following steps:

1. LWA redirects the shopper to the redirect handler page after shopper signs in.
   After the shopper successfully signs in, LWA redirects the shopper to the redirect handler page with an authorization code, scope, and state in query parameters. The following example shows a redirect URL: https://www.example.com/bwp-signin-redirect?code=example-code&state=example-state&scope=profile.

2. The web server validates the state and decodes it to get a dynamic URL.
   The server extracts the code and state parameters from the URL, validates the state to guard against CSRF attacks, and then decodes the state to get the dynamic URL. The dynamic URL will redirect the shopper back to the product detail page, as shown in the following server-side code example.

   JavaScript

   const express = require('express'); 
   const app = express();
   
   // Function to store data in a session management database.
   async function saveToSessionDB(sessionId, data) {
     // Implement database-saving logic here.
   }
   
   // Function to get the date from a session database.
   async function getFromSessionDB(sessionId, data) {
     // Your database logic to retrieve session data.
     return data_from_db; // Simulate retrieval
   }
   
   // Function to validate the redirect URL to prevent open redirects.
   function validateUrl(url) {
     // Your validation logic to ensure that the URL is in your Allowed Return URLs list in LWA.
   }
   
   // The client is requesting to load the redirect handler page.
   app.post('/bwp-signin-redirect/:state/:code', (req, res) => {
   const state = req.params.state;
   const tabId = req.tabId; // Assumes a unique tabId is generated for each tab.
   const sessionId = req.sessionID; // Assumes session management middleware that assigns a session ID.  
   
   // Get the state from the current session database.
   const sessionState = await getFromSessionDB(sessionId,'sessionState');
   const storedState = sessionState[tabId];
   
   // Clear the state for the tabId in the sessionState.
   delete sessionState[tabId];
   await saveToSessionDB(sessionId,{'sessionState':sessionState});  
   
   // Validate the state and get the dynamicUrl.
   if (state === storedState) {
     // Decode the base64 state.
     const decodedState = Buffer.from(encodedState, 'base64').toString('utf-8');
    
     // Split the decoded state(`${forgeryKey} ${dynamicUrl}`) by spaces to get the components.
     const components = decodedState.split(' ');
     const dynamicUrl = components[1];    
    
     // We recommend that you validate the dynamicUrl to prevent open redirects.
     if (!validateUrl(dynamicUrl)){
        // Implement error handling here.
     }      
    // ...Remaining steps.
    }
   });
   

3. The web server gets the access token and refresh token.
   To get the LWA OAuth tokens with a code, redirect URL, LWA client ID, and LWA client secret, follow Authorization Code Grant in the LWA documentation.

   We recommend that you save the refresh token in the session data to maintain continuous access to the access token. For details, see Using Refresh Tokens. You therefore can maintain the shopper's signed-in state for the current session. It's important to clear the stored shopper state from the session after the session ends or the shopper signs out. You can define the sign out logic in the signOutCallback function in the LwAConfig.

   The following code shows how to get the access token and refresh token.

   JavaScript

   const express = require('express'); 
   const app = express();
   
   // Store data in session management database.
   async function saveToSessionDB(sessionId, data) {
    // Implement database-saving logic here.
   }
   
   // The client is requesting to load the redirect handler page.
   app.post('/bwp-signin-redirect/:state/:code', (req, res) => {
   const code = req.params.code;
   const sessionId = req.sessionID; // Assumes session management middleware that assigns a session ID.
   const redirectUrl= "https://www.example.com/bwp-signin-redirect";  
   
   // ...other JavaScript code  
   
     if (state === storedState) {
       //...other JavaScript code    
    
       try {        
         // Get the LWA access token and refresh token.
         const oAuthToken = await getLWAOAuthToken(code, redirectUrl);
         // Save the access token and refresh token in the session database.
         await saveToSessionDB(sessionId, {'accessToken': oAuthToken.access_token});
         await saveToSessionDB(sessionId, {'refreshToken': oAuthToken.refresh_token});
        } catch (error) {
         // Implement error handling here
        }    
    // ...Remaining steps.
    }
   });
   
   // Get LWA oAuthToken with code and redirectUrl.
   async function getLWAOAuthToken(code, redirectUrl) {
     
      try {
           // Define parameters for the OAuth token request.
           const params = new URLSearchParams({
               grant_type: 'authorization_code',
               code: code,
               client_id: 'amzn1.application-oa2-client.your-uniqe-client-id', // LWA client ID
               client_secret: 'LWA_CLIENT_SECRET', // LWA client secret
               redirect_uri: redirectUrl, // For exmaple, https://www.example.com/bwp-signin-redirect 
           });  
     
           const response = await fetch('https://api.amazon.com/auth/o2/token', {
               method: 'POST',
               headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
               },
               body: params.toString(),
           });  
     
        if (!response.ok) {
            // Implement error handling here
        }    
        return await response.json();
        
    } catch (error) {
      // Implement error handling here.
    }
   }
   

4. The web server gets the shopper's profile data.
   After you receive the access token in the access token response, you can get the shopper's Amazon customer profile data, which includes the shopper's name, email, default shipping address (optional), and mobile number (optional). For details, see Call the Profile Endpoint Server-Side in the LWA documentation.

   For an example of how to get the shopper's profile data, see the following code.

   JavaScript

   const express = require('express'); 
   const app = express();
   
   //Function to get the date from a session database.
   async function getFromSessionDB(sessionId, data) {
    // Your database logic to retrieve session data.
    return data_from_db; // Simulate retrieval
   }
   
   
   // The client is requesting to load the redirect handler page.
   app.post('/bwp-signin-redirect/:state/:code', (req, res) => {
   const sessionId = req.sessionID; // Assumes session management middleware that assigns a session ID
   
   // ...other JavaScript code  
   
     if (state === storedState) {
       // ...other JavaScript code    
       // Get the LWA shopper profile
       try { 
         // Retrieve the access token saved in the previous step.     
         const accessToken = await getFromSessionDB(sessionId, 'accessToken');
         // Get shopper profile with access token.
         const shopperInfo = await getLWAShopperInfo(oAuthToken.accessToken);
         // Placeholder to store the shopper profile.
        
        } catch (error) {
           // Implement error handling here
        }
      }
   });
   
   // Get the LWA shopper profile with the LWA access token.
   async function getLWAShopperInfo(accessToken) {
   try {
      const response = await fetch('https://api.amazon.com/user/profile', {
         method: 'GET',
         headers: {
           'Authorization': 'Bearer ${accessToken}'
         },  
    
       if (!response.ok) {
         // Implement error handling here
       }    
       return await response.json();
   
      } catch (error) {
       // Implement error handling here
      } 
   });
   

5. The web server redirects the shopper back to the dynamic URL.
   After completing the authorization flow and getting the shopper's profile data, the server can redirect the shopper to the dynamic URL (for example, the product detail page), that you got in an earlier step.

   The following example shows how to redirect the shopper.

   JavaScript

   const express = require('express'); 
   const app = express();
   
   // The client is requesting to load the redirect handler page.
   app.post('/bwp-signin-redirect/:state/:code', (req, res) => {
   
      //...other JavaScript code  
   
       if(state === storedState) {
          // ...other JavaScript code.
    
          // Redirect to the dynamic URL obtained in a previous step.
          res.redirect(302, dynamicUrl);
        }
   });