OAuth2 & OIDC — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— OAuth2 & OIDC
🔐PKCE Setup
🔀Authorise
🔄Exchange
🪪Verify ID
🎯 Next: Test →
Step 1 / 4
Speed
Generate PKCE Pair
code_verifier → SHA256 → code_challenge💡 Analogy
Like a safe combination: you show the safe's lock pattern (challenge) upfront, but only you know how to open it (verifier).
Generate 96 random bytes (verifier), then SHA256-hash them (challenge). Send the challenge with the auth request; send the verifier during token exchange.
Console Output
> crypto.randomBytes(96) → 96 bytes of randomness
> verifier: "dBjftJeZ4CVP-mB92K27...kDs" (128 chars, base64url)
> challenge: SHA256(verifier) → "E9Melhoa2OwvF...pRquEsg" (43 chars)
> Both stored in sessionStorage temporarily
●oauth2-oidc-msal.ts
Generate PKCE PairL22–32
1// OAuth2 + OIDC with PKCE — Microsoft Entra ID (MSAL)
2import { PublicClientApplication, Configuration } from '@azure/msal-browser';
3import * as crypto from 'crypto';
4 
5// ─── MSAL Configuration ──────────────────────────
6const msalConfig: Configuration = {
7  auth: {
8    clientId: process.env.NEXT_PUBLIC_CLIENT_ID!,
9    authority: 'https://login.microsoftonline.com/your-tenant-id',
10    redirectUri: 'https://app.myapp.com/auth/callback',
11  },
12  cache: {
13    cacheLocation: 'sessionStorage',  // NOT localStorage
14    storeAuthStateInCookie: false,
15  },
16};
17 
18const msalInstance = new PublicClientApplication(msalConfig);
19 
20// ─── PKCE: Generate Code Verifier & Challenge ────
21function generatePkce(): { verifier: string; challenge: string } {
22  const verifier = crypto
23    .randomBytes(96)
24    .toString('base64url');   // 128 bytes of randomness
25 
26  const challenge = crypto
27    .createHash('sha256')
28    .update(verifier)
29    .digest('base64url');    // SHA256 of verifier
30 
31  return { verifier, challenge };
32}
33 
34// ─── Authorization Code + PKCE Login ─────────────
35async function login() {
36  const { verifier, challenge } = generatePkce();
37  sessionStorage.setItem('pkce_verifier', verifier);  // saved for token exchange
38 
39  await msalInstance.loginRedirect({
40    scopes: ['openid', 'profile', 'email', 'api://myapp/read'],
41    codeChallenge: challenge,
42    codeChallengeMethod: 'S256',
43    nonce: crypto.randomUUID(),   // prevents ID token replay
44    state: crypto.randomUUID(),   // prevents CSRF
45  });
46}
47 
48// ─── Handle Redirect + Validate ID Token ─────────
49async function handleCallback() {
50  const result = await msalInstance.handleRedirectPromise();
51  if (!result) return;
52 
53  const idToken = result.idTokenClaims;
54 
55  // Validate OIDC ID Token claims
56  if (idToken.iss !== 'https://login.microsoftonline.com/your-tenant-id/v2.0') {
57    throw new Error('Invalid issuer');
58  }
59  if (idToken.aud !== process.env.NEXT_PUBLIC_CLIENT_ID) {
60    throw new Error('Invalid audience');
61  }
62  if (idToken.exp! < Date.now() / 1000) {
63    throw new Error('Token expired');
64  }
65 
66  console.log('User authenticated:', idToken.preferred_username);
67  return result.accessToken;   // Use for API calls
68}
69 
69 lines
Timeline — 4 Steps
Generate PKCE Pair
code_verifier → SHA256 → code_challenge💡 Analogy
Like a safe combination: you show the safe's lock pattern (challenge) upfront, but only you know how to open it (verifier).
Generate 96 random bytes (verifier), then SHA256-hash them (challenge). Send the challenge with the auth request; send the verifier during token exchange.
Console Output
> crypto.randomBytes(96) → 96 bytes of randomness
> verifier: "dBjftJeZ4CVP-mB92K27...kDs" (128 chars, base64url)
> challenge: SHA256(verifier) → "E9Melhoa2OwvF...pRquEsg" (43 chars)
> Both stored in sessionStorage temporarily

Was this page helpful?

Discussion

code_verifier → SHA256 → code_challenge

💡 Analogy

Like a safe combination: you show the safe's lock pattern (challenge) upfront, but only you know how to open it (verifier).

Generate 96 random bytes (verifier), then SHA256-hash them (challenge). Send the challenge with the auth request; send the verifier during token exchange.

Console Output

> crypto.randomBytes(96) → 96 bytes of randomness
> verifier: "dBjftJeZ4CVP-mB92K27...kDs" (128 chars, base64url)
> challenge: SHA256(verifier) → "E9Melhoa2OwvF...pRquEsg" (43 chars)
> Both stored in sessionStorage temporarily

code_verifier → SHA256 → code_challenge

💡 Analogy

Like a safe combination: you show the safe's lock pattern (challenge) upfront, but only you know how to open it (verifier).

Generate 96 random bytes (verifier), then SHA256-hash them (challenge). Send the challenge with the auth request; send the verifier during token exchange.

Console Output

> crypto.randomBytes(96) → 96 bytes of randomness
> verifier: "dBjftJeZ4CVP-mB92K27...kDs" (128 chars, base64url)
> challenge: SHA256(verifier) → "E9Melhoa2OwvF...pRquEsg" (43 chars)
> Both stored in sessionStorage temporarily