Implement Automatic Login

The Automatic Login component detects when a shopper has an active Bolt session and automatically logs the shopper into their Bolt Account. Because of this active session, shoppers would not need to have their accounts detected or authenticate via a one-time passcode (OTP).

Shopper Experience

Shoppers who are not logged into their Bolt account will not experience this flow.

Shoppers who have already logged into Bolt and have an active Bolt session will be automatically logged in and prompted with a modal asking permission to share their account information with the merchant storefront.

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

1. Check for an active Bolt session. We recommend checking for device login session immediately after the DOM completes loading.

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

2. If an active session exists, trigger authorization:

let authorizationResponse = await authorizationComponent.authorize({});

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.