This repo implements a React Single Page Application to demonstrate end user sign-in, sign-out and Edit Profile functionalities offered by the AD B2C. It uses Microsoft Authentication Library for React (msal-react) to enable user authentication using Azure Active Directory B2C.

This project was bootstrapped with Create React App.

You can get an overview of Azure AD B2C here.

In the project directory, you can run yarn install to install the dependencies from package.json.

If you are using npm, you can run npm install

Note that the MSAL React library used in this app is a preview version.

Essentially, you ned to create an AD B2C tenant, create app registration, create user flows for sign-in, sign-up and edit profiles and configure the tenant appropriately. You can follow the instructions in my blog post.

Make sure that the implicit flow is turned off by deselecting both Access tokens and ID tokens in the authentication section of app registrations. The implicit flow is not a secure one and it was used in the blog post only for a quick demonsrtation and testing of the AD B2C tenant configuration.

For more details, you can go through Microsoft documentation

Create a file named .env in the root folder of the project. Add following entries in the file. Make sure all the strings are enclosed in double quotes and that the configuration items are prefixed with REACT_APP_

ADB2C_KNOWN_AUTHORITIES="{YOUR_TENANT_NAME}.b2clogin.com,"
REACT_APP_ADB2C_LOGIN_SCOPES="{ANY_SCOPE_YOU_WANT_TO_USE}"
REACT_APP_ADB2C_CLIENT_ID="{YOUR_ADB2C_APP_CLIENT_ID}"
REACT_APP_ADB2C_AUTHORITY="https://{YOUR_TENANT_NAME}.b2clogin.com/{YOUR_TENANT_NAME}.onmicrosoft.com/{YOUR_SIGN_IN_SIGN_UP_POLICY}"
REACT_APP_ADB2C_KNOWN_AUTHORITIES="{YOUR_TENANT_NAME}.b2clogin.com,"

REACT_APP_ADB2C_REDIRECT_URI="{YOUR_ADB2C_APP_REDIRECT_URI}"
REACT_APP_ADB2C_POST_LOGOUT_REDIRECT_URI="{YOUR_ADB2C_APP_POST_LOGOUT_REDIRECT_URI}"

ADB2C_SIGNUP_SIGNIN_POLICY="{YOUR_SIGN_IN_SIGN_UP_POLICY}"

If you are in doubt, here is a sample .env file.

REACT_APP_ADB2C_CLIENT_ID="abcdef12-e3f9-43h0-0ad9-7b0g5h8rsm28"
REACT_APP_ADB2C_AUTHORITY="https://mytenant.b2clogin.com/mytenant.onmicrosoft.com/B2C_1_susi"
REACT_APP_ADB2C_KNOWN_AUTHORITIES="mytenant.b2clogin.com,"
REACT_APP_ADB2C_LOGIN_SCOPES=","

REACT_APP_ADB2C_REDIRECT_URI="http://localhost:3006"
REACT_APP_ADB2C_POST_LOGOUT_REDIRECT_URI="http://localhost:3006"

REACT_APP_ADB2C_SIGNUP_SIGNIN_POLICY="B2C_1_susi"

In the project directory, run yarn start.

If you are using npm, you can run npm start.

This will run the app in the development mode. Open http://localhost:3000 to view it in the browser.

If everything is configured correctly, you should get the demo app running in your browser. When you click on the LOGIN button, you should see an option to sign-up as well. (Enable browser pop-ups as the code pops up a login window). You can try yourself signing up with an email address. AD B2C has in-built 2 factor authentication to verify your email address before letting you sign-up. Once logged in, you can view your profile in the main page of the app. Click on EDIT PROFILE button to edit your profile. Finally, you can sign out with the LOGOUT button.

This GitHub repo is in accompaniment of my blog post here. If you have any questions or if you try gettint the AD B2C up and running and face some issues, please let me know via comments on my blog post.