How to validate the state parameter on the server in an Auth0.js Cross-Origin Authentication flow

Hi,

We’ve implemented a custom sign-in form using Auth0.js and have enabled a custom domain. We are using the webAuth.login() method to initiate the Cross-Origin Authentication flow.

We understand that Auth0.js first calls the /co/authenticate endpoint to get a login ticket, then generates a state value, and finally redirects to the /authorize endpoint with this state value included in the query string.

Upon a successful return from the /authorize endpoint, Auth0 redirects the user to our server’s /callback endpoint with the state parameter. The challenge is validating this state value on our server.

Since Auth0.js generates the state value client-side, how can our server-side callback implementation verify it?

The key here is that in Cross-Origin Authentication with Auth0.js, the state parameter is generated in the browser, so your server doesn’t automatically know what it should be checking against unless you’ve coordinated that value ahead of time.

2 Likes

Indeed, I contacted support in the meantime and the conclusion is that we need to generate the state server side and store it, (in a cookie for example) to be able to use it later in /callback, then communicate the value to the front end and use when calling Auth0.js’s login method.

1 Like

Hi @jraoult-appraised

Welcome back to the Auth0 Community!

As @nancy865miler has mentioned, unless the state is being generated on the server before redirection is performed, you don’t have any indicators to use in order to validate the state itself.

Perhaps our documentation on CSRF Attacks and user redirection might help you understand the situation better. Of course, this would require a custom implementation for your application.

If you have any other questions on the matter, let me know!

Kind Regards,
Nik

1 Like