Before I dive into the issue let me explain our use case. We want to collect “some” user information in a login-ish form and then trigger the passwordless flow for logging in our user.
To be precise: we have a shopping experience and right before checkout we display a sign up form with user names (first, last) and of course email address. Then, via an api call we store those and create the user on Auth0.
I’m using nextjs-auth0 for securing my website.
I’ve tried creating the user via POST /v2/users to create and also via POST /passwordless/start and in both scenarios I do get the magic link, however when I press it I end up getting back to our website with a “short” token that I honestly don’t understand what’s for or how it works.
With the same app configurations if I go thru the universal login instead of shooting the api calls manually everything works as expected and nextjs-auth0 recognizes the token / session correctly.
Any hints help in this regard will be greatly appreciated.
Hi Dan, thanks for answering. Great to know that I’m dealing with an opaque token.
However, I’m still unable to figure out a way of starting a passwordless flow via /passwordless/start and that the link will end up coming back to my callback URL with something that’s understandable by nextjs-auth0.
The use case I would like to achieve is mainly to be able to init the passwordless/start flow via an API call (server side) and then once the user gets the email with the link to /passwordless/verify_redirect they get redirected back to our site with enough information for nextjs-auth0 lib to successfully create a session.
The only way I’m able to do this is by calling the /api/auth/login method that will in turn redirect me to the Universal Login page, after that, I get the email and clicking on the link successfully gets me logged into my site and nextjs-auth0 detects a valid session for that.
Looking thru the code, I see there is a lot of nonce and state cookie storage that does not take place if I manually run the /passwordless/start flow by calling it via let’s say, an axios call.
Is there way my desired use case is covered? We’re trying to keep the users on our site and we can’t use your embedded login or lock.js because we’re asked to fully skin those to our needs and apparently that’s not possible with your embedded login so we thought we’d initiate everything sever-side instead but there seems to be a lot of cookie setting in place that need to be there when the call comes back.
Hi Dan, So the Issue that I did a very poor job to explain is that I was trying to get nextjs-auth0 to work when coming back to the site after clicking the link on my email.
I can initiate the passwordless flow no problem, and I get sent back to the redirect_url as expected. However, nextjs-auth0’s callback handler blows up since there are a lot of missing pieces in the mix.
Is there any way I can initiate the passwordless flow via CLI / Node / Server and STILL have nextjs-auth0 callback / session working with it?
I’m also running into an issue implementing passwordless login for a NextJS app (using nextjs-auth0 and protected routes). So far I’m seeing the same errors across my dev and production environments (Vercel). I’m able to successfully request the magic link and receive the email, but upon clicking the email I’m directed to the callback url and see:
state mismatch, expected [shorter token], got: [longer token]
I’ve tried setting different permutations of AUTH0_AUDIENCE in Vercel and locally but so far nothing has worked. Appreciate any suggestions for how to debug this. Thanks!