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

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.

Device Login Component

WARNING

Due to third-party cookie restrictions, shoppers using Safari or Firefox 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

  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
  1. 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.

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