Step-by-Step Guide: Implementing Authentication with React and Validating Access Tokens Using Cached JWKS Keys in Node.js

npx create-react-app my-app
cd my-app

npm install @azure/msal-browser @azure/msal-react axios

// src/authConfig.js
export const msalConfig = {
    auth: {
        clientId: 'your-client-id',
        authority: 'https://login.microsoftonline.com/your-tenant-id',
        redirectUri: 'http://localhost:3000',
    },
    cache: {
        cacheLocation: 'sessionStorage', // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    }
};

export const loginRequest = {
    scopes: ["User.Read"]
};

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';
import App from './App';

const msalInstance = new PublicClientApplication(msalConfig);

ReactDOM.render(
    <MsalProvider instance={msalInstance}>
        <App />
    </MsalProvider>,
    document.getElementById('root')
);

// src/Login.js
import React from 'react';
import { useMsal } from '@azure/msal-react';
import { loginRequest } from './authConfig';

const Login = () => {
    const { instance } = useMsal();

    const handleLogin = () => {
        instance.loginRedirect(loginRequest).catch(e => {
            console.error(e);
        });
    };

    return (
        <div>
            <h1>Login</h1>
            <button onClick={handleLogin}>Sign in with Microsoft</button>
        </div>
    );
};

export default Login;

// src/Dashboard.js
import React, { useEffect, useState } from 'react';
import { useMsal } from '@azure/msal-react';
import axios from 'axios';

const Dashboard = () => {
    const { instance, accounts } = useMsal();
    const [userName, setUserName] = useState('');

    useEffect(() => {
        if (accounts.length > 0) {
            setUserName(accounts[0].username);
        }
    }, [accounts]);

    const getUserInfo = async () => {
        const request = {
            scopes: ["User.Read"],
            account: accounts[0]
        };

        try {
            const response = await instance.acquireTokenSilent(request);
            const accessToken = response.accessToken;

            const result = await axios.get('https://graph.microsoft.com/v1.0/me', {
                headers: {
                    Authorization: `Bearer ${accessToken}`
                }
            });
            console.log(result.data);
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <div>
            <h1>Welcome, {userName}</h1>
            <button onClick={getUserInfo}>Get User Info</button>
        </div>
    );
};

export default Dashboard;

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { MsalAuthenticationTemplate, useIsAuthenticated } from '@azure/msal-react';
import Login from './Login';
import Dashboard from './Dashboard';

const App = () => {
    const isAuthenticated = useIsAuthenticated();

    return (
        <Router>
            <Switch>
                <Route path="/dashboard">
                    {isAuthenticated ? (
                        <MsalAuthenticationTemplate>
                            <Dashboard />
                        </MsalAuthenticationTemplate>
                    ) : (
                        <Login />
                    )}
                </Route>
                <Route path="/">
                    <Login />
                </Route>
            </Switch>
        </Router>
    );
};

export default App;

npm install axios jsonwebtoken

// jwksCache.js
const axios = require('axios');
const fs = require('fs');

const tenantId = 'your-tenant-id';
const jwksUri = `https://login.microsoftonline.com/${tenantId}/discovery/v2.0/keys`;

async function fetchAndCacheJWKS() {
    const response = await axios.get(jwksUri);
    const keys = response.data.keys;

    // Optionally, you can write these keys to a file
    fs.writeFileSync('jwks.json', JSON.stringify(keys));

    return keys;
}

function loadJWKSFromCache() {
    if (fs.existsSync('jwks.json')) {
        const keys = JSON.parse(fs.readFileSync('jwks.json'));
        return keys;
    } else {
        throw new Error('JWKS keys not found in cache');
    }
}

module.exports = { fetchAndCacheJWKS, loadJWKSFromCache };

// validateToken.js
const jwt = require('jsonwebtoken');
const { loadJWKSFromCache } = require('./jwksCache');

function getKey(header, keys) {
    const signingKey = keys.find(key => key.kid === header.kid);
    if (signingKey) {
        return signingKey.x5c[0]; // Return the X.509 certificate chain (x5c)
    } else {
        throw new Error('Signing key not found');
    }
}

async function validateAccessToken(token) {
    try {
        // Load JWKS keys from cache
        const keys = loadJWKSFromCache();

        const decodedToken = jwt.decode(token, { complete: true });
        if (!decodedToken) {
            throw new Error('Invalid token');
        }

        const signingKey = getKey(decodedToken.header, keys);

        jwt.verify(token, signingKey, {
            algorithms: ['RS256'],
            audience: 'your-client-id',
            issuer: `https://login.microsoftonline.com/${tenantId}/v2.0`,
        }, (err, decoded) => {
            if (err) {
                throw err;
            }
            console.log('Token is valid', decoded);
        });
    } catch (error) {
        console.error('Token validation failed', error);
    }
}

// Example usage:
const accessToken = 'your-access-token';
validateAccessToken(accessToken);