nextauth dynamic redirect after login

NextAuth Dynamic Redirect After Login

If you're using NextAuth to handle authentication in your Next.js application, you might want to redirect users to different pages depending on their role or some other criteria after they sign in.

The good news is that NextAuth provides a variety of ways to achieve this, and the method you choose will depend on your specific use case.

Option 1: Set a Default Redirect in NextAuth Configuration

The simplest way to redirect users after they sign in is to set a default redirect URL in your NextAuth configuration. To do this, add the following code to your next-auth.config.js file:

module.exports = {
  // Other config options...
  callbacks: {
    async signIn(user, account, profile) {
      // Other sign in logic...
      return '/dashboard';
    }
  }
}

In this example, all users will be redirected to the /dashboard page after they sign in. You can replace this with any URL that you want.

Option 2: Use a Custom Callback Function

If you need more fine-grained control over the redirect behavior, you can define a custom callback function for the signIn event. This function will be called after a user signs in, and you can use it to determine where to redirect them based on some condition.

Here's an example:

module.exports = {
  // Other config options...
  callbacks: {
    async signIn(user, account, profile) {
      // Other sign in logic...
      
      if (user.role === 'admin') {
        return '/admin/dashboard';
      } else {
        return '/user/dashboard';
      }
    }
  }
}

In this example, users with the admin role will be redirected to the /admin/dashboard page, while all other users will be redirected to the /user/dashboard page. You can replace these URLs with any that you want.

Option 3: Use the useSession Hook

If you're using Next.js and want to handle the redirect logic on the client side, you can use the useSession hook provided by NextAuth. This hook returns an object that contains information about the current user session, including whether the user is signed in or not.

Here's an example:

import { useRouter } from 'next/router';
import { useSession } from 'next-auth/client';

function Dashboard() {
  const router = useRouter();
  const [session] = useSession();

  if (!session) {
    // User is not signed in
    router.push('/login');
    return null;
  }

  if (session.user.role === 'admin') {
    router.push('/admin/dashboard');
  } else {
    router.push('/user/dashboard');
  }

  return (
    // Your dashboard component...
  );
}

export default Dashboard;

In this example, the Dashboard component uses the useSession hook to check if the user is signed in. If they're not, it redirects them to the login page. If they are signed in, it checks their role and redirects them to the appropriate dashboard page.

You can replace the /login, /admin/dashboard, and /user/dashboard URLs with any that you want.