OAuth 2.0 Flow Explained

// Example OAuth 2.0 Authorization Code Flow in Express.js

// Step 1: Redirect to authorization endpoint
app.get('/auth/login', (req, res) => {
  // Create and store a random state value for CSRF protection
  const state = crypto.randomBytes(16).toString('hex');
  req.session.oauthState = state;
  
  // Construct the authorization URL
  const authorizationUrl = new URL('https://authorization-server.com/oauth/authorize');
  authorizationUrl.searchParams.append('response_type', 'code');
  authorizationUrl.searchParams.append('client_id', process.env.OAUTH_CLIENT_ID);
  authorizationUrl.searchParams.append('redirect_uri', process.env.OAUTH_REDIRECT_URI);
  authorizationUrl.searchParams.append('scope', 'profile email');
  authorizationUrl.searchParams.append('state', state);
  
  // Redirect the user
  res.redirect(authorizationUrl.toString());
});

// Step 3: Handle the callback with authorization code
app.get('/auth/callback', async (req, res) => {
  // Extract the code and state from the query parameters
  const { code, state } = req.query;
  
  // Verify the state matches (CSRF protection)
  if (!state || state !== req.session.oauthState) {
    return res.status(403).send('Invalid state parameter');
  }
  
  // Clear the stored state
  delete req.session.oauthState;
  
  try {
    // Step 4: Exchange code for tokens
    const tokenResponse = await axios.post('https://authorization-server.com/oauth/token', {
      grant_type: 'authorization_code',
      code,
      redirect_uri: process.env.OAUTH_REDIRECT_URI,
      client_id: process.env.OAUTH_CLIENT_ID,
      client_secret: process.env.OAUTH_CLIENT_SECRET
    });
    
    // Extract tokens from the response
    const { access_token, refresh_token, expires_in } = tokenResponse.data;
    
    // Store tokens securely (e.g., in session or database)
    req.session.accessToken = access_token;
    // Store refresh token in a more persistent storage
    await saveRefreshToken(req.user.id, refresh_token);
    
    // Step 5: Use the access token to get user information
    const userInfoResponse = await axios.get('https://api.example.com/userinfo', {
      headers: {
        'Authorization': `Bearer ${access_token}`
      }
    });
    
    // Process user information
    const userInfo = userInfoResponse.data;
    
    // Create or update user in your database
    const user = await findOrCreateUser(userInfo);
    
    // Log the user in
    req.session.userId = user.id;
    
    // Redirect to the application
    res.redirect('/dashboard');
  } catch (error) {
    console.error('OAuth Error:', error);
    res.status(500).send('Authentication failed');
  }
});

// Example of PKCE implementation in JavaScript

// 1. Generate a random code verifier
function generateCodeVerifier() {
  const array = new Uint8Array(32); // 32 bytes = 256 bits
  window.crypto.getRandomValues(array);
  return base64UrlEncode(array);
}

// Base64Url encoding function
function base64UrlEncode(buffer) {
  return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

// 2. Create a code challenge from the verifier
async function generateCodeChallenge(codeVerifier) {
  // Hash the verifier with SHA-256
  const encoder = new TextEncoder();
  const data = encoder.encode(codeVerifier);
  const digest = await window.crypto.subtle.digest('SHA-256', data);
  
  // Base64Url encode the hash
  return base64UrlEncode(digest);
}

// 3. Start the OAuth flow with PKCE
async function startOAuthFlow() {
  // Generate and store the code verifier
  const codeVerifier = generateCodeVerifier();
  localStorage.setItem('pkce_code_verifier', codeVerifier);
  
  // Generate the code challenge
  const codeChallenge = await generateCodeChallenge(codeVerifier);
  
  // Generate random state
  const state = generateRandomString(16);
  localStorage.setItem('pkce_state', state);
  
  // Construct the authorization URL
  const authUrl = new URL('https://authorization-server.com/oauth/authorize');
  authUrl.searchParams.append('response_type', 'code');
  authUrl.searchParams.append('client_id', 'YOUR_CLIENT_ID');
  authUrl.searchParams.append('redirect_uri', 'https://your-app.com/callback');
  authUrl.searchParams.append('scope', 'profile email');
  authUrl.searchParams.append('state', state);
  authUrl.searchParams.append('code_challenge', codeChallenge);
  authUrl.searchParams.append('code_challenge_method', 'S256');
  
  // Redirect to the authorization server
  window.location = authUrl.toString();
}

// 4. Handle the callback and exchange code for tokens
async function handleCallback() {
  // Parse the query parameters
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  const state = urlParams.get('state');
  const storedState = localStorage.getItem('pkce_state');
  
  // Verify state parameter
  if (!state || state !== storedState) {
    throw new Error('Invalid state parameter');
  }
  
  // Get the stored code verifier
  const codeVerifier = localStorage.getItem('pkce_code_verifier');
  
  // Exchange the code for tokens
  const tokenResponse = await fetch('https://authorization-server.com/oauth/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code: code,
      redirect_uri: 'https://your-app.com/callback',
      client_id: 'YOUR_CLIENT_ID',
      code_verifier: codeVerifier
    })
  });
  
  // Process the token response
  const tokens = await tokenResponse.json();
  
  // Store the tokens (securely!)
  // ...
  
  // Clean up
  localStorage.removeItem('pkce_code_verifier');
  localStorage.removeItem('pkce_state');
  
  // Continue with the application flow
  // ...
}

