Handling Redirection Based on Multiple Roles After Login

[walifile]

Hi Devs,

I am working on a project where I need to handle redirection based on multiple roles after login. Specifically, I want to redirect users to different pages depending on their roles. For example, if the role is user, the user should be redirected to the user page, if the role is admin, they should be redirected to the admin page, and so on.

Here's my project URL: https://github.com/walifile/nextjs-nextauth-kit

I would appreciate any guidance or examples on how to implement this functionality effectively.

This is a part of my login function:
const res = await signIn("credentials", { email: values.email, password: values.password, redirect: true, callbackUrl: "/user", });
Thank you!

[davidfcopozo]

Hi Devs,

I am working on a project where I need to handle redirection based on multiple roles after login. Specifically, I want to redirect users to different pages depending on their roles. For example, if the role is user, the user should be redirected to the user page, if the role is admin, they should be redirected to the admin page, and so on.

Here's my project URL: https://github.com/walifile/nextjs-nextauth-kit

I would appreciate any guidance or examples on how to implement this functionality effectively.

This is a part of my login function: const res = await signIn("credentials", { email: values.email, password: values.password, redirect: true, callbackUrl: "/user", }); Thank you!

You're trying to do it right in your SignIn.js component. If that's the case you can handle the redirection yourself:

//other imports
import { getSession, signIn, signOut } from "next-auth/react";
import { useRouter } from "next/navigation";

const Login = () => {
//other logic
const route = useRouter();

const formik = useFormik({
//other logic
    onSubmit: async (values) => {
      setIsLoading(true);
      // Handle form submission logic here
      // console.log("Form submitted:", values);
      const res = await signIn("credentials", {
        email: values.email,
        password: values.password,
       //Set redirect to false to handle it yourself
        redirect: false,
      });

const session = await getSession();
//Redirect based on the role of the user
route.push(`/${session.user.role === "user" ? "user" : "admin" }`) //This is just for illustration, you can approach it as you want, with a switch, if conditions, etc.

//rest of the logic

Hope it helps!

[walifile]

Yes, this is the solution I was thinking of. Can we use callbacks like signIn and redirect in NextAuth to handle this situation ??

[davidfcopozo]

I have not tried it that way, but now that you mention it you can do it with the callback's redirect option.

You might have to make a hack by saving the role in a variable to be able to access it in the redirect callback.

https://next-auth.js.org/configuration/callbacks#redirect-callback
https://next-auth.js.org/configuration/options

NOTE: This is a theory, I have not tested it, let me know if it works xD

let role;
callbacks: {
  async signIn({ user, account, profile, email, credentials }) {
    //logic
  },
  async session({ session, token, user }) {
//other logic
let role = session.user.role
    //other logic
  },
  async jwt({ token, user, account, profile, isNewUser }) {
    //other logic
  }
  async redirect({ url, baseUrl }) {
   //do the magic
  },
}

[walifile]

I haven't tried that approach yet. I'd like to hear from someone who has actually implemented a similar solution and can provide a more optimized and tested method for handling multiple role based redirection with NextAuth.js.

If anyone has practical experience with this or can share some example code, it would be greatly appreciated!

Thanks for your input! :)