OAuth 2.0 PKCE Tutorial

Single-page client demonstrating Authorization Code flow with PKCE against Amazon Cognito.

📖 What is this flow? (Auth Code + PKCE)

PKCE (Proof Key for Code Exchange) replaces the old Implicit Flow for Single Page Apps (SPAs). It prevents interception attacks by dynamically generating a cryptographic key pair (code_verifier and code_challenge) for every login. No static "client secret" is needed in the browser.

🛠 What library are we using?

We use oidc-client-ts. It's the industry standard for OIDC in browsers. It automatically handles PKCE generation, state validation, nonce checking, and token refreshing (via silent iframes), so you don't have to hand-roll cryptography. Of course you are free to use any library or implement this OAuth flow as you see fit.

🌐 What is the Discovery Endpoint?

The .well-known/openid-configuration URL provides metadata about the Identity Provider (Cognito). oidc-client-ts fetches this once to automatically discover where the /authorize, /token, and /logout endpoints are, and what cryptographic keys to use to validate token signatures.

📱 How do Mobile Apps do this?

Mobile Apps (iOS/Android) also use Auth Code + PKCE! Instead of a standard WebView (which is insecure and allows apps to snoop passwords), they use System Browsers (ASWebAuthenticationSession on iOS, Custom Tabs on Android). This shares cookies with the device browser (allowing SSO) and keeps credentials safe.

1. Login

To initiate this flow, we instantiate oidc-client-ts. The only required fields are the authority (IDP Discovery Endpoint), client_id, and the redirect_uri:

const config = {
    authority: "https://cognito-idp.eu-west-2.amazonaws.com/eu-west-2_7FWN3efD8",
    client_id: "11iqc4toa4ia9fh640b5e4lg41",
    redirect_uri: window.location.origin + "/",
    response_type: "code"
};
const userManager = new UserManager(config);

Clicking login will call userManager.signinRedirect(). Watch our slowed down process updates below to see the PKCE steps in real-time.