// Example Node.js Client Credentials flow using Axios

const axios = require('axios');
const qs = require('querystring');

async function getServiceToken() {
  try {
    // Step 1: Request an access token
    const tokenResponse = await axios.post(
      'https://authorization-server.com/oauth/token',
      qs.stringify({
        grant_type: 'client_credentials',
        client_id: process.env.CLIENT_ID,
        client_secret: process.env.CLIENT_SECRET,
        scope: 'read:data write:data'
      }),
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    );
    
    // Extract the access token
    const { access_token, expires_in } = tokenResponse.data;
    
    // Step 2: Use the token to access resources
    const apiResponse = await axios.get(
      'https://api.example.com/data',
      {
        headers: {
          'Authorization': `Bearer ${access_token}`
        }
      }
    );
    
    return apiResponse.data;
  } catch (error) {
    console.error('Error in Client Credentials flow:', error.message);
    throw error;
  }
}

// Usage in a microservice
async function synchronizeData() {
  try {
    const data = await getServiceToken();
    // Process the data...
    console.log(`Synchronized ${data.length} records`);
  } catch (error) {
    console.error('Synchronization failed:', error);
  }
}

// Schedule the job
setInterval(synchronizeData, 3600000); // Run every hour

// Example refresh token implementation in Express.js

const axios = require('axios');
const { promisify } = require('util');

// Function to refresh an expired token
async function refreshAccessToken(refreshToken) {
  try {
    const response = await axios.post('https://authorization-server.com/oauth/token', {
      grant_type: 'refresh_token',
      refresh_token: refreshToken,
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET
    });
    
    return {
      accessToken: response.data.access_token,
      refreshToken: response.data.refresh_token || refreshToken, // Some providers return a new refresh token
      expiresIn: response.data.expires_in
    };
  } catch (error) {
    console.error('Error refreshing token:', error.message);
    throw new Error('Failed to refresh access token');
  }
}

// Middleware to handle API requests with token refresh
async function apiRequest(req, res, next) {
  try {
    // Get user's tokens from the database or session
    const { accessToken, refreshToken, expiresAt } = await getUserTokens(req.user.id);
    
    // Check if the access token is expired
    const isExpired = Date.now() >= new Date(expiresAt).getTime();
    
    // If token is expired, refresh it
    let currentAccessToken = accessToken;
    if (isExpired) {
      try {
        const tokens = await refreshAccessToken(refreshToken);
        
        // Update tokens in the database
        await updateUserTokens(req.user.id, {
          accessToken: tokens.accessToken,
          refreshToken: tokens.refreshToken,
          expiresAt: new Date(Date.now() + tokens.expiresIn * 1000)
        });
        
        currentAccessToken = tokens.accessToken;
      } catch (refreshError) {
        // If refresh fails, user needs to re-authenticate
        return res.redirect('/auth/login');
      }
    }
    
    // Make the API request with the valid token
    try {
      const apiResponse = await axios.get(req.apiEndpoint, {
        headers: {
          Authorization: `Bearer ${currentAccessToken}`
        }
      });
      
      // Return the API response
      return res.json(apiResponse.data);
    } catch (apiError) {
      // If API returns 401 even after refresh, token might be revoked
      if (apiError.response && apiError.response.status === 401) {
        return res.redirect('/auth/login');
      }
      
      // Other API errors
      return res.status(apiError.response?.status || 500).json({
        error: 'API request failed',
        details: apiError.message
      });
    }
  } catch (error) {
    next(error);
  }
}

