The Commerce Layer Identity micro frontend (React) provides you with an application, powered by Commerce Layer APIs, handling customer login and sign-up functionalities. You can fork this repository and deploy it to any hosting service or use it as a reference application to build your own. A hosted version is also available.
Commerce Layer is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and secure API.
- Getting started
- Hosted version
- Private markets
- Custom reset password flow
- Contributors guide
- Running on Windows
- Help and support
- License
-
Create your organization and get your credentials by following one of our onboarding tutorials.
-
Configure the
selfHostedSlugproperty in/public/config.local.jsto match your organization slug (subdomain). If this file does not exist, create it using the following content:
window.clAppConfig = {
domain: "commercelayer.io",
selfHostedSlug: "<your-org-slug>",
}-
Deploy the forked repository to your preferred hosting service.
-
Create a sales channel API credential within your organization and take note of the client ID.
-
Define a valid scope as required by the sales channel authentication. It will be used to restrict the dataset of your application to a market, a stock location or a set of them.
-
Define a valid return URL that will be reached upon a successful login and/or sign-up procedure.
-
Open the identity app using the URL format:
<your-deployed-identity-url>?clientId=<your-client-id>&scope=<your-scope>&returnUrl=<your-return-url>.
https://identity.yourbrand.com?clientId=eyJhbGciOiJIUzUxMiJ9&scope=market:code:worldwide&returnUrl=https://shop.yourbrand.com/
Any Commerce Layer account comes with a hosted version of the Identity application that is automatically enabled. You can customize it by adding your organization logo, favicon and primary color.
You can use the hosted version of the Identity application with the following URL format: https://<your-organization-subdomain>.commercelayer.app/identity?clientId=<your-client-id>&scope=<your-scope>&returnUrl=<your-return-url>
https://yourbrand.commercelayer.app/identity?clientId=eyJhbGciOiJIUzUxMiJ9&scope=market:code:worldwide&returnUrl=https://shop.yourbrand.com/
When you associate a customer group with a market, that market becomes private and can be accessed only by customers belonging to the group. You can use private markets to handle scenarios where you need dedicated price lists, custom shipping methods, or other specific features available for a restricted pool of customers, such as managing B2B deals, B2C loyalty programs, private sales, and more.
To enable this kind of use cases, the mfe-identity application expects to have both required scope and optional publicScope parameters defined:
scope- the market to be used for the login process (e.g. a private market).publicScope- the default scope used by the app to obtain the organization settings needed to customize the UI (name, logo, colors, etc.).
https://yourbrand.commercelayer.app/identity?clientId=eyJhbGciOiJIUzUxMiJ9&scope=market:code:vip&publicScope=market:code:worldwide&returnUrl=https://shop.yourbrand.com/
In addition to the previously defined GET parameters required for correctly generating the hosted app link, you can optionally add the resetPasswordUrl one to enable a custom reset password link visible on the login form page. If that parameter is set a Forgot password? link will be shown on the right below the Password field.
https://yourbrand.commercelayer.app/identity?clientId=eyJhbGciOiJIUzUxMiJ9&scope=market:code:worldwide&returnUrl=https://shop.yourbrand.com/&resetPasswordUrl=https://www.yourbrand.com/customer/reset-password
-
Fork this repository (you can learn how to do this here).
-
Clone the forked repository like so:
git clone https://github.com/<your username>/mfe-identity.git && cd mfe-identity- First, install dependencies and run the development server:
pnpm install
pnpm dev-
(Optional) Set your environment with
.env.localstarting from.env.local.sample. -
Open http://localhost:5173 with your browser to see the result. You can use the following format to open the login page:
http://localhost:5173/identity/?clientId=<your-client-id>&scope=<your-scope>&returnUrl=<your-return-url> -
Make your changes and create a pull request (learn how to do this).
-
Someone will attend to your pull request and provide some feedback.
When working on Microsoft Windows, we suggest to use the PowerShell terminal or any alternative shell with the ability to run scripts as admin user.
This is required to install pnpm following the instruction here.
Once done, install globally the touch-cli package by running pnpm add -g touch-cli in order to successfully execute the prepare script.
- Join Commerce Layer's Discord community.
- Ping us on Bluesky, X (formerly Twitter), or LinkedIn.
- Is there a bug? Create an issue on this repository.
This repository is published under the MIT license.