How to add a nonce to react-oidc library?

Question

I'm trying to figure out how to provide a nonce to my config file for the react-oidc library and when I click on the button to initiate a redirect, it's telling me that it's missing a nonce but I'm not sure how to provide one?

My config:

window.config = {
  authority: "xxxxxxxxxxxxxxx",
  client_id:
    "xxxxxxxxxxxxxxxxx",
  redirect_uri: "http://localhost:2222/authorized-page",
  response_type: "code",
  scope: "openid profile",
  post_logout_redirect_uri: "http://localhost:2222/logout",
  acr_values: "ial/1",
};

My code:

import React, { useEffect } from "react";

import { makeUserManager } from "react-oidc";

const {
  authority,
  client_id,
  redirect_uri,
  response_type,
  scope,
  post_logout_redirect_uri,
} = window.config;

console.log("config...", window.config);

const userManager = makeUserManager(window.config);

const LoginSso = () => {

  useEffect(() => {
    userManager.signinRedirect();
  }, []);

  return <></>;
};

export default LoginSso;

error the url is giving me:

http://localhost:2222/authorized-page?error=invalid_request&error_description=Nonce+Please+fill+in+this+field.+Nonce+is+too+short+%28minimum+is+22+characters%29&state=

Answer 1

A nonce should only really be needed when tokens are returned on the front channel, eg in the hybrid or implicit flows. In this case the value is written to the ID token and you are meant to validate it when you receive the response.

response_type=code id_token

You are using the preferred flow though, and if you capture the full request URL I expect the library will not send a nonce - perhaps your Authorization Server - or its configuration - are not quite right.

A possible workaround is to use the support for additional request parameters. It feels wrong using this for a nonce but this library option is useful sometimes, for dealing with vendor specific behaviour.

userMamager.signInRedirect({
  extraQueryParams: {
      nonce: 'my-value',
  },
})