Nextjs-auth0: Cypress Testing with this library and RPError: missing required property at_hash

[aphillipo]

Description

I need to be able to programatically login to auth0 with Cypress using this method: https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/

Reproduction

Following the tutorial (there is too much config for me to duplicate that here) and when calling /callback I receive this error:

RPError: missing required property at_hash
at Client.validateIdToken (/Users/aphillipo/dev/ember/ember/node_modules/openid-client/lib/client.js:805:15)
at process._tickCallback (internal/process/next_tick.js:68:7)
jwt:
'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik1FVTVSams0TVVaQk5VRXpPREpDTTBWRk56VTJRVEZDTXpRMFFqWXhORFl3TXpJMFJUVXhOUSJ9.eyJuaWNrbmFtZSI6ImUyZS10ZXN0aW5nIiwibmFtZSI6ImUyZS10ZXN0aW5nQGVtYmVyLmNvIiwicGljdHVyZSI6Imh0dHBzOi8vcy5ncmF2YXRhci5jb20vYXZhdGFyLzZiMDVjMTJjNGU5NzFmY2FhM2ViOGI1M2ExYzRlYmI0P3M9NDgwJnI9cGcmZD1odHRwcyUzQSUyRiUyRmNkbi5hdXRoMC5jb20lMkZhdmF0YXJzJTJGZTIucG5nIiwidXBkYXRlZF9hdCI6IjIwMjAtMDItMDNUMjE6MjQ6MjIuMjMyWiIsImVtYWlsIjoiZTJlLXRlc3RpbmdAZW1iZXIuY28iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImlzcyI6Imh0dHBzOi8vZW1iZXItYXV0aC5ldS5hdXRoMC5jb20vIiwic3ViIjoiYXV0aDB8NWUyNzM5ZDY5ZjYzMDMwZWIxMTYxODVmIiwiYXVkIjoiYklFTUJOTkEzSGVxWU4xbzQ0ZXRNMENIN0FsNG1WckgiLCJpYXQiOjE1ODA3NjUwNjIsImV4cCI6MTU4MDgwMTA2Mn0.F62lQZrq47AGKZY5qnzG4gVJQklmhoFXcJVvy7dVDxOcVNHjx5_KjOB24YkCB-6jQNAzIRkh2O2pVKjANYexszNWfoaJgerg40cT1tm7TCQcMeZuP2zsnZ_JjHB7pOzNW1s0nnsNiN59wTbrUu71QnP8Z7aiUJD4Dfg9BlXc70TuVcY4chSmRhYTVN93ryhp2dTY3lG6eivFR6UN3azoYcuy0mg0_wOAkez6Lfsz4GW035AJ7ub7qRBd564y7jwZOWoZ2j7iJZwmuf7MEIAN5H_NhrmQrtGxZzJ7T-ai4dD6wIffHnoQV-fBKQReT0_T5lmyHRLIcL86ST6SBLd-pg'

Environment

Please provide the following:

• Version of this library used:

Upgraded to v0.10.0, same error difference.

• Version of the platform or framework used, if applicable:

NextJS but it's not relevant.

• Other relevant versions (language, server software, OS, browser):

N/A

[aphillipo]

Why does Auth0 give me an access token that does not have at_hash? It does seem to suggest in the spec that the at_hash value if not present shouldn't be checked 🤷🏻‍♂️https://openid.net/specs/openid-connect-core-1_0.html#rfc.section.3.1.3.6

[nodabladam]

@aphillipo I have just run into the same thing. Did you get past this?

[aphillipo]

I would seriously consider not running this library as it doesn't work :-/

And seemingly isn't supported even though we all pay auth0 money. Weird.

Just remember that most of this stuff is http(s) calls and JWT token verification and storing the token to set headers (or a cookie). If you are changing away from this I would just do it yourself and you'll understand the flow properly.

However, it might be worth setting an Audience parameter when you get the token and make sure your API is authenticating against an access token. Audience is used to select which API you get the access token for in Auth0 so might be helpful to set.

[sir-dunxalot]

@aphillipo @nodabladam I think I have figured out a good workaround for Auth0, Next.js, and Cypress, documented here.

This workaround copies the functionality of this library whilst avoiding the seeming incompatibility of the password grant type with the expectation this library has for responseType: 'code'.

Edit: Here is a blog post walkthrough.

[nodabladam]

@sir-dunxalot Quick test seems to confirm this works! Brilliant!!

I needed to:

• comment out cy.visit("/profiles"); because I think that path is something app specific
• change my Tenant > General > API Authorization Settings > Default Directory to Username-Password-Authentication to avoid Authorization server not configured with default connection. I wonder if this can be passed in with cypress instead.

[sir-dunxalot]

Correct on both counts. I will update the gist.

(This only took me a few days to figure out 🙃)

[nodabladam]

@sir-dunxalot While running this I happened to get Error: Too Many Requests. It might be desirable to whitelist the session cookie and only login if it doesn't exist. This is an attempt at that

Cypress.Cookies.defaults({
  whitelist: [
    "a0:session",
    "a0:state"
  ]
});

Cypress.Commands.add("login", (overrides = {}) => {
  cy.getCookie("a0:session").then(val => {
    if (val) {
      // skip logging in again if cookie already exists
      return true;
    } else {
      // Do login stuff
    }
  });
});

[fortunee]

Hey, @sir-dunxalot I tried your implementation but I'm still being redirected to the auth0 login screen when I try to cy.visit a protect route in my application right after cy.login.

I'm not sure what I'm missing here. 🤔

I have password grant type enabled in my auth0 application and I have my `Tenant > General > API Authorization Settings > Default Directory to Username-Password-Authentication (different name for me but it's the same with the name on the database connection.

Any ideas could help. Thanks 🙏

[nodabladam]

@fortunee

• make sure you are completely logged out. if you have an old cookie from old tests it might redirect due to different settings
• are you using custom domains? make sure your urls are correct with this value
• are you setting any cookieSameSite values? I don't set anything but certain settings might cause issue in testing?
• I happen to be disabling web security still as remnant from past runs and wonder if that is necessary to avoid redirect
  cypress.json

{
  "chromeWebSecurity": false
}

[fortunee]

@nodabladam Thank you very much ❤️

Disabling chrome web security did the trick. Awesome stuff!

[sir-dunxalot]

I've added a suggestion to try "chromeWebSecurity": false in the gist. For the record, I do not have this option set in my project so it seems like it is necessary in some situations and not others. It would be handy to know why it's required in some cases but that's a nice-to-have right now (at least our test suites are functional!).

I hope to soon publish a repo for this setup soon. Feel free to share additional changes required to this setup. At least we can help each other in the meantime before getting an official response from Auth0.

[sir-dunxalot]

I have put together sir-dunxalot/cypress-nextjs-auth0 in order to support Next.js and Auth0 in Cypress. Please try it out and let me know what you think it's missing given this conversation.

yarn add cypress-nextjs-auth0 --dev

[adarnon]

There's not a lot to update (it still doesn't work out of the box), just wanted to say thank you @sir-dunxalot your repo helped me fix a very annoying problem. It could be updated (Cypress whitelist has been renamed) but the logic is flawless!

[Widcket]

Closing as the issue was solved.

[adarnon]

@Widcket Hey, this issue is not solved. The oidc client still expects at_hash to exist, even though the standard does not.

[Widcket]

@adarnon my apologies, I did not express myself correctly. A workaround was found, as this is not an issue with the SDK itself (and therefore not actionable by us).