πŸ“ Bolt Help / Core Products / Embedded Accounts / Implement Automatic Login

Implement Automatic Login

The Auto Login component detects when a shopper has an active Bolt session and automatically logs the shopper in. You can skip the account detection and one-time passcode (OTP) steps since the shopper has already completed them in a previous session.

Even though an active Bolt session skips the shopper to the payment step, you must implement all steps of embedded accounts to provide a login experience for shoppers who don’t have an active session.

1. Create and Mount the Authorization Modal

Mounting the authorization modal will attach the iframe to your site’s DOM, but will not render it. You must pass the Bolt Publishable Key to create the modal. Replace YOUR_KEY with your Publishable Key in the example below.

async function mountAuthorizationComponent(){
  const boltPublishableKey = YOUR_KEY
  const boltEmbedded = Bolt(boltPublishableKey);

  const authorizationComponent = boltEmbedded.create("authorization_component",  {style: {position: "right"}} );
  await authorizationComponent.mount(".email-div") // mount on the div container
}

2. Detect Active Account Session

Check for an active Bolt session:

let hasAccountResponse = await authorizeComponent.hasAccount();  
// hasAccountResponse returns a boolean value that indicates whether a Bolt active session exists on the browser

If an active session exists, trigger authorization:

let authorizationResponse = await authorizeComponent.authorize({});
Active Bolt Session Detected Next Step for Shopper
Yes Payment Fields
No Detect Bolt Account

Next Step

After you implement Auto Login, you will enable Bolt Account Detection to check Bolt account data to determine whether an account exists for inputted shopper identification. This functionality is available via front-end component or API.

πŸ“–On This Page
Filter by Section
Filter by Topic