Understanding PKCE in OAuth-2.0?

Proof Key for Code Exchange (PKCE) is an extension to the OAuth 2.0 Authorization Code flow that enhances security, especially for public clients (e.g., mobile apps, single-page applications) that cannot securely store client secrets. PKCE helps mitigate authorization code interception attacks.

PKCE Use Case in OIDC

Scenario: You have a Node.js application that uses Keycloak as the Identity Provider (IdP) to authenticate users via OpenID Connect (OIDC) with PKCE.

Steps to Implement PKCE with Keycloak and Node.js

1. Set Up Keycloak

1. Create a Realm:

   • Log in to the Keycloak admin console.

   • Create a new realm or use an existing one.

2. Create a Client:

   • Navigate to the Clients section.

   • Create a new client with the following settings:

     • Client ID: your-client-id

     • Client Protocol: openid-connect

     • Access Type: public

     • Standard Flow Enabled: ON

     • Direct Access Grants Enabled: OFF

     • PKCE Code Challenge Method: S256

3. Configure Redirect URIs:

   • Set the valid redirect URIs for your application (e.g., http://localhost:3000/callback).

2. Node.js Application Setup

1. Install Dependencies:

   • Install necessary packages:

     npm install express axios crypto

2. Create the Node.js Application:

   • Set up an Express server with routes for handling the OAuth flow.

Example Code:

JavaScript

const express = require('express');
const axios = require('axios');
const crypto = require('crypto');
const app = express();

const clientId = 'your-client-id';
const redirectUri = 'http://localhost:3000/callback';
const keycloakUrl = 'https://your-keycloak-server/auth/realms/your-realm/protocol/openid-connect';

let codeVerifier = '';

app.get('/login', (req, res) => {
  codeVerifier = crypto.randomBytes(32).toString('hex');
  const codeChallenge = crypto.createHash('sha256').update(codeVerifier).digest('base64url');

  const authUrl = `${keycloakUrl}/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=openid&code_challenge=${codeChallenge}&code_challenge_method=S256`;
  res.redirect(authUrl);
});

app.get('/callback', async (req, res) => {
  const code = req.query.code;

  try {
    const tokenResponse = await axios.post(`${keycloakUrl}/token`, new URLSearchParams({
      grant_type: 'authorization_code',
      client_id: clientId,
      code: code,
      redirect_uri: redirectUri,
      code_verifier: codeVerifier
    }));

    const idToken = tokenResponse.data.id_token;
    res.send(`ID Token: ${idToken}`);
  } catch (error) {
    res.status(500).send('Error exchanging code for tokens');
  }
});

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

How PKCE Works in This Example:

1. Code Verifier and Code Challenge:

   • The client generates a code_verifier (a random string) and derives a code_challenge (a hashed version of the verifier).

2. Authorization Request:

   • The client includes the code_challenge in the authorization request to Keycloak.

3. Authorization Response:

   • Keycloak redirects back to the client with an authorization code.

4. Token Request:

   • The client exchanges the authorization code for tokens, including the code_verifier in the request.

5. Token Response:

   • Keycloak verifies the code_verifier against the code_challenge and issues tokens if they match.

This setup ensures that even if the authorization code is intercepted, it cannot be exchanged for tokens without the original code_verifier, enhancing security