Introduction

Auth0 supports various authentication and authorization flows such as Authorization Code Flow, Authorization Code Flow with PKCE (Proof Key for Code Exchange) and Implicit Flow defined in OAuth2.0 (RFC6749). By using Auth0 and the SDK provided by Auth0, you can easily implement each flow.

This page uses Authentication Code Flow with PKCE (RFC7637) as an example to confirm the sequence when using Auth0. For confirmation, we will introduce the necessary Auth0 settings and the specific procedures for obtaining an access token/ID token.

premise

The information on functions and settings described on this page is current as of February 2023.

Authorization Code Flow with PKCE at Auth0

The sequence of Authorization Code Flow with PKCE in Auth0 is as follows.

Authorization Code Flow with Proof Key for Code Exchange (PKCE) - Auth0 docs

• User: clicks the login link on the app
• App: Generate Code Verifier, Code Challenge
• App: Redirect user to Auth0/ authorize (authorization endpoint) with Code Challenge and Code Challenge Method
• Auth0: Store Code Challenge Method and Code Challenge, redirect to login screen and access permission screen
• User: perform authentication and access permission consent operation
• Auth0: Redirect to application with authorization code
• App: Send Authorization Code, Code Verifier along with App Client ID to Auth0/ oauth/token (token acquisition endpoint)
• Auth0: verify authorization code, Code Verifier value
• Auth0: Respond with ID token and access token
• App: Request information from the API endpoint of the resource server using the access token
• API: Validate access token, respond with requested information

preset

• Application settings

• On the Auth0 admin screen, click Applications > Applications
• Create a new Application

• Select Single Page Application

• Register resource server URLs as Allowed Callback URLs

• After creation, check the issued Client ID and Client Secret values

• API settings

• On the Auth0 admin screen, click Applications > APIs
• New API

• Register the Identifier of the API setting in the preset as Identifier

Confirmation procedure overview

Confirmation procedure

var crypto = require('crypto');
// Dependency: Node.js crypto module
// https://nodejs.org/api/crypto.html#crypto_crypto
function base64URLEncode(str) {
    return str.toString('base64')
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
}
var verifier = base64URLEncode(crypto.randomBytes(32));
// Dependency: Node.js crypto module
// https://nodejs.org/api/crypto.html#crypto_crypto
function sha256(buffer) {
    return crypto.createHash('sha256').update(buffer).digest();
}
var challenge = base64URLEncode(sha256(verifier));
console.log("verifier: " + verifier);
console.log("challenge: " + challenge);

verifier: r9d54G_5TQFzDkI-h5tHFS5ci2ki63sFdhvu_ILTUNw
challenge: b9hB46GRToF8M5MAHnA_nGyH_Ne7AKnAHjY5eGCQ17M

3. Authentication screen display by Auth0: Perform user authentication

4. Transition to the redirect destination specified in 2.: Check the authorization code from the URL

https://example.com/?code=4-VJWO9uJh5reWnHPw646_RuHu0Hqd0avkyj1pgImJiK&state=xyzABC123

{
	"access_token":"eyJhbGciOiJSUzI1NiIsInR5cCI6Ikp...(略)...80GXl-E8qa4H8SKfic_A",
	"id_token":"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVC...(略)... wFZ_HsGhYTGlO7fuzfQ",
	"scope":"openid profile email",
	"expires_in":86400,
	"token_type":"Bearer“
}

{
	"iss": "https://<your_auth0_tenant_name>.<region_domain>.auth0.com/",
	"sub": "auth0|63db3a3ab13ff608bc2d746c",
	"aud": [
	"https://example.com",
	"https://<your_auth0_tenant_name>.<region_domain>.auth0.com/userinfo"
	],
	"iat": 1675410197,
	"exp": 1675496597,
	"azp": "SNB1xluQSvav8Q8ttMkHFJTRsk9R9EJo",
	"scope": "openid profile email"
}

{
	"nickname": "xxxxxxxx",
	"name": "xxxxxxx@xxxxxxxx.co.jp",
	"picture": "https://s.gravatar.com/avatar/24b5f30a0fe65625e5afb...(略)...%2Fim.png",
	"updated_at": "2023-02-03T07:42:37.888Z",
	"email": "xxxxxxx@xxxxxxxx.co.jp",
	"email_verified": true,
	"iss": "https://<your_auth0_tenant_name>.<region_domain>.auth0.com/",
	"aud": "SNB1xluQSvav8Q8ttMkHFJTRsk9R9EJo",
	"iat": 1675410197,
	"exp": 1675446197,
	"sub": "auth0|63db3a3ab13ff608bc2d746c",
	"sid": "VSgd5FTs1r1oa4Dt297fWQfn9SLqpwLj"
}

{
	"sub":"auth0|63db3a3ab13ff608bc2d746c",
	"nickname":"xxxxxxxx",
	"name":"xxxxxxx@xxxxxxxx.co.jp",
	"picture":" https://s.gravatar.com/avatar/24b5f30a0fe65625e5afb...(略)...%2Fim.png",
	"updated_at":"2023-02-03T07:42:37.888Z",
	"email":"xxxxxxx@xxxxxxxx.co.jp",
	"email_verified":true
}

in conclusion

We introduced the movement of Authorization Code Flow with PKCE in Auth0, from requesting an authorization code to issuing an access token/ID token. We hope this will help you understand how Authentication Code Flow with PKCE works and how Auth0 implements it.

reference

• Authentication and Authorization Flows - Auth0 docs
• Proof Key for Code Exchange by OAuth Public Clients RFC 7636
• Authorization Code Flow with Proof Key for Code Exchange (PKCE) - Auth0 docs
• Authentication API / Authorization Code Flow with PKCE - Auth0 docs
• Which OAuth 2.0 Flow Should I Use? - Auth0 docs