Proper auth0-js state/nonce management?

Im using auth0-js library in our react app. There is a lot of confusion about how to best manage state and nonce fields in this project.

What is the best way to handle state and nonce in auth0-js?

The docs claim that there is some implicit verification but that seems to be a lie. At minimum, calling parseHash() from the WebAuth class is necessary, and that always fails. When I do provide a state field to the initial authorization() call, it is not passed as a query parameter. Some value is passed for the state field regardless of whether anything is specified.

Also, there is a cookie set by auth0-js, but the nonce is null (so should we be handling it ourselves?) and the state is set to something which doesnt match what is sent to the auth0 endpoint.

This seems like a blatant bug and is rather confusing.

How should state/nonce be handled for auth0-js.WebAuth usage?

3 Likes

Hi @AaronBaldwin,

Welcome and thank you posting in Auth0 Community!

First, your app should get consent from the user to invoke the API on their behalf. Auth0 will authenticate the user and obtain consent, unless consent has been previously given.

Are you sending the users to the authorization URL?

https://YOUR_DOMAIN/authorize?
audience=YOUR_API_AUDIENCE&
scope=YOUR_SCOPE&
response_type=YOUR_RESPONSE_TYPE&
client_id=YOUR_CLIENT_ID&
redirect_uri=https://YOUR_APP/callback&
nonce=YOUR_CRYPTOGRAPHIC_NONCE&
state=YOUR_OPAQUE_VALUE

What type of application are you using?
Which doc are you referring to?

Please check these docs:

1 Like