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).
WARNING
This component moves the shopper automatically to the payment step. You still must implement all steps of Accounts to provide a login experience for shoppers who do not have an active session.
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.

WARNING
Due to third-party cookie restrictions, shoppers using Chrome Incognito mode to shop on your site will not experience Auto Login. Instead, they will be routed to the standard OTP modal.
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.
TIP
The Authorization Modal should only be mounted once per page. Additionally, if you have multiple components on the same page, they should be mounted to the same element.
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. 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
- If an active session exists, trigger authorization:
let authorizationResponse = await authorizationComponent.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.