// Example usage
app.get('/api/user-profile', async (req, res, next) => {
  req.apiEndpoint = 'https://api.example.com/user/profile';
  return apiRequest(req, res, next);
});

// Example social login implementation with Google OAuth

// 1. Install required packages
// npm install express express-session passport passport-google-oauth20

const express = require('express');
const session = require('express-session');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

const app = express();

// 2. Configure session middleware
app.use(session({
  secret: process.env.SESSION_SECRET,
  resave: false,
  saveUninitialized: false,
  cookie: {
    secure: process.env.NODE_ENV === 'production',
    httpOnly: true,
    maxAge: 24 * 60 * 60 * 1000 // 24 hours
  }
}));

// 3. Initialize Passport
app.use(passport.initialize());
app.use(passport.session());

// 4. Configure Google OAuth Strategy
passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: 'http://localhost:3000/auth/google/callback',
    scope: ['profile', 'email']
  },
  function(accessToken, refreshToken, profile, done) {
    // Find or create user in your database
    findOrCreateUser({ 
      googleId: profile.id,
      email: profile.emails[0].value,
      name: profile.displayName,
      picture: profile.photos[0].value
    })
      .then(user => done(null, user))
      .catch(err => done(err));
  }
));

// 5. Serialize/deserialize user for sessions
passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  findUserById(id)
    .then(user => done(null, user))
    .catch(err => done(err));
});

// 6. Set up routes for authentication
// Start OAuth flow - redirect to Google
app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

// OAuth callback route
app.get('/auth/google/callback', 
  passport.authenticate('google', { 
    failureRedirect: '/login',
    successRedirect: '/dashboard'
  })
);

// Logout route
app.get('/logout', (req, res) => {
  req.logout();
  res.redirect('/');
});

// 7. Protected route example
app.get('/dashboard', ensureAuthenticated, (req, res) => {
  res.render('dashboard', { user: req.user });
});

// Middleware to check if user is authenticated
function ensureAuthenticated(req, res, next) {
  if (req.isAuthenticated()) {
    return next();
  }
  res.redirect('/login');
}

// 8. Database helper functions (implementation depends on your database)
async function findOrCreateUser(profile) {
  // Implementation depends on your database
  // Example with Mongoose:
  let user = await User.findOne({ googleId: profile.googleId });
  
  if (!user) {
    user = await User.create({
      googleId: profile.googleId,
      email: profile.email,
      name: profile.name,
      picture: profile.picture
    });
  }
  
  return user;
}

async function findUserById(id) {
  // Example with Mongoose:
  return await User.findById(id);
}

// Start the server
app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

// Adding multiple OAuth providers

// 1. Install additional strategies
// npm install passport-facebook passport-github2 passport-twitter

const FacebookStrategy = require('passport-facebook').Strategy;
const GitHubStrategy = require('passport-github2').Strategy;
const TwitterStrategy = require('passport-twitter').Strategy;

// 2. Configure Facebook Strategy
passport.use(new FacebookStrategy({
    clientID: process.env.FACEBOOK_APP_ID,
    clientSecret: process.env.FACEBOOK_APP_SECRET,
    callbackURL: 'http://localhost:3000/auth/facebook/callback',
    profileFields: ['id', 'emails', 'name', 'picture.type(large)']
  },
  function(accessToken, refreshToken, profile, done) {
    findOrCreateUser({
      facebookId: profile.id,
      email: profile.emails?.[0]?.value,
      name: `${profile.name.givenName} ${profile.name.familyName}`,
      picture: profile.photos?.[0]?.value
    })
      .then(user => done(null, user))
      .catch(err => done(err));
  }
));

// 3. Configure GitHub Strategy
passport.use(new GitHubStrategy({
    clientID: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
    callbackURL: 'http://localhost:3000/auth/github/callback'
  },
  function(accessToken, refreshToken, profile, done) {
    findOrCreateUser({
      githubId: profile.id,
      email: profile.emails?.[0]?.value,
      name: profile.displayName || profile.username,
      picture: profile.photos?.[0]?.value
    })
      .then(user => done(null, user))
      .catch(err => done(err));
  }
));

// 4. Add routes for each provider
app.get('/auth/facebook',
  passport.authenticate('facebook', { scope: ['email'] })
);

app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { 
    failureRedirect: '/login',
    successRedirect: '/dashboard'
  })
);

app.get('/auth/github',
  passport.authenticate('github', { scope: ['user:email'] })
);

app.get('/auth/github/callback',
  passport.authenticate('github', { 
    failureRedirect: '/login',
    successRedirect: '/dashboard'
  })
);

// 5. Update your database schema to handle multiple provider IDs
// Example Mongoose schema:
const userSchema = new mongoose.Schema({
  email: { type: String, unique: true },
  name: String,
  picture: String,
  googleId: String,
  facebookId: String,
  githubId: String,
  // Add more provider IDs as needed
});

// 6. Update findOrCreateUser to handle multiple providers
async function findOrCreateUser(profile) {
  // First try to find by provider ID
  let user = null;
  
  if (profile.googleId) {
    user = await User.findOne({ googleId: profile.googleId });
  } else if (profile.facebookId) {
    user = await User.findOne({ facebookId: profile.facebookId });
  } else if (profile.githubId) {
    user = await User.findOne({ githubId: profile.githubId });
  }
  
  // If not found by provider ID but email exists, try to find by email
  if (!user && profile.email) {
    user = await User.findOne({ email: profile.email });
    
    // If user exists with this email, link the new provider ID
    if (user) {
      if (profile.googleId) user.googleId = profile.googleId;
      if (profile.facebookId) user.facebookId = profile.facebookId;
      if (profile.githubId) user.githubId = profile.githubId;
      
      await user.save();
    }
  }
  
  // If user still not found, create a new one
  if (!user) {
    user = await User.create(profile);
  }
  
  return user;
}

// Example OAuth implementation in a React application

// 1. Install required packages
// npm install react-router-dom axios

import React, { useState, useEffect, createContext, useContext } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import axios from 'axios';

// Create an auth context
const AuthContext = createContext(null);

// Helper functions for PKCE
function generateCodeVerifier() {
  const array = new Uint8Array(32);
  window.crypto.getRandomValues(array);
  return base64UrlEncode(array);
}

function base64UrlEncode(buffer) {
  return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

async function generateCodeChallenge(codeVerifier) {
  const encoder = new TextEncoder();
  const data = encoder.encode(codeVerifier);
  const digest = await window.crypto.subtle.digest('SHA-256', data);
  return base64UrlEncode(digest);
}

// Auth Provider component
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  const navigate = useNavigate();
  const location = useLocation();
  
  // Check if we're returning from an OAuth redirect
  useEffect(() => {
    async function handleRedirect() {
      // Check if this is a redirect from OAuth provider
      if (location.pathname === '/callback') {
        const urlParams = new URLSearchParams(window.location.search);
        const code = urlParams.get('code');
        const state = urlParams.get('state');
        
        // Validate state
        const storedState = localStorage.getItem('oauth_state');
        if (!state || state !== storedState) {
          setError('Invalid state parameter');
          setLoading(false);
          return;
        }
        
        // Get code verifier
        const codeVerifier = localStorage.getItem('code_verifier');
        if (!codeVerifier) {
          setError('No code verifier found');
          setLoading(false);
          return;
        }
        
        try {
          // Exchange code for tokens
          const response = await axios.post('https://authorization-server.com/oauth/token', {
            grant_type: 'authorization_code',
            code,
            redirect_uri: window.location.origin + '/callback',
            client_id: 'YOUR_CLIENT_ID',
            code_verifier: codeVerifier
          });
          
          // Store tokens securely (localStorage is not ideal but common)
          localStorage.setItem('access_token', response.data.access_token);
          localStorage.setItem('refresh_token', response.data.refresh_token);
          localStorage.setItem('token_expiry', Date.now() + response.data.expires_in * 1000);
          
          // Clean up PKCE and state parameters
          localStorage.removeItem('oauth_state');
          localStorage.removeItem('code_verifier');
          
          // Fetch user info
          await fetchUserInfo();
          
          // Redirect to the page they were trying to access
          const intendedPath = localStorage.getItem('auth_redirect') || '/dashboard';
          localStorage.removeItem('auth_redirect');
          navigate(intendedPath);
        } catch (err) {
          console.error('Authentication error:', err);
          setError('Failed to authenticate');
          setLoading(false);
        }
      } else {
        // Not a redirect, check if we're already logged in
        const token = localStorage.getItem('access_token');
        if (token) {
          try {
            await fetchUserInfo();
          } catch (err) {
            // Token might be invalid, try refresh token or clear
            try {
              await refreshTokens();
              await fetchUserInfo();
            } catch (refreshErr) {
              logout();
            }
          }
        }
        setLoading(false);
      }
    }
    
    handleRedirect();
  }, [location.pathname]);
  
  // Fetch user info
  async function fetchUserInfo() {
    try {
      const token = localStorage.getItem('access_token');
      const response = await axios.get('https://api.example.com/userinfo', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      
      setUser(response.data);
      setLoading(false);
      return response.data;
    } catch (err) {
      throw err;
    }
  }
  
  // Refresh tokens
  async function refreshTokens() {
    try {
      const refreshToken = localStorage.getItem('refresh_token');
      if (!refreshToken) throw new Error('No refresh token');
      
      const response = await axios.post('https://authorization-server.com/oauth/token', {
        grant_type: 'refresh_token',
        refresh_token: refreshToken,
        client_id: 'YOUR_CLIENT_ID'
      });
      
      localStorage.setItem('access_token', response.data.access_token);
      if (response.data.refresh_token) {
        localStorage.setItem('refresh_token', response.data.refresh_token);
      }
      localStorage.setItem('token_expiry', Date.now() + response.data.expires_in * 1000);
      return response.data;
    } catch (err) {
      logout();
      throw err;
    }
  }
  
  // Start login flow
  async function login() {
    try {
      // Generate and store PKCE values
      const codeVerifier = generateCodeVerifier();
      const codeChallenge = await generateCodeChallenge(codeVerifier);
      
      // Generate and store state
      const state = base64UrlEncode(window.crypto.getRandomValues(new Uint8Array(16)));
      
      // Store values in localStorage
      localStorage.setItem('code_verifier', codeVerifier);
      localStorage.setItem('oauth_state', state);
      
      // Store the current path for redirect after login
      localStorage.setItem('auth_redirect', location.pathname);
      
      // Redirect to authorization server
      const authUrl = new URL('https://authorization-server.com/oauth/authorize');
      authUrl.searchParams.append('response_type', 'code');
      authUrl.searchParams.append('client_id', 'YOUR_CLIENT_ID');
      authUrl.searchParams.append('redirect_uri', window.location.origin + '/callback');
      authUrl.searchParams.append('scope', 'profile email');
      authUrl.searchParams.append('state', state);
      authUrl.searchParams.append('code_challenge', codeChallenge);
      authUrl.searchParams.append('code_challenge_method', 'S256');
      
      window.location.href = authUrl.toString();
    } catch (err) {
      console.error('Login error:', err);
      setError('Failed to start login flow');
    }
  }
  
  // Logout
  function logout() {
    localStorage.removeItem('access_token');
    localStorage.removeItem('refresh_token');
    localStorage.removeItem('token_expiry');
    setUser(null);
    navigate('/');
  }
  
  // Create authenticated HTTP client
  function createAuthenticatedClient() {
    const client = axios.create();
    
    // Add interceptor to handle token expiration
    client.interceptors.request.use(async (config) => {
      let token = localStorage.getItem('access_token');
      const expiry = localStorage.getItem('token_expiry');
      
      // Check if token is expired or will expire soon
      if (expiry && Date.now() > parseInt(expiry) - 60000) {
        // Token expired or will expire soon, refresh it
        try {
          const tokens = await refreshTokens();
          token = tokens.access_token;
        } catch (err) {
          // Refresh failed, redirect to login
          logout();
          throw err;
        }
      }
      
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      
      return config;
    });
    
    return client;
  }
  
  // Create the auth value
  const value = {
    user,
    loading,
    error,
    login,
    logout,
    createAuthenticatedClient
  };
  
  return (
    
      {children}
    
  );
}

// Custom hook to use the auth context
export function useAuth() {
  return useContext(AuthContext);
}

// Example component usage
function LoginButton() {
  const { login } = useAuth();
  
  return (
    Login with OAuth
  );
}

function UserProfile() {
  const { user, loading, error, createAuthenticatedClient } = useAuth();
  const [profile, setProfile] = useState(null);
  
  useEffect(() => {
    async function fetchProfile() {
      if (!user) return;
      
      const client = createAuthenticatedClient();
      const response = await client.get('https://api.example.com/profile');
      setProfile(response.data);
    }
    
    fetchProfile();
  }, [user]);
  
  if (loading) return 
Loading...
;
  if (error) return 
Error: {error}
;
  if (!user) return 
Please log in
;
  
  return (
    

      
Profile: {user.name}
      {profile && (
        

          {/* Display profile data */}
        
      )}
    
  );
}