BigCommerce Customer Identity and Access Management Plugin - Stencil

---

BigCommerce Stencil is the current theming framework used in modern BigCommerce stores. The LoginRadius CIAM (Customer Identity and Access Management) plugin for Stencil allows seamless integration of user authentication, registration, social login, and Single Sign-On (SSO) into your BigCommerce storefront.

This guide explains how to install the plugin, configure SSO settings, update theme files, and enable advanced identity features using LoginRadius, ensuring secure customer access and identity management.

Use Cases

• Unified Login and Registration: Centralize user identity using LoginRadius forms across login, register, and password reset experiences.

• Social Login Support: Let users sign in with their Google, Facebook, or other social identities.

• SSO Integration: Authenticate users via LoginRadius and create sessions directly in BigCommerce.

• Customer Profile Management: Store, manage, and retrieve customer identity data through LoginRadius.

• Multi-Store Support: Manage identities across multiple BigCommerce storefronts under one identity platform.

How It Works

The integration relies on the LoginRadius SSO Connector to bridge authentication with BigCommerce. The diagram below illustrates the end-to-end flow:

Step-by-step Breakdown

1. User Accesses Login Page
   The user navigates to your BigCommerce login page.

2. LoginRadius Form Captures Credentials
   Login credentials are entered via the embedded LoginRadius form.

3. LoginRadius Authenticates and Initiates SSO
   LoginRadius validates the credentials and initiates the SSO flow.

4. Check for Existing BigCommerce User
   The module checks if a user with the given email exists in BigCommerce.

5. Account Handling

   • If the user exists, LoginRadius links the account.

   • If the user does not exist: A new account is created in BigCommerce.

6. Session Creation
   A session is created in BigCommerce using user details from LoginRadius.

7. User Login Complete
   The user is logged in and redirected to the storefront or account page.

Requirements

To integrate this plugin successfully, ensure the following prerequisites:

• An active BigCommerce store using the Stencil theme.

• A LoginRadius Enterprise account.

• Access to BigCommerce theme files and Stencil CLI.

• BigCommerce API credentials with appropriate access levels.

BigCommerce Integration Setup

The following tabs guide you through the essential steps for integrating LoginRadius with your BigCommerce store: installing the app, generating API credentials, and configuring the LoginRadius dashboard.

App Installation

Install the LoginRadius app from the BigCommerce marketplace to connect your store with LoginRadius:

1. Log in to your BigCommerce Admin Console.
2. Go to Apps > Marketplace.
3. Search for LoginRadius and click Install.
4. After installation, select the app from the sidebar.
5. Enter your LoginRadius API Key and API Secret, then click Validate and Install.

API Credentials Setup

To connect BigCommerce with LoginRadius, generate API credentials:

1. Navigate to Advanced Settings > API Accounts in your BigCommerce admin.
2. Click Create API Account.
3. Name your account (e.g., LoginRadius SSO).
4. Set the following access scopes:
   • Customers, Checkout Content, Content: modify
   • Customer Login: login
   • All others: read-only
5. Click Save to download your credentials file. It will include:
   • Client ID
   • Client Secret
   • Access Token
   • API Path (which includes your store hash)

LoginRadius Configuration

To finalize the integration, configure your LoginRadius dashboard with the following:

• Set Required Fields

Go to Branding > Forms in your LoginRadius Console:

• Set First Name and Last Name as required fields.

• Add Store URL

Navigate to Tenant Settings > Configured Domains:

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

• Configure Hosted Plugin

Go to Integrations > SSO Integrations and select BigCommerce. Then complete the form with:

• Platform: BigCommerce

• Store Name: Extract from your API path.
  Example: pqshk245fh from https://api.bigcommerce.com/stores/pqshk245fh/v3/

  Validation Rules:

  • Must start with a letter.
  • Alphanumeric, _, or -.
  • No spaces.
  • 1–60 characters.
  • Auto-converted to lowercase.

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

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

• Access Token / Client ID / Client Secret: Use the credentials from the previous step.

• Scopes:

store_v2_customers store_v2_users_login store_v2_default store_v2_information_read_only customers_basic_information

Field Mapping (Example)

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

Stencil Theme Setup

The Stencil Theme Setup section outlines how to integrate the LoginRadius authentication components into your BigCommerce Stencil theme. You'll learn how to prepare your theme, update LoginRadius configuration, embed auth interfaces, and publish the modified theme.

Prepare Your Theme

Backup your theme before making changes.

• Install Stencil CLI if it is not already installed.
• Download and unzip your current theme.
• Extract and open the LoginRadius Stencil Package.

Copy Files

Copy the required files from the LoginRadius package into your theme directories:

• assets/ → theme/assets/
• components/ → theme/templates/components/

This step ensures all JavaScript, styles, and Handlebars components are available to your theme.

Configure JavaScript

Edit assets/js/loginradius/config.js and configure your integration:

storeName: 'your_store_hash',
apiKey: 'your_loginradius_api_key',
appName: 'your_loginradius_app_name',
sott: 'your_sott',
verificationUrl: 'https://yourstore.com/email/verify' // optional

storeName is the hash from your BigCommerce API path.

sott is a LoginRadius short-lived token for secure registration and login flows.

Insert LoginRadius Includes

In templates/components/common/header.html, add the following before the closing </header> tag:

{{> components/loginradius/LRreferences }}
{{> components/loginradius/LRsso }}

These includes inject the necessary LoginRadius scripts and enable SSO functionality in your theme.

Update Auth Pages

login.html Replace the login form section with:

{{> components/loginradius/auth }}

create-account.html

Replace the entire file content with:

{{inject 'passwordRequirements' settings.password_requirements}}
{{#partial "page"}}
  {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
  <h1 class="page-heading">{{lang 'create_account.heading' }}</h1>
  <div class="account account--fixed">
    {{> components/loginradius/register }}
  </div>
{{/partial}}
{{> layout/base}}

This allows LoginRadius to fully manage user authentication and registration.

Handle Logout & Checkout

Update Logout Link In navigation.html, replace the logout link with:

<a class="navUser-action" onclick="lrLogout(); return false;" href="#">{{lang 'common.logout'}}</a>

Optimized Checkout (Optional) To support LoginRadius on the optimized checkout page, add this to checkout.html:

{{> components/loginradius/LoginRadiusOptimizedCheckout }}

This ensures SSO integration during the checkout process as well.

Upload Modified Theme

Once all changes are complete:

• Bundle your theme using the Stencil CLI.
• Push the bundled theme back to BigCommerce.
• Follow the official Stencil Theme Bundling Guide for deployment instructions.

Panel Component Reference

Component	Purpose
auth	Full LoginRadius authentication UI
login	Traditional login only
social	Social login only
register	Traditional registration
verify	Email verification
forgot	Forgot/reset password
accountdetails	Profile management
changepassword	Change password UI
emailmanage	Add/Remove email UI
profileeditor	Profile update interface
LoginRadiusOptimizedCheckout	Replaces checkout authentication UI

Storage of BigCommerce Customer ID

LoginRadius stores the BigCommerce customer_id in the ExternalIds array within the customer profile:

"ExternalIds": [
  { "Source": "BigCommerce-myStore", "SourceId": "6" }
]

Supports multiple stores:

"ExternalIds": [
  { "Source": "BigCommerce-storeA", "SourceId": "6" },
  { "Source": "BigCommerce-storeB", "SourceId": "21" }
]

Additional Considerations

• Include a dedicated verification page when using emailmanage or accountdetails.

• You can embed LoginRadius components into any page and style them freely.

• Use LoginRadius JS SDK to access session details.

• Avoid exposing sensitive credentials like API secrets in frontend code.

• Contact LoginRadius Support if you are migrating users or want to preserve passwords.

Uninstall Process

If removing the LoginRadius plugin:

• Delete all LoginRadius-related files from assets/ and components/.

• Restore original templates:

  • login.html

  • create-account.html

  • header.html

  • Any other modified components or includes.

Related Resources

• BigCommerce BluePrint Guide
• LoginRadius SDK Guide
• TurnKey Plugins Overview