Failing to redirect to a custom returnTo

[possad]

Hi

Following the documentation and a few suggestions here, I’ve tried to modify the returnTo parameter to change the redirected URL after authorisation but I’m not able to do so.

After following the simple guide on setting auth0 in nextjs, I’m able to go to /login, click on a simple button that calls /api/auth/login and manage to authenticate. After authentication, I’m redirected to / URL.

To change that behaviour, I’ve changed the handleAuth from

import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";

export const GET = handleAuth();

to

import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";

export default handleAuth({
  async login(req, res) {
    await handleLogin(req, res, {
      returnTo: "/custom",
    });
  },
});

But now, when I click on the button in /login page, I get a 405 method not allowed. I see that in the browser URL it’s trying to redirect to localhost:/api/auth/login

If I change back he handleauth then everything works again.

What am I doing wrong?

[rueben.tiow]

Hi @possad,

Welcome to the Auth0 Community!

After reviewing your code snippet, I noticed that you are passing an incomplete URL for the returnTo parameter.

In this situation, please make sure to pass the full URL that you want the user to redirect to after authentication.

For example:

export default handleAuth({
  async login(req, res) {
    await handleLogin(req, res, {
      returnTo: "https://www.yourapp.com/callback",
    });
  },
});

Let me know how this goes for you.

Cheers,
Rueben

[possad]

That doesn’t solve the problem, unfortunately.

[rueben.tiow]

Hi @possad,

Can you provide more details about what happened after trying to pass the complete URL to the returnTo parameter?

[possad]

Nothing changes.

Here is what I have in my application setting:

When I have

import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";

export const GET = handleAuth();

After I click on login button, it redirects correctly to auth0 website letting the user to log in/sign up. After a successful login, it redirect back to localhost:3000/ but I want it to redirect to localhost:3000/main

So I when I change it to:

import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";

export default handleAuth({
  async login(req, res) {
    await handleLogin(req, res, {
      returnTo: "http://localhost:3000/main",
    });
  },
});

After clicking on login, the browser goes to http://localhost:3000/api/auth/login and I get a 405!

Here is also my login button

[rueben.tiow]

Hi @possad,

Thanks for your update.

I see that your Allowed Callback URLs do not have “https://localhost:3000/main” as a callback URL for your app.

If you want to redirect your users to “https://localhost:3000/main”, you must include it as a callback URL and make sure that it’s referenced in your returnTo parameter.

Furthermore, the HTTP 405 error code you experienced indicates that you are trying to use an HTTP method that the server doesn’t support. In this case, please make sure you are performing a GET request to your login endpoint (/api/auth/login).

Keep me posted on how this goes for you.

Thanks,
Rueben