Todo App with Azure AD B2C Auth

Overview

This sample application demonstrates a simple application secured with the Microsoft identity platform (Azure AD B2C). It is a React single-page application calling an Node.j web api . Role Based Access Control will be handled via Custom Token Attributes.

Scenario

In the sample, the dashboard component only allows TaskAdmins to see tasks assigned to any users.

• The SPA Application uses MSAL React to authenticate a user with the Microsoft identity platform.
• The App then obtains an access token from Azure AD on behalf of the authenticated user for the Node.js web api.
• The API uses passport-azure-ad to protect its endpoint and accept only authorized calls.

Setup

Prerequisites

• An Azure AD B2C tenant.
• A Kuberentes cluster to deploy the application to.

Azure AD B2C Configuration

Identity Providers

• Federate wtih any Social Identity Provider (SIP) that you wish to support.
• Follow thee to configure fedreation with [Azure AD] (https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-generic-openid-connect) and GitHub

User Attributes

1. Navigate to the Azure portal and select the Azure AD B2C service.
2. Select the User Attributes blade on the left.
3. Select Add
4. Enter Name: TaskAdmin
5. Data Type: Boolean
6. Description: "This attribute is used to determine if the user is a TaskAdmin"

Azure AD B2C User Flows

Sign In and Sign Up

1. Navigate to the Azure portal and select the Azure AD B2C service.
2. Select the User Flows blade on the left.
3. Select New User Flow
4. Select Sign In and Sign Up
5. Select Recommended
6. Click Create*
7. Configure with the following:
   • Name: signup_signin_1
   • Identity Provider: Email Signup and any Social Identity Provider
   • MFA: SMS Only and Off
   • Conditional Access: Default
   • Collect Attributes: Email Address, Display Name
   • Return Claims: Email Address, Display Name, TaskAdmin
8. Click Create

Reset Password

1. Navigate to the Azure portal and select the Azure AD B2C service.
2. Select the User Flows blade on the left.
3. Select New User Flow
4. Select Password Reset
5. Select Recommended
6. Click Create*
7. Configure with the following:
   • Name: password_reset_1
   • Local Accounts: Reset password using email address
   • MFA: SMS Only and Off
   • Conditional Access: Default
   • Collect Attributes: Display Name

Edit Profile

1. Navigate to the Azure portal and select the Azure AD B2C service.
2. Select the User Flows blade on the left.
3. Select New User Flow
4. Select Profile Editing
5. Select Recommended
6. Click Create*
7. Configure with the following:
   • Name: edit_profile_1
   • Identity Provider: Email Signup and any Social Identity Provider
   • MFA: SMS Only and Off
   • Conditional Access: Default
   • Collect Attributes: City, Country/Region, Display Name, Postal Code, State/Province, Street Address, Task Admin
8. Click Create

Application Registration - API APP

1. Navigate to the Azure portal and select the Azure AD B2C service.
2. Select the App Registrations blade on the left, then select New registration.
3. In the Register an application page that appears, enter your application's registration information:
   • In the Name section, enter the application name: todo-api.
   • Under Supported account types, select Accounts in any identity provider or organizational directory (for authenticating users with user flows).
4. Select Register to create the application.
5. Select Save to save your changes.
6. In the app's registration screen, select the Expose an API
   • Select Set next to the Application ID URI to generate a URI that is unique for this app.
   • Change the default Application ID URI to https://{tenantName}.onmicrosoft.com/todoapi
   • Click on Save.
7. Publish an Application Scope
   • Select Add a scope button open the Add a scope screen and Enter the values as indicated below:
   • For Scope name, use access_as_user.
   • Select Admins and users options for Who can consent?.
   • For Admin consent display name type Access todo-api.
   • For Admin consent description type Allows the app to access todo-api as the signed-in user.
   • For User consent display name type Access todo-api.
   • For User consent description type Allow the application to access todo-api on your behalf.
   • Keep State as Enabled.
   • Select the Add scope button on the bottom to save this scope.

Application Registration - SPA APP

1. Navigate to the Azure portal and select the Azure AD service.
2. Select the App Registrations blade on the left, then select New registration.
3. In the Register an application page that appears, enter your application's registration information:
   • In the Name section, enter the application name: todo-spa.
   • Under Supported account types, select Accounts in any identity provider or organizational directory (for authenticating users with user flows).
   • In the Redirect URI (optional) section, select Single-page application in the combo-box
   • Enter the following redirect URI: http://localhost:3000/.
4. Select Register to create the application.
5. Select Save to save your changes.
6. In the app's registration screen, select the API permissions blade.
   • Select the Add a permission button and then,
   • Ensure that the My APIs tab is selected.
   • In the list of APIs, select the API todo-api.
   • In the Delegated permissions section, select the todo-api in the list.
   • Select access_as_user permission the Add permissions button at the bottom.
   • Click Grant Admin Consent to grant the permission to the app.

Code Updates

API APP

1. Open the source\api\authConfig.json file.
2. Find the key TenantId and replace the existing value with your Azure AD B2C tenant name.
3. Find the key ClientId and replace the existing value with the application ID (clientId) of API app.

SPA APP

1. Open the source\spa\authConfig.json file.
2. Find the key TenantName and replace the existing value with your Azure AD B2C tenat name.
3. Find the key ClientID and replace the existing value with the application ID (clientId) of SPA app.

Run

API App

cd source/api
npm install
npm start

SPA App

cd source/spa
npm install
npm start

Deploy

TBD

Backlog

• Profile Edit Handler
• Update readme.md
• Custom Token Attributes for Dashboard RBAC
• Create Dockerfile for api
• Create Dockerfile for ui
• Create GitHub Actions pipeline to build/push docker containers
• Create GitHub Actions pipeline to create infrastructure
• Create Helm Charts for Kubernetes deployment
• Update Flux to deploy to Kubernetes cluster

References

• https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/