Nonce (nonce) claim must be a string present in the ID token

Hello,

since updating the auth0-spa-js SDK to 1.12.0 in my project, I am unable to login into my app using password grant in my cypress e2e tests. As a result, I now get the error message Nonce (nonce) claim must be a string present in the ID token when calling handleRedirectCallback(). But using password grant doesn’t return a nonce in the id token. Below is the code I use in cypress to login. It’s mostly copied from the blog article one of you did back in 2019. This works in 1.11.0:

Cypress.Commands.add('login', () => {
  Cypress.log({ name: 'log in with Auth0' })

  const options = {
    method: 'POST',
    url: Cypress.env('AUTH0_LOGIN_URL'),
    body: {
      grant_type: 'password',
      username: Cypress.env('AUTH0_USERNAME'),
      password: Cypress.env('AUTH0_PASSWORD'),
      audience: Cypress.env('AUTH0_AUDIENCE'),
      scope: 'openid profile email',
      client_id: Cypress.env('AUTH0_CLIENT_ID'),
      client_secret: Cypress.env('AUTH0_CLIENT_SECRET'),
    },
  }

  cy.request(options).then(({ body }) => {
    // eslint-disable-next-line camelcase
    const { access_token, expires_in, id_token } = body
    const scope = 'openid profile email'

    cy.server()
    // intercept Auth0 request for token and return what we have
    cy.route({
      url: 'oauth/token',
      method: 'POST',
      response: {
        access_token,
        id_token,
        scope,
        expires_in,
        token_type: 'Bearer',
      },
    })

    // Auth0 SPA SDK will check for value in cookie to get appState
    const auth0State = JSON.stringify({
      nonce: '',
      state: Math.random().toString(36).substring(7),
    })
    cy.setCookie(
      `a0.spajs.txs.${auth0State}`,
      encodeURIComponent(JSON.stringify({
        appState: { targetUrl: '/' },
        scope,
        audience: Cypress.env('AUTH0_AUDIENCE'),
        redirect_uri: 'http://localhost:8080',
      }))).then(() => {
      cy.visit(`/?code=test-code&state=${auth0State}`)
    })
  })
})

So what changed? What do I have to do, to get it working again? Should I create a github issue?

Thanks!

Hi sebastian.richter and welcome to the community! :tada:

I think this might be the relevant changer: https://github.com/auth0/auth0-spa-js/pull/560/files

I noticed your nonce string is empty. Could you try filling it and seeing if that fixes this issue?

1 Like

@thomas.osborn Filling with what kind of content? I tried random strings, random number, arbitary strings, nanoid() and still get the error. I mean the error says use the nonce in the id token. But as I said there is none?!

    const auth0State = JSON.stringify({
      nonce: nanoid(),
      state: Math.random().toString(36).substring(7),
    })

Hi sebastian.richter. Thanks for clarifying that. I think since you have already tried including a nonce, you are right you should go ahead and make a Github issue.

However, please keep in mind the SPA JS is probably not designed to do password grant, as that is a flow not suited for front end applications. I understand you’re doing this in a test environment where the client secret can be stored securely, but I suspect it was not intended for this flow to work in AUTH) SPA JS.

1 Like