Failed to verify code verifier

Problem statement

After configuring an application to use the Authorization Code with PKCE flow, a number of users are getting the following error message after they authenticate:

"Failed to verify code verifier" error.

Symptoms

  • After a user authenticates, the error "Failed to verify code verifier" is returned after the user is redirected back to the application.

Cause

  • Calling the /authorize endpoint more than once (for example: forcing login more than once)

Solution

Avoid making more than one login request.

  • When making a login request, it saves the code_verifier in a cookie and sends the code_challenge to the authorize endpoint.
  • When a login request is made multiple times, it will keep saving a new code_verifier which will override the previous one. It will also keep sending the browser to a new authorize URL.
    • If this happens multiple times, the authorize URL with its code_challenge parameter will match the code_verifier cookie previously saved.
  • Ensure the app only calls the login method once to log in. Making a login request method multiple times in quick succession will be prone to errors (like the Invalid code verifier errors).
    • Note that the code challenge and the code_verifiers are different.

The following example demonstrates this error:

// This is ok
function login() {
  loginWithRedirect();
}

// This will be error prone
function login() {
  loginWithRedirect();
  loginWithRedirect();
  loginWithRedirect();
}