How to properly redirect to a custom page after successful signIn

[joaocasarin]

Question 💬

Current behavior: user just go back to home.
Expected behavior: when the user successfully sign in using one of the NextAuth providers (in this case, Spotify), I need them to be redirected straight to a specific page called /dashboard, which is protected by:

const { data: session } = useSession({
    required: true,
    onUnauthenticated() {
      redirect('/')
    }
  })

My NextAuth is configured as follow:

import NextAuth, { AuthOptions, DefaultUser } from "next-auth"
import SpotifyProvider from "next-auth/providers/spotify"

export const authOptions: AuthOptions = {
  // Configure one or more authentication providers
  providers: [
    SpotifyProvider({
      clientId: process.env.SPOTIFY_CLIENT_ID!,
      clientSecret: process.env.SPOTIFY_CLIENT_SECRET!,
      authorization: {
        params: {
          scope: process.env.SPOTIFY_API_SCOPE!
        }
      }
    }),
  ],
  callbacks: {
    async jwt({token, account}) {
      if (account) {
        token.id = account.providerAccountId
        token.accessToken = account.access_token
      }
      return token
    },
    async session({session, token}) {
      // console.log('token', token);
      session.user.userId = token.id;
      session.user.accessToken = token.accessToken;
      return session
    },
    async redirect({url, baseUrl}) {
      console.log('url', url);
      console.log('baseUrl', baseUrl);
      
      return url.startsWith(baseUrl) ? url : baseUrl + '/protected/client';
    }
  }
}

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

How to reproduce ☕️

Clone this repo

Setup your .env file properly according to your Spotify API application

run yarn dev

Click the button Sign In with Spotify

You will see that you are still being redirected to where you were, not the page I want.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[anampartho]

@joaocasarin In your SpotifySignIn component, you are using the signIn method of next-atuh. Here you can specify a callback URL so that the provider can redirect the user to the callback URL you have defined. Check: specifying-a-callbackurl

const SpotifySignIn = () => (
    <SpotifySignInButton onClick={() => signIn('spotify', { callbackUrl: '/dashboard' )}>
        <Icon size={20} />
        Sign In with Spotify
    </SpotifySignInButton>
);

[balazsorban44]

https://next-auth.js.org/getting-started/client#specifying-a-callbackurl

Eg.: signIn("spotify", {callbackUrl: "/dashboard"})

[marsidorowicz]

Hi, from what I understand from docs, when i put undefined as first arg, second callback url like
const handleLogIn = () => signIn(undefined, { callbackUrl: '/start' }) it will redirect on any log in method?

Also why const handleLogOut = () => signOut({ callbackUrl: '/' }) doest not redirect ofter signOut to '/'? Should right? Thanks!

Update:

my mistake, add to signOut callbackUrl i had this in [...nextauth].js:
async redirect({ url, baseUrl }) { const redirectUrl = url.startsWith('/') ? new URL(url, baseUrl).toString() : url console.log([next-auth] Redirecting to "${redirectUrl}" (resolved from url "${url}" and baseUrl "${baseUrl}")) return '/start' },

[aakash14goplani]

And that callback URL must be whitelisted one right? @balazsorban44

[veetcoder]

And that callback URL must be whitelisted one right? @balazsorban44

If you are talking about whitelisting the callback URL on the provider, you don't have to. I just tested it with the Google provider. I only had to whitelist the base url.

[webmmr]

https://next-auth.js.org/getting-started/client#specifying-a-callbackurl

Eg.: signIn("spotify", {callbackUrl: "/dashboard"})

Is there a way to make the callBackUrl dynamic? I want the users to go back the previous page from where they were redirected to login page and they can be from different pages.

[anampartho]

https://next-auth.js.org/getting-started/client#specifying-a-callbackurl
Eg.: signIn("spotify", {callbackUrl: "/dashboard"})

Is there a way to make the callBackUrl dynamic? I want the users to go back the previous page from where they were redirected to login page and they can be from different pages.

You can try signIn('spotify', {callbackUrl: dynamicUrlVar})

[isoteriksoftware]

https://next-auth.js.org/getting-started/client#specifying-a-callbackurl
Eg.: signIn("spotify", {callbackUrl: "/dashboard"})

Is there a way to make the callBackUrl dynamic? I want the users to go back the previous page from where they were redirected to login page and they can be from different pages.

You can cache data as query strings in the url. You can use this to remember what initiated the login request. You can also use localStorage for the caching.

[Dayonel]

https://next-auth.js.org/getting-started/client#specifying-a-callbackurl
Eg.: signIn("spotify", {callbackUrl: "/dashboard"})

Is there a way to make the callBackUrl dynamic? I want the users to go back the previous page from where they were redirected to login page and they can be from different pages.

You can try signIn('spotify', {callbackUrl: dynamicUrlVar})

thank you!! this is not documented

[jsrobin888]

Consider this option

// Wrap your page with an authentication session component
function AuthSession({ children }) {
  // Check if the user has a valid authentication session
  if (<valid>) {
    // If the session is valid, render the requested page content
    return children;
  }

  // If the user is not authenticated, redirect to the Sign-In page
  return <SignInPage />;
}

// The user will need to meet the authentication requirements to access the page.
// Use this wrapper to protect pages and ensure only authenticated users can view them.

// Authentication configuration with custom redirect logic
{
  providers: [...],  // Define authentication providers (e.g., Google, GitHub)
  adapter: ...,      // Specify any required adapter for the authentication flow
  session: ...,      // Manage the session settings for logged-in users
  ...
  callbacks: {
    // Define custom redirection logic for different scenarios
    async redirect({ url, baseUrl }) {
      // Check if the URL is a relative path
      if (url.startsWith("/")) {
        // Redirect to the requested relative URL within the same site
        return `${baseUrl}${url}`;
      }

      // Allow redirection to URLs from the same origin (domain)
      if (new URL(url).origin === baseUrl) {
        return url;
      }

      // Handle special cases, such as redirection to specific platform sections
      if (url.startsWith("/platform")) {
        // Add custom query parameters (e.g., timestamp) for tracking or logging
        return `${url}?timestamp=${Date.now()}`;
      }

      // If no valid redirect option is found, default to the base URL
      return baseUrl;
    },
  },
}

// If you need the user to be redirected from the current page, whether authenticated or unauthenticated, 
// to another page, `callbackUrl` can be used to perform this action effectively.
// The `callbackUrl` parameter allows the application to store and use the intended destination 
// after login or logout, ensuring the user lands on the right page based on their prior context.

// Example usage: 
// - A user tries to access a restricted page without being logged in.
// - After authentication, the `callbackUrl` ensures they are redirected back to the original page they requested.