BigCommerce Customer Identity and Access Management Plugin - BluePrint

BigCommerce Blueprint is a legacy theme framework used in older BigCommerce stores. LoginRadius provides a dedicated plugin for Blueprint to enable Single Sign-On (SSO), social login, and user registration. This integration is achieved by embedding LoginRadius forms and JavaScript into your Blueprint templates.

This guide covers setup and integration of the LoginRadius Blueprint plugin for BigCommerce.

Use Cases

• Centralized user login and registration using LoginRadius.

• Social login on the BigCommerce storefront.

• Seamless customer session creation after LoginRadius authentication.

• Store and manage customer profiles in LoginRadius.

How It Works

1. The user accesses the BigCommerce login page.
2. LoginRadius form (via SSO Connector) collects email and password.
3. LoginRadius authenticates the user and initiates the SSO flow.
4. The module uses the email ID to check if the user exists in the BigCommerce database.
5. A new BigCommerce account is created using the email if the user does not exist.
6. The LoginRadius account is linked to the BigCommerce account if the user exists.
7. A session is created in BigCommerce with the user details.
8. The User is logged into their BigCommerce account and redirected accordingly.

The complete flow diagram of the user journey is explained below.

Requirements

• BigCommerce store using the Blueprint theme engine

• LoginRadius Enterprise account

• Access to BigCommerce theme editor (HTML/CSS)

BigCommerce Integration with LoginRadius

The BigCommerce Integration with LoginRadius section outlines the process of installing the LoginRadius app within your BigCommerce Admin Console and configuring SSO to work with your LoginRadius identity platform.

BigCommerce App Installation

To integrate LoginRadius with your BigCommerce store, follow these steps:

1. Log in to your BigCommerce Admin Console.
2. Navigate to Apps > Marketplace.
3. Search for LoginRadius in the marketplace.
4. Click the LoginRadius App, then click Install.
5. After installation, select the LoginRadius App from the left-hand sidebar.
6. Enter your LoginRadius API Key and API Secret, then click Validate and Install.

LoginRadius Configuration for SSO

To support seamless SSO between LoginRadius and BigCommerce, complete the following configuration steps:

Enforce Required Fields In the LoginRadius Console:

• Go to Branding > Forms.
• Set First Name and Last Name as required fields.

Add Your BigCommerce Site URL

• Navigate to Tenant Settings.

• Add your BigCommerce store URL (e.g., https://yourstore.mybigcommerce.com) under Configured Domains.

Configure the Hosted Plugin

Go to Integrations > SSO Integrations and select BigCommerce. Fill in the following fields:

• Store Name: Use the store hash from your BigCommerce API path.
  Example: If your API path is https://api.bigcommerce.com/stores/pqshk245fh/v3/, your store name should be pqshk245fh.

  Store Name Validation Rules:

  • Must start with a letter.
  • Can include letters, numbers, underscores _, and hyphens -.
  • No spaces allowed.
  • 1 to 60 characters.
  • Automatically converted to lowercase.

• Store URL: https://<yourstore>.mybigcommerce.com

• Store Login URL: https://<yourstore>.mybigcommerce.com/login/token/

• Access Token / Client ID / Client Secret:
  Enter credentials from your BigCommerce API Account (via Advanced Settings > API Accounts).

• Scopes: Use the following scopes:

store_v2_customers store_v2_users_login store_v2_default store_v2_information_read_only customers_basic_information

• Data Mapping: Map LoginRadius fields to BigCommerce customer fields:

BigCommerce Field	LoginRadius Field
Email	Email[0].Value
First Name	FirstName
Last Name	LastName
Phone	PhoneNumbers[0].PhoneNumber
Address	Addresses[0].Address1

Uninstallation Instructions

If you’ve previously integrated the LoginRadius App using the Blueprint Theme, ensure the following cleanup steps:

• Remove any LoginRadius scripts, CSS, and content.

• Delete custom panel files from webdav/Panels.

• Revert changes to:

  • LoginForm.html

  • header.html or HTMLHead.html

  • Any other pages with embedded LoginRadius panels.

Blueprint Theme Setup (Deprecated)

🚫 The Blueprint Theme is no longer recommended. BigCommerce now uses Stencil themes by default. If you are still on Blueprint and require guidance, contact LoginRadius Support.

Initial Setup

For legacy Blueprint theme support, follow these steps carefully:

• Backup your current theme before making any modifications.
• Upload the LoginRadius Blueprint Package to your store via WebDAV.
• Copy the following folders from the package to the matching template folders:
  • assets/js → webdav/template/js
  • assets/images → webdav/template/images
  • assets/css → webdav/template/Styles
  • panels → webdav/Panels

Update Config File

Open assets/js/loginradius/config.js and update the following options:

• storeName: Your BigCommerce Store Hash (from API path).
• apiKey: Your LoginRadius API Key.
• appName: Your LoginRadius App Name.
• sott: A valid LoginRadius SOTT token.
• verificationUrl: (Optional) A custom URL for email verification.

Add Panels and Scripts

Update header.html or HTMLHead.html with:

%%Panel.lrreferences%%
%%Panel.lrsso%%

Update LoginForm.html with:

%%Panel.lrauth%%

To enable logout, bind your logout link with:

lrLogout(); return false;

Panel Reference List

Use the following LoginRadius panels as needed:

• %%Panel.lrauth%% – Full auth interface (login, social, register, forgot password)

• %%Panel.lrlogin%% – Traditional login only

• %%Panel.lrsocial%% – Social login only

• %%Panel.lrregister%% – Traditional registration only

• %%Panel.lrverify%% – Email verification

• %%Panel.lrforgot%% – Forgot/reset password

• %%Panel.lraccountdetails%% – Account profile details

• %%Panel.lrchangepassword%% – Change password form

• %%Panel.lremailmanage%% – Manage emails (add/remove)

• %%Panel.lrprofileeditor%% – Editable profile panel

Additional Considerations

• When using panels like lremailmanage or lraccountdetails, provide a dedicated email verification page that includes the lrverify panel.

• You can embed the LoginRadius lrauth panel into your checkout or account pages and apply custom CSS for styling.

• For dynamic data (e.g., showing user's name), use the LoginRadius JS SDK to access session information.

• Never expose API secrets in public or client-facing code.

• For customer migration and password retention from an older system, contact LoginRadius Support.

Related Resources

• BigCommerce Stencil
• LoginRadius JavaScript Library
• LoginRadius Forms