Microsoft Entra ID: Microsoft Entrepise Account, Xbox, Skype, ...

Formerly Azure Active Directory, enable "Sign In with Microsoft Entreprise Account, Xbox, Skype, Office 360,..."

Making Entra ID issue a JWT Access Token

This step aims at configuring Entra ID so that it issues a JWT Access Token.

By default Entra ID issues opaque Access Tokens that can only be validated by your backend calling the Microsoft Graph API.

If you want to be able read and validate the access token on the backen in a non vendor locked in way as shown in the Web API section of this website, you have to configure a custom scope.

• Navigate to https://portal.azure.com/

• In the left pannel select "Microsoft Entra ID"

• In the left bar "Manage > App Registrations"

• Click on "New Registration"

• Name "My App - API", Click Register.

• Supported Account Type: It's up to you.

• In the left menu navigate to "Manage > Expose API"

• Click "Add a scope"

• Application ID URI: "api://my-app-api", Save and continue

• Configure the scope as follow then click "Add Scope"

  • Scope name: "access_as_user"

  • Who can consent: Admins and Users

  • Admin Consent Display Name: "JWT Access Token"

  • Admin consent description: "Ensure issuance of a JWT Access Token"

  • User Consent Display Name: "View your basic profile"

  • User consent description: "Allows the app to see your basic profile (e.g., name, picture, user name, email address)"

  • State: Enabled

Registering your Application

• Navigate to https://portal.azure.com/

• In the left pannel select "Microsoft Entra ID"

• In the left bar "Manage > App Registrations"

• Click on "New Registration" again

• Display Name "My App" (Put the actuall name of your app)

• Supported Account Type: It's up to you to decide

• Click on Register

• Click on "Add a Redirect URI"

• Click on "Add Platform"

• Click on "Single-Page application"

• Redirect URIs: https://my-app.com/ (Ensure the trailing slash is included. If your app is hosted under a subpath like /dasboard enter https://my-app.com/dashboard/)

• Front-channel logout URL: Leave empty

• Check both "Access Token" and "ID Token"

• Click Save

• Click on "Add URI" and enter http://localhost:5173/ (Ensure the trailing slash is included, 5173 is the default port that the Vite dev server uses, adapt to your setup)

• Cick Save

• In the Left Pannel, click on "API Permission"

• Click "Add a permission"

• Click "APIs My Organization uses"

• In the list click on "My App - API"

• Check "access_as_user"

• Click "Add permission

• In the left pannel click on "Overview" and copy the Application (client) ID and Directory (tenant) ID thoses are the two parameters you will need to configure oidc-spa.

Configuring oidc-spa

Vanilla

import { createOidc } from "oidc-spa";

// Directory (tenant) ID:
const directoryId = "XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
// Application (client) ID:
const clientId= "XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";

export const prOidc = createOidc({
    issuerUri: `https://login.microsoftonline.com/${directoryId}/v2.0`,
    clientId,
    scopes: ["profile", "api://my-app-api/access_as_user"],
    homeUrl: import.meta.env.BASE_URL
});

React

import { createReactOidc } from "oidc-spa/react";

// Directory (tenant) ID:
const directoryId = "71a0a621-363a-4182-8209-86364aa6de03";
// Application (client) ID:
const clientId= "18183b26-1e85-4e04-8d95-8395487634f4";

export const { OidcProvider, useOidc, getOidc } = createReactOidc({
    issuerUri: `https://login.microsoftonline.com/${directoryId}/v2.0`,
    clientId,
    scopes: ["profile", "api://oidc/jwt-access-token"],
    homeUrl: import.meta.env.BASE_URL
});

Testing

git clone https://github.com/keycloakify/oidc-spa
cd oidc-spa
git checkout v5.7.0
cd ..
mv oidc-spa/examples/tanstack-router-file-based oidc-spa-tanstack-router
rm -rf oidc-spa
cd oidc-spa-tanstack-router
cp .env.local.sample .env.local
# Here, uncomment the Microsoft Entra ID section and comment the Keycloak section
# in the .env.local file.
yarn
yarn dev