NextJS-Auth0 handleAuth custom error handling

Hi everyone!

I’m using nextjs-auth0 library to integrate our app with Auth0. Everything is working fine, except one little issue that is driving us crazy. Let me explain:

We have certain use cases where we want to control if our users can signup/login (i.e. email verification, users are not on our whitelist, and so on). For those use cases we trigger access deined responses from Auth0 Flows, and we capture them in a custom handleAuth method to redirect those errors to a custom error page in our app. Something like this:

export default handleAuth({
    async callback(req, res) {
        try {
            await handleCallback(req, res);
        } catch (error) {
            res.writeHead(401, {
                Location: `custom-error-page`
            });
        
            res.end();
        }
    }
});

Everything is working as expected, users are redirected and everything is fine. BUT!!! If the user tries to signin again after any of those errors, the /api/auth/login sends them back to the callback handler, instead of presenting them the Auth0 login page. It seems that Auth0 (or our app, or nextjs-auth0) considers that the user is already logged in.

Any ideas? Need more info about it?

Thanks in advance.

3 Likes

Wanted to piggyback on question. Or to see if there’s a better, more recommended way to handle a similar situation. I was not able to even get this to redirect with the 401 status code. I had to change it to the 300 level. Not even sure a redirect is correct here given the expectation, I think, for a failed login would be a 400 status code. But a page/API route response which just reprints the error code is not exactly user-friendly.

In my case, I created a new action with Auth0 to check the logging in user against an allowlist. When not allowed, I have the API deny with a custom message (something like not_on_email_allowlist). When that happens I’d like to send the user to an invalid-user page. Is there a recommendation from Auth0 (this SDK) for how best to handle this?

Thanks a lot!

1 Like

@juan.hurtado or @marclemagne Did you ever figure this out?

This issue is also driving us crazy and we don’t know how to solve it.

Like you said it seems that Auth0 (or our app, or nextjs-auth0) considers that the user is already logged in… and we don’t know how to get a custom error page to work.

1 Like

I’m still trying to figure out how to solve this issue.

I hope someone could helps us here!

No, sorry, I haven’t figured this out. Using the res.writeHead function with a status code in the 300 range will functionally work.

The user shouldn’t be logged in if you’re using an action with api.access.deny. If you don’t do anything (like overwrite the callback handler) and let the SDK handle it, the callback API route will respond with a 400 error and it’ll write a page with: access_denied (not_on_email_allowlist) (or whatever reason you denied the user for). If you go back to your Next app the user won’t be logged in and there will be no appSession cookie.

The question is what’s the appropriate and user-friendly thing to do in this probably-not-uncommon situation.

Did anyone address this issue yet?

Also looking for a solution here, the above solution to redirect to an error page does not even work for me. I still get a black error page

anyone fixed the issue?

When you detect an error, you need to explicitly log the user out. This is roughly what we do:

res
  .redirect(
    302,
    `${auth0Config.issuerBaseUrl}/v2/logout?${new URLSearchParams({
      client_id: auth0Config.clientId,
      returnTo: `${auth0Config.baseUrl}welcome`
    })}`
  )
  .end();

Curiously, using the logout URL from […auth0].ts did NOT work. We had to use the URL shown above.