What is Code Сhallenge in query param in authorization server like IdentityServer (from JS SPA client pov)?

Question

When I do manual redirect, I'm getting an error from IdentityServer

invalid_request, code challenge required

However when I use oidc-client-js library for the same authorization request, I do not get that error. Library somehow sets code challenge under the hood.

Here is me JS code.

Set up:

const config = {
  authority: "https://demo.identityserver.io",
  client_id: "interactive.confidential",
  redirect_uri: "http://localhost:3000/callback",
  response_type: "code",
  scope:"openid profile email api offline_access",
  post_logout_redirect_uri : "http://localhost:3000/post_logout",
};

const url = `https://demo.identityserver.io/connect/authorize?
client_id=${config.client_id}&
redirect_uri=${config.redirect_uri}&
response_type=${config.response_type}&
scope=${config.scope}`;

My manual authorization redirect request that throws:

const onFormSubmit = async (ev: React.FormEvent) => {
    ev.preventDefault();
    window.location.replace(url); // I simply do replace
}

Code with the library that doesn't throw:

import Oidc from 'oidc-client';

const onFormSubmit = async (ev: React.FormEvent) => {
  ev.preventDefault();

  const mgr = new Oidc.UserManager(config);
  mgr.signinRedirect(); // login redirect here, no errors
}

I want to understand what code challengem is. And how it gets generated. Give me a hint what to read about it.

I ca go on with the library, but I'd prefer not to import third-party libs into my app where possible.

Answer 1

Authorize Endpoint handle multiple grant types, the way you are sending your request, matched to Authorization Code Grant which needs code_challenge parameter during the request.

Try something simpler to make a request like:

GET /connect/authorize?
client_id=client1&
scope=openid email api1&
response_type=id_token token&
redirect_uri=https://myapp/callback&
state=abc&
nonce=xyz

Read Authorize Endpoint for more information.

Answer 2

Heres an example of generating a challenge code:

private string CreateCodeChallenge()
{
    _codeVerifier = RandomNumberGenerator.CreateUniqueId();
    var sha256 = HashAlgorithmProvider.OpenAlgorithm(HashAlgorithm.Sha256);
    var challengeBuffer = sha256.HashData(
        CryptographicBuffer.CreateFromByteArray(Encoding.UTF8.GetBytes(_codeVerifier)));
    byte[] challengeBytes;
    CryptographicBuffer.CopyToByteArray(challengeBuffer, out challengeBytes);
    return Base64Url.Encode(challengeBytes);
}

Include the code and the method in the request querystring.

You can generate codes for testing here: https://tonyxu-io.github.io/pkce-generator/

That's as far I've gotten with it but I am shown the login screen.

Answer 3

It's a parameter required by the Proof Key for Code Exchange standard.

OAuth 2.0 public clients utilizing the Authorization Code Grant are susceptible to the authorization code interception attack. This specification describes the attack as well as a technique to mitigate against the threat through the use of Proof Key for Code Exchange (PKCE, pronounced "pixy").