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