Initial state not found error

[dpramanik]

Hey

I am using Universal Login to implement authentication in my application. I am getting a “Initial state not found” error when I am following the given workflow.

Workflow:
User logs in -> visits the dashboard -> then logs out. After that, when the user presses the back button in the browser, the user is redirected to the dashboard page and now since he is not logged in, he is being redirected to the /api/login page. It is perfectly fine till now. But now when he tries to log in he is being redirected to a page with the aforesaid message.

Any idea on why I am facing this ?

I am using the next js auth0 library and have also noticed that the state variable for both the login attempts were different.

The way I have this solved currently is I am catching that error inside callback and then redirecting them to the /api/login route

[Saltuk]

Hi @dpramanik I presume with the back button click, the app may not be storing the new state for the second login attempt correctly. Can you capture a HAR file for the complete flow you described and send me as DM?

As a second question can you reproduce the issue with the reference app here?

[dpramanik]

Sure I will dm you the har file.

[Saltuk]

Hi @dpramanik

A bit of background first; When the nextjs-auth0 library crafts an authorization URL it stores a random string as a state parameter within a cookie. Then passes this value with the state attribute to Auth0 during the /authorize call. Once Auth0 completes its events of actions to validate the user, passes the same state parameter back to the application callback URL along with the credentials. Then the SDK validates the returned state parameter with the stored state in the cookie. This mechanism helps to avoid CSRF attacks.

Reviewing the HAR files, when the error happens, the state parameter passed in /authorize call is sent back to the callback URL correctly. So the issue isn’t related to the Auth0 server but either the application code or the nextjs-auth0 library.

https://[redacted].us.auth0.com/authorize?..redacted..&state=eyJub25jZSI6IjdkNDNhOTlmMTc1Yzc3MDhjZTU5MDNhNGZiMmI3OTE3In0

https://[redacted]/api/auth/callback?code=zyQx3qFDzlJgcVQ7&state=eyJub25jZSI6IjdkNDNhOTlmMTc1Yzc3MDhjZTU5MDNhNGZiMmI3OTE3In0

This specific error message is thrown from this line of the code.

// Require that we have a state.
    const state = cookies['a0:state'];
    if (!state) {
      throw new Error('Invalid request, an initial state could not be found');
    }

It appears that after the back button click, a0:state cookie isn’t available, and redirecting the user to /api/login endpoint doesn’t create a new one. At this point, I’m not sure why it isn’t created. Can you reproduce the same issue with the sample app link I shared earlier?

As a side note, I found an open issue in the project’s repository. Your issue is likely different than the ones reported there though.

The way I have this solved currently is I am catching that error inside callback and then redirecting them to the /api/login route

This looks like a good workaround solution in my opinion.

[dpramanik]

@Saltuk Thanks for the detailed explanation. For the reference app, do we have a sandbox link where we can test the discussed workflow / you are talking about the bare bone implementation as given in the link you shared above ? Also from our application perspective, both in normal login button click and the back button click we are redirecting the users to /api/auth/login(if user is not logged in), for the former it’s working but not for the latter. Catching the error inside callback and handling it is the workaround solution right now.

[Saltuk]

Hi @dpramanik unfortunately we don’t have a test sandbox for that app. If the issue turns out to be Auth0 library-related, I appreciate it if you can open an issue in the Github project.