nextjs-auth0: Passwordless email link authentication is not working

Description

Passwordless email link authentication is not working.

Reproduction

Created Auth0 SPA Application
Set the allowed callback URL to http://localhost:3000/api/auth/callback
Set allowed logout URL to http://localhost:3000/
Configured our nextjs application, including env vars, to use nextjs-auth0 default setup for /pages/api/auth/[...auth0].js
```
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();
```
Went to the auth0 management dashboard
Navigated to the Passwordless Connection for email and opened the modal
Click the applications tab
Make sure the newly created SPA application from step 1 was checked
Clicked on try tab in modal
Selected application created earlier in step 1
Changed email recipient to my test email
Changed mode to link
Clicked Try
Clicked link in email

Obviously, the repeatable steps are 9-14. Which I expected to be authenticated into the nextjs application without issue. However, I get the following error

Cannot read property 'toString' of undefined

This happens because the decodeState function for the get-login-state hook tries decoding a state that is undefined. The transientcookiehandler goes to read a cookie called state with the following function transientCookieHandler.read('state', req, res).

While actually debugging the only set cookies that it claims are there from the request are session cookies. When I check the callback request in chrome dev tools network tab I see the state cookie listed under request cookies. The response cookies for that callback request have a state cookie with an empty value.

Any assistance is appreciated.

Environment

Please provide the following:

**Version of this library used: 1.1.0
**Version of the platform or framework used, if applicable: nextjs 10.0.7
**Other relevant versions (language, server software, OS, browser): using js in VS Code with Chrome browser
**Other modules/plugins/libraries that might be involved: N/A

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 20 (6 by maintainers)

Most upvoted comments

Definitely a big documentation gap here Auth0. Just wasted days fluffing around with passwordless auth and the next.js-auth0 sdk. Definitely considering Cognito now.

willtpwise on Sep 18, 2021

Perhaps this will help someone:

I learned that the password-less ‘magic’ link created on user signup (I created it via node-auth0 package managementApi.createUser) will redirect to url specified in “Allowed Callback URLs”.

As @jaredgalanis mentioned above if we switch # with ? then it will recognise the params in the uri.

The login flow will work just fine however, if we change url from /api/auth/callback? to /api/auth/login?

By doing this I was able to login user.

if you set “Allowed Callback URLs” in Auth0 Dashboard to accept both {root_url}/api/auth/callback (for flow with password) and guarded {root_url}/callback (for password-less), then the password-less flow will work - assuming that you have a generic guardian component that redirects to /api/auth/login if user/session is not present.

It is important to distinguish between a /api/auth/callback (server-side api in next.js for managing auth flow) and /callback which is a frontend component where user lands after clicking the email link…

stopyransky on Jan 20, 2022

Hi @jaredgalanis - you should be able to pass the audience in the authorizationParams config, in the handleLogin options or use the AUTH0_AUDIENCE environment variable.

See the Access an External API from an API Route Example for more info

adamjmcgrath on Apr 21, 2021

Got passwordless to work when starting the auth from our app. Thanks.

benhamiltonpro on Mar 25, 2021