Multiple SignIn pages

[suparthghimire]

Question 💬

My app has 2 way for a user to login (Using credentials, we don't use 3rd party OAuth)

1. Super admin
2. Normal User

I have 2 separate api endpoints

1. For super admin: {{API_URL}}/api/superadmin/login
2. For user: {{API_URL}}/api/user/login

The requirement is as follows

1. For superadmin, login page should be rendered from route /admin/login
2. For user, login page should be rendered from route /login

In NextAuth, we can specify only one custom signIn page url as

{
  ...
  pages:{
     signIn = "/admin/login"
  }
}

OR

{
  ...
  pages:{
     signIn = "/login"
  }
}

If i use either of the two values in pages.signIn, and call signIn() function from another page, then next-auth will redirect me to the mentioned signIn page

How can i make it such that next-auth accepts both /admin/login and /login as acceptable routes to render login page and when i call signIn() from either page, then it sends it as a POST request instead of GET

Mind you that I cannot add a selector while logging in that chooses between superadmin and user as the as the requirement is strictly as mentioned above.

Thank you.

How to reproduce ☕️

File: app/api/auth/[...nextauth]/route.ts

// imports go here
 export const authOptions: AuthOptions = {
	// Configure one or more authentication providers
	providers: [
		CredentialProvider({
			name: "credentials",
			credentials: {
				email: { label: "email", type: "text", placeholder: "jsmith" },
				password: { label: "Password", type: "password" },
				for: {
					label: "for",
					type: "text",
				},
			},
			async authorize(credentials, req) {
				try {
					console.log("credentials", credentials);
					if (!credentials) return null;

					if (credentials.for !== "superadmin") return null;

					const user = await SuperAdminLogin({
						email: credentials.email,
						password: credentials.password,
					});

					return {
						accessToken: user.data.accessToken,
						refreshToken: user.data.refreshToken,
						user: user.data.user,
						id: user.data.user.id.toString(), //requred for next-auth
					};
				} catch (error) {
					if (error instanceof AxiosError) {
						throw new Error(JSON.stringify(error.response?.data));
					}
					return null;
				}
			},
		}),
	],
	callbacks: {
		async jwt({ token, user }) {
			if (user) token.user = user;
			return token;
		},

		async session({ session, token, user }) {
			session.user = token.user;
			return session;
		},
	},
	events: {
		async signOut({ token, session }) {
			//TODO: handle signout
		},
	},
       //want to do this
	pages: {
		signIn: ["/admin/login", "/login"],
	},

	session: {
		strategy: "jwt",
	},
};

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

---

File: /app/admin/login/page.tsx

// imports
const AdminLoginPage: React.FC = () => {
	return <SuperAdminLoginTemplate />;
};

export default AdminLoginPage;

---

SuperAdminLoginTemplate Component:

"use client";
//...imports
const SuperAdminLoginTemplate: React.FC = (props) => {
	//...hooks and functions
	const onSubmit = useCallback(async (data: FormValuesProps) => {
		try {
			const result = await signIn("credentials", {
				redirect: false,
				email: data.email,
				password: data.password,
				for: "superadmin",
			});
			if (result &&
 result.error && result.error.length > 0) {
				throw new Error(result.error);
			} else {
				reset();
                                //success
			}
		} catch (error) {
			//handle error
		}
	}, []);

	const renderHead = (
	   //some component
	);

	const renderForm = (
                //form component
	);

	return (
		<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
			{renderHead}
			{renderForm}
		</FormProvider>
	);
};

export default SuperAdminLoginTemplate;

What do I do in UserLoginTemplateComponent?

Contributing 🙌🏽

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

[meyer0x]

Any plans?

[msobkyy]

same issue

[Zakisb]

Seems like next auth has a lot of limitations .

[Zakisb]

I'm having trouble setting it up to my use case, but it really forces you to do things in a certain way....

[gersur]

This person also have the same problem:
https://www.reddit.com/r/nextjs/comments/13f7zfc/multiple_login_page_with_nextauth_and_calling/

I'm also having this problem, my app needs 2 roles of user: admin and user
Right now, I can make the nextauth to login with different API url

User

await signIn<"credentials">("credentials", {
      username: data.get("username")!.toString(),
      password: data.get("password")!.toString(),
      redirect: false,
      role: "user",
      callbackUrl: "/",
    });

Admin

await signIn<"credentials">("credentials", {
      username: data.get("username")!.toString(),
      password: data.get("password")!.toString(),
      redirect: false,
      role: "admin",
      callbackUrl: "/admin/dashboard",
    });

In NextAuthOptions I can create if in the authorize property

if (credentials.role == "admin") {
          const res = await api.POST("/api/v1/auth/admin/login", {
            body: credentials,
            headers: { "Content-Type": "application/json" },
          });
        } else if (credentials.role == "user") {
          const res = await api.POST("/api/v1/auth/user/login", {
            body: credentials,
            headers: { "Content-Type": "application/json" },
          });
        }

BUT, the problem, nextauth only support ONE session only.
So when admin wants to access user page, they need to logout first, which is not ideal.
Can anyone resolve this issue?

If Nextauth able to support override session cookie name, that would be great!

[arkhamRejek]

Just ran into this, seems like no obvious solution right now

[codebdy]

same issue, any plans?

[craig-malcolm721]

I had the same problem. The easiest solution I had was to turn redirect OFF for the admin user login page, and leave redirect ON for the standard users.

My pages looked like this:

  pages: {
      signIn: '/login',
  },

which meant that standard users would be redirected to their standard login page at /login.

This is how I call signIn for standard users:

  await signIn('basic', {
      redirect: true, 
      email, 
      password, 
      callbackUrl
  });

For admin users, I would manually check the results of the sign-in. If it's a success, I'd use next/navigation's useRouter to redirect them to the /admin page. If it was not a success, I'd use a state to show some kind of error message.

See this code for the admin:

'use client'

// libraries 
import { useState } from "react";
import { useRouter } from "next/navigation";

// styles 
import reusableStyles from '@/Reusables/css/reusableStyles.module.css';
import { signIn } from "next-auth/react";

const AdminVerify = () => {

    const router = useRouter();

    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);

    const onSubmit = async (e) => {
        e.preventDefault();
        if(!isLoading) {
            setIsLoading(true);
            try {
                const verificationCode = e.target.elements.verificationCode.value;
                const res = await signIn('admin', {
                    redirect: false, 
                    verificationCode, 
                    callbackUrl: '/admin'
                });

                // have to handle redirects for the admin login manually so not to be redirected back to standard /login page if failed signin
                if(!res?.error) {
                    router.push('/admin');
                } else {
                    setError("Oops! Looks like something was wrong with the code you entered. Check that you copied it correctly and that it has not expired.");
                }
                
            } catch (error) {
                setError(error.message);
            }
            setIsLoading(false);
        }
    };
    
    return (
        <section style={sectionStyle} onSubmit={onSubmit}>
            <form style={formStyle}>
                hello admin verification form

                <label htmlFor="verificationCode">Code</label>
                <input type='text' name="verificationCode" />

                <button className={`${reusableStyles.button} ${reusableStyles.blackButton}`}>
                    { isLoading ? '...' : 'Login' }
                </button>

                {error && <p style={{ color: 'red'}}>{error}</p>}
            </form>
        </section>
    );
};
export default AdminVerify;

It isn't the cleanest solution behind the scenes, but from a user experience standpoint - I have found this to be the most seamless method.

[Kalyankr]

Hi, anyone has update on this, I am trying to implement the same. Thank you in advance

[imvedanshmehra]

Facing the same issue, couldn't find any straightforward way to do this.