1

Step 1

Create a secret code verifier and code challenge

2

Step 2

Build the authorization URL and redirect the user to the authorization server

3

Step 3

After the user is redirected back to the client, verify the state

4

Step 4

Exchange the authorization code and code verifier for an access token

Start Over

Register a Client

Before you can begin the flow, you'll need to register a client and create a user. Registration will give you a client ID an secret your application will use during the OAuth flow.

Register a Client

1. Create a Code Verifier and Challenge

Before redirecting the user to the authorization server, the client first generates a secret code verifier and challenge.

The code verifier is a cryptographically random string using the characters A-Z, a-z, 0-9, and the punctuation characters -._~ (hyphen, period, underscore, and tilde), between 43 and 128 characters long.

Once the client has generated the code verifier, it uses that to create the code challenge. For devices that can perform a SHA256 hash, the code challenge is a BASE64-URL-encoded string of the SHA256 hash of the code verifier. Otherwise, the same verifier string is used as the challenge.

Generate Code Verifier

Generate Code Challenge

base64url(sha256(code_verifier))

The client needs to store the code_verifier for later use. We will store it in a cookie for this demo.

2. Build the Authorization URL

The client then needs to generate a random string to use for the state parameter, and needs to store it to be used in the next step.

/authorize?
  response_type=code
  &client_id=
  &redirect_uri=/authorization-code-with-pkce.html
  &scope=photo+offline_access
  &state=
  &code_challenge=
  &code_challenge_method=S256

For this demo, we've gone ahead and generated a random state parameter and saved it in a cookie along with the code_verifier previously generated.

The client includes the code_challenge parameter in this request, which the authorization server will store and compare later during the code exchange step.

Click "Authorize" below to be taken to the authorization server. You'll need to enter the username and password that was generated for you.

3. Verify the state parameter

The user was redirected back to the client with a few additional query parameters in the URL:

?state=0000&code=99999999

The state value isn't strictly necessary here since the PKCE parameters provide CSRF protection themselves. In practice, if you're sure the OAuth server supports PKCE, you can use the state parameter for application state instead of using it for CSRF protection.

Does the state stored by the client () match the state in the redirect ()?

4. Exchange the Authorization Code

Now you're ready to exchange the authorization code for an access token.

The client will build a POST request to the token endpoint with the following parameters:

POST /token

Remember the code_verifier? You'll need to send that along with the token request. The authorization server will check whether the verifier matches the challenge that was used in the authorization request. This ensures that a malicious party that intercepted the authorization code will not be able to use it.

Token Endpoint Response

Here's the response from the token endpoint!

← Back to Flows

OAuth 2.0 PKCE Flow

Register a Client