Skip to content

A simple SPA demo app to practice the React basic concepts like Azure AD B2C authentication with MSAL, custom hooks, effects, context, form editing with field array, custom & async debounced form validation and many others.

Notifications You must be signed in to change notification settings

rallets/react-ts-azure-ad-b2c

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 

Repository files navigation

Azure AD B2C + React + Typescript SPA demo app

Goals

A simple SPA demo app to practice the React basic concepts like Azure AD B2C authentication with MSAL, custom hooks, effects, context, form editing with field array, custom & async debounced form validation and many others.

Packages

This demo uses the following packages:

  • Microsoft Authentication Library for js (MSAL)
  • React
  • Typescript + linter
  • React router
  • React Hook Form
  • React Toastify
  • React Fontawesome svg icons
  • Plain Bootstrap
  • Type-safe Fetch requests with GET, POST, PUT, DELETE methods

Run the demo

Configure AD B2C & related config files

In the React SPA folder the files starting with .env are configuration files. The configurations found in .env can be overridden by the environment-specific file (.env.development, .env.test, .env.production) in which the app is started/deployed. By default npm start starts as development.

  • REACT_APP_API_BASE_URL => the WebApi url. Example: https://localhost:5001.
  • REACT_APP_AD_B2C_TENANT => your Azure AD B2C tenant. Example: yourtenant.onmicrosoft.com
  • REACT_APP_AD_B2C_SIGN_IN_POLICY => your Azure AD B2C sign-in policy. Example: B2C_1_react_sign_up_sign_in
  • REACT_APP_AD_B2C_APPLICATION_ID => your Azure AD B2C application ID. Example: xxxxxxxx-your-xADx-GUID-xxxxxxxxxxxx
  • REACT_APP_AD_B2C_REACT_REDIRECT_URI => your Azure AD B2C redirect uri. Example: http://localhost:3000

Run the WebApi

Navigate to the WebApi folder and run the app (in development mode):

dotnet run

Open https://localhost:5001/items to view it in the browser.

Run the React SPA

Navigate to the React SPA folder and run the app (in development mode):

npm install
npm start

The React SPA will start in a browser at the address http://localhost:3000.

About

A simple SPA demo app to practice the React basic concepts like Azure AD B2C authentication with MSAL, custom hooks, effects, context, form editing with field array, custom & async debounced form validation and many others.

Topics

Resources

Stars

Watchers

Forks