Nextjs-auth0 and passwordless auth via API


We are using the auth0 authentication api to generate a magic link and would like to allow it to log users into our nextjs app. The email link generation is successful, but when clicking the link in the email we are seeing this error in the browser: state missing from the response .

If we then visit the base URL the user is authenticated, but that requires manually editing the browser url.

From this discussion I’m assuming that the next-auth0 sdk is what sets that state on a redirect to api/login .

That said, we have configured universal login to use passwordless, but, optimally we would trigger the generation of the email link from outside of our nextjs application entirely, if this is possible.

We do not want to have a user visit the Universal login page to get a code or link. The goal is that the link is generated purely via a call to the auth0 authentication api.

Currently, the link is generated from postman (so outside of the application), but we’ve also attempted to send it via server side or from the next.js client side, but nothing has had an effect on the outcome.

Is there some other way than the SDK to generate the state the callback url needs?

I’m noticing that when we click on the magic link that we’re getting redirected to the callback url with a # in the url where I’d expect a ? where query params start.

If I manually replace the # with a ? and instead I get a state mismatch error.

If I manually edit the state to match I get a TypeError: id_token not present in TokenSet error message.

Do you know what might be going wrong here? Thanks so much for any advice!

---- UPDATE ----

Okay so I’ve been able to successfully login using a magic link I generate via the authentication api by using the state generated by the library.

However, this involved me just copying and pasting into my api request the state from the browser URL that exists once the library redirects back to the auth0 universal login page.

I would like to programmatically obtain this state and use it to automatically hit the authentication api to generate a magic link. All of the state generation occurs within the library and a redirect will happen before I’m able to obtain this state.

Is there a way to pre generate and set this state to a value that I pass to the library?


So to be more specific, the state that works for me appears to be generated with the nonce that is created by the login handler in the auth0/nextjs library, but it’s generated when that handler redirects to the authorize endpoint at the auth0 domain, and it does not look like the base64 encoded nonce state object that is generated by the library.

I think it’s worth pointing out that we were able to solve our issues with the suggestions provided in this issue comment thread: