Cannot authenticate via Magic Link

Help
, ,
1

I’m trying to configure logic via magic link. I’ve successfully setup the passwordless connection and my custom email provider such that the emails are sent instantly, and I can trigger sending the email with the /passwordless/start endpoint of the Management API.

However, when I click the link, I’m redirected to a blank page showing the error:

Cannot read property 'toString' of undefined

From the logs in my dashboard, I can see that the login was successful, so it seems to be something with the auth0 library, as this error shows in my terminal:

HandlerError [TypeError]: Cannot read property 'toString' of undefined
    at new HandlerError (.../node_modules/@auth0/nextjs-auth0/dist/utils/errors.js:53:28)
    at Object.<anonymous> (.../node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:39:31)
    at step (.../node_modules/tslib/tslib.js:143:27)
    at Object.throw (.../node_modules/tslib/tslib.js:124:57)
    at rejected (.../node_modules/tslib/tslib.js:115:69)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Also, when I redirect to my main page in my app, the user is not authenticated.

3

Hi @eric.luce,

Welcome to the Auth0 Community!

Can you please share an example of the magic link you are seeing?

4

@dan.woda This is what’s being sent to my email:

https://[redacted].us.auth0.com/passwordless/verify_redirect?scope=openid&response_type=token&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback&verification_code=411592&connection=email&client_id=Nk36u0gox4tFJNhJ0K8KAhiXKw4OVijn&email=eric%40ericluce.com

5

Everything looks okay there.

Can you please provide the code you are using?

6

@dan.woda Sure, here’s my code

So when I click that link, it takes me to my next app, using the default handleAuth function in my API route.

// pages/api/auth/[...auth0].ts
import { handleAuth } from "@auth0/nextjs-auth0";

export default handleAuth();

Could it be that the URL with a # instead of ? is causing it to not read the query params? This is where I get redirected after clicking the link I showed in my last post.

http://localhost:3000/api/auth/callback#access_token=[redacted]&scope=openid&expires_in=7200&token_type=Bearer
1 Like
7

Can you take a look at this issue and see if it resolves it?

8

@dan.woda No that does not solve my problem. I already have that /api/auth/[...auth0].ts route configured and it’s working properly if I login using other means.

I cloned the source of the nextjs-auth0 package from GitHub and stepped through it manually. This is the line that’s returning undefined:

// auth0-session/handlers/callback.ts
expectedState = transientCookieHandler.read('state', req, res)

Is this something that needs to be set in the browser before sending the magic link, or in my authParams when sending the link via the API?

9

Actually, the more I look into this, I feel like at least partially to blame is that the params are being sent after the # in the URL and yet calling a server-side API route. Since these params are not being sent to the server, the callback isn’t able to process them correctly. Or am I misunderstanding how this feature is supposed to work? I’ve tried to follow all tutorials precisely, without making any changes to the defaults, but in the docs it just says that the magic link will work and redirect to the callback URL, without any more details about what the callback URL is expecting. Am I just redirecting to the wrong callback URL?

10

Hey, any developments on this issue?

2 Likes