📍 Bolt Help / Core Products / Accounts / Direct API / Implement Login Status Component
Implement Login Status Component
Display a shopper's login status and, if they're logged in, a Logout button.

After a shopper logs in via the authorization modal, this component displays their username and a Logout button. Clicking Logout clears all Bolt session tokens and cookies, logging the user out of their account, and hides the component.

TIP

Instead of using Bolt’s Login Status Component, you can maintain your own logout button and use Bolt’s Logout Method.

Shopper Experience

Shoppers should see their Bolt Account username and the Bolt logo in a banner. They also have the option to learn more about Bolt or log out of their accounts using the three-dot dropdown menu.

Logged In status login banner with options.

Step 1: Create the Login Status Component

const loginStatusComponent = boltEmbedded.create("login_status"));

Step 2: Add the Component to HTML

Add a div to your webpage in the location where you want the login status component to appear. Style the div with the desired width and height.

<div id =”login-status” style={{ width: 400px”, height: 150px }} />

Step 3: Mount Login Status Component

Mount the login status component onto the new div.

loginStatusComponent.mount("#login-status");

Next Step

After you implement the Login Status Component, you will use the Bolt Account APIs to access Shopper Data for payment and shipping information of those shoppers with existing Bolt Accounts.

Filter by Section
Filter by Topic