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.

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

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

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.

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.