MSAL-React Demo

Summary

This is a demo project that shows how to use the Microsoft Authentication Library for React (MSAL-React).

Tech Stack

• Azure Web Apps - Cloud webapp hosting
• Azure B2C - Identity and access management with local and social identity providers.
• Docker Hub - Docker container registry.
• GitHub Actions - CI/CD pipeline.
• GitHub CLI - Programmatic access to GitHub.
• MSAL-React - Microsoft Authentication Library for React.
• NextJS - React framework for server-side rendering and static site generation.
• Nx - Extensible dev tools for monorepos.
• TailwindCSS - Utility-first CSS framework for rapid UI development.

Setup

GitHub

Setup the GitHub CLI:

# Homebrew
brew install gh

# Windows
choco install gh

Login to GitHub:

# GitHub CLI
gh auth login

Create a new repository using the template:

# GitHub CLI
gh repo create msal-react --template KotaHusky/msal-react --private

Setup the repository secrets and variables using the template files:

# GitHub CLI
gh secret set --env-file .env.template-gha-secrets
gh variable set --env-file .env.template-gha-variables

Azure Web App

Setup your Azure Web App ...

Azure Entra ID: Tenant

You will need a tenant in Microsoft Entra ID.

Quickstart: Create a new tenant in Microsoft Entra ID

Azure Entra ID: App Registration

You will need to create a new app registration in Microsoft Entra ID and configure/note the following:

• Redirect URIs
• Client ID
• Tenant ID

Quickstart: Register an application with the Microsoft identity platform

Azure Entra ID: Identity Providers

You will need to configure the identity providers in Microsoft Entra ID.

Identity Provider: Local Identity Provider: Apple Identity Provider: Microsoft

GitHub Actions

You will need to configure the following secrets:

AZURE_APPSERVICE_PUBLISHPROFILE - The publish profile for your Azure Web App. You can download this from Azure Web Apps > Deployment Center. DOCKERHUB_USERNAME - Your DockerHub username (lowercase). DOCKERHUB_TOKEN - Your DockerHub token. Do not use your password. DOCKERHUB_REPO - Your DockerHub repository.

Environment variables are set in the env section of the GitHub Actions workflow file, and should be set accordingly for your app.

Project Structure

This project is an integrated workspace powered by Nx. It adheres to Nx Library Types:

data-access - Handles data access and state management. feature - Integrates data access and UI components to provide functionality. util - Provides utility functions. ui - Defines stylized ui components and layouts.

This project contains the following:

• apps/msal-react-demo - A NextJS web client and server application.
• libs/data-access/data-access-account-context - Handles an account context "State"
• libs/data-access/data-access-auth - Acquires authentication tokens to access protected API resources
• libs/data-access/data-access-msal-config - Configures MSAL-React
• libs/feature/feature-msal-react - Provides login and logout components
• libs/util/util-verify-token - Verifies tokens to access protected API resources

Separating logic into a libraries allows for easier reuse across multiple applications.

Additional Resources

Nx

Integrate with editors

Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Start the application

Run npx nx dev msal-react-demo to start the development server. Happy coding!

Build for production

Run npx nx build msal-react-demo to build the application. The build artifacts are stored in the output directory (e.g. .next), ready to be deployed.

Running tasks

To execute tasks with Nx use the following syntax:

npx nx <target> <project> <...options>

You can also run multiple targets:

npx nx run-many -t <target1> <target2>

..or add -p to filter specific projects

npx nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Explore the project graph

Run npx nx graph to show the graph of the workspace. It will show tasks that you can run with Nx.

• Learn more about Exploring the Project Graph