How to create a custom sign-in page in Auth.js?

[kjetilhartveit]

What is the improvement or update you wish to see?

The examples on https://authjs.dev/guides/basics/pages depicting custom sign-in pages "OAuth Sign In" and "Email Sign In" are no longer working because getProviders and getCsrfToken are no longer exported from next-auth/react.

They seem to be marked with @internal, maybe that's why they're not exported?

A type I also have used on the page which is missing is SignInErrorTypes which I previously imported from next-auth/core/pages/signin. This was useful to show the error message if there was an error in the query parameter. Although I wouldn't need the type if I just got an object with error types mapping to the error strings.

Is there any context that might help us understand?

I'm on next auth version 5.0.0-beta.3.

Does the docs page already exist? Please link to it.

https://authjs.dev/guides/basics/pages

[rorn-prometeus]

hi. can you show me the code example of all configutation include handle error message using credential provider please
i already implement but i can not catch the error message throw from authorize function.

[kjetilhartveit]

hi. can you show me the code example of all configutation include handle error message using credential provider please i already implement but i can not catch the error message throw from authorize function.

Note I'm posting directly to /api/auth/signin/email etc and aren't using the signIn() function.

The code for the error message looks like this (in getServerSideProps()):

const error = context.query["error"];
// the error messages are copied from somewhere in the NextAuth source code, don't remember where
const errors: Record<SignInErrorTypes, string> = {
	Signin: "Try signing in with a different account.",
	OAuthSignin: "Try signing in with a different account.",
	OAuthCallback: "Try signing in with a different account.",
	OAuthCreateAccount: "Try signing in with a different account.",
	EmailCreateAccount: "Try signing in with a different account.",
	Callback: "Try signing in with a different account.",
	OAuthAccountNotLinked:
		"To confirm your identity, sign in with the same account you used originally.",
	EmailSignin: "The e-mail could not be sent.",
	CredentialsSignin:
		"Sign in failed. Check the details you provided are correct.",
	SessionRequired: "Please sign in to access this page.",
	default: "Unable to sign in.",
};
const errorMessage =
	error && typeof error === "string" && errors[error as SignInErrorTypes];

[rorn-prometeus]

hi. can you show me the code example of all configutation include handle error message using credential provider please i already implement but i can not catch the error message throw from authorize function.

Note I'm posting directly to /api/auth/signin/email etc and aren't using the signIn() function.

The code for the error message looks like this (in getServerSideProps()):

const error = context.query["error"];
// the error messages are copied from somewhere in the NextAuth source code, don't remember where
const errors: Record<SignInErrorTypes, string> = {
	Signin: "Try signing in with a different account.",
	OAuthSignin: "Try signing in with a different account.",
	OAuthCallback: "Try signing in with a different account.",
	OAuthCreateAccount: "Try signing in with a different account.",
	EmailCreateAccount: "Try signing in with a different account.",
	Callback: "Try signing in with a different account.",
	OAuthAccountNotLinked:
		"To confirm your identity, sign in with the same account you used originally.",
	EmailSignin: "The e-mail could not be sent.",
	CredentialsSignin:
		"Sign in failed. Check the details you provided are correct.",
	SessionRequired: "Please sign in to access this page.",
	default: "Unable to sign in.",
};
const errorMessage =
	error && typeof error === "string" && errors[error as SignInErrorTypes];

did you have some experience on set up credentials login with custom page using beta version of authjs ? i set up it but it hard to catch error message when throw from authorize function. it throw error message in console when i throw error from it.

[daniel-farina]

I agree we need the docs here updated: https://authjs.dev/guides/basics/pages the serversideprops on inside app is not longer possible.

[SmileSydney]

So is it possible to have a custom signin page given getProviders is not exported in next-auth@5.0.0-beta.3? Does anyone know of the new sample code to use?

[srkuleo]

So is it possible to have a custom signin page given getProviders is not exported in next-auth@5.0.0-beta.3? Does anyone know of the new sample code to use?

I was asking myself the same question. Docs are in really bad shape atm, especially since Next14 and v5 changed the way you can handle authentication.

[misrasaurabh1]

Would really like a quick documentation or pointers of building custom auth pages. I am building a new website using authjs and I am stuck at this step.

[wunderlichh]

Hi, I'm using v5 in combination with Next 14. My custom login page is using the signin function created by NextAuth(). It's really straightforward when you are using server actions since the csrf stuff is handled for you internally. To get error and loading states working just use useFormState and useFormStatus.

[kjetilhartveit]

Hi, I'm using v5 in combination with Next 14. My custom login page is using the signin function created by NextAuth(). It's really straightforward when you are using server actions since the csrf stuff is handled for you internally. To get error and loading states working just use useFormState and useFormStatus.

Cool, thanks for letting me know about this. Will definitely try it soon, must port to app router first.

How would you get the list of enabled providers? Is this still possible? Am I missing something?

If there are documentation available that would be really helpful as well

[misrasaurabh1]

I'm a new nextjs and authjs user. Would it be possible to share a small snippet or to update the docs on how to get the custom Auth page working?

[kjetilhartveit]

I've managed to get it working with the app router. I don't know if it's possible with the pages router.

Here are some snippets for OAuth providers and the Email provider:

// SignInOAuthComponent.tsx

"use client";

import { useState, useTransition } from "react";
import { signInOAuth } from "actions/signin";

export default function SignInOAuthComponent() {
  const [error, setError] = useState(null);
  const [, startTransition] = useTransition();
  return <>
    {error && <div>{error}</div>}
    <button type="button" onClick={() => {
      startTransition(async () => {
        const result = await signInOAuth({
          providerId: 'google',
        });
        if (result?.status === "error") {
          setError(result.errorMessage);
        }
      });
    }}>
      Sign in with Google
    </button>
  </>
}

// SignInEmailComponent.tsx

"use client";

import { useFormState } from "react-dom";
import { signInEmail } from "actions/signin";

export default function SignInEmailComponent() {
  const [state, formAction] = useFormState(signInEmail, null);
  return <form action={formAction}>
    <label>
      E-mail address:
      <input type="email" name="email" />
    </label>
    <button type="submit">Sign in with email</button>
    {state?.status === "error" && (
      <p>{state.errorMessage}</p>
    )}
  </form>
}

// actions/signin.ts

import { redirect } from "next/navigation";
import {
	type RedirectableProviderType,
	type OAuthProviderType,
} from "next-auth/providers";

/**
 * Server action for OAuth sign in with AuthJS.
 */
export async function signInOAuth({ providerId }: { providerId: string }) {
	let redirectUrl: string | null = null;
	try {
                // note: could validate the providerId using something like zod to ensure only allowed providers are passed in
                // The signIn() function comes from NextAuth() in your auth.ts
		redirectUrl = await signIn(providerId satisfies OAuthProviderType, {
			redirect: false,
		});
		if (!redirectUrl) {
			return {
				status: "error",
				errorMessage: "Failed to login, redirect url not found",
			} as const;
		}
	} catch (error) {
		return {
			status: "error",
			errorMessage: "Failed to login",
		} as const;
	}

	redirect(redirectUrl);
}

export type SignInEmailResult =
	| {
			status: "error";
			errorMessage: string;
	  }
	| undefined;

/**
 * Server action for email sign in with AuthJS.
 */
export async function signInEmail(
	previousState: SignInEmailResult | null, // please the compiler..
	formData: FormData,
): Promise<SignInEmailResult> {
	let redirectUrl: string | null = null;
	try {
		const email = formData.get("email");
                // The signIn() function comes from NextAuth() in your auth.ts
		redirectUrl = await signIn("email" satisfies RedirectableProviderType, {
			redirect: false,
			email,
		});
		if (!redirectUrl) {
			return {
				status: "error",
				errorMessage: "Failed to sign in using email, redirect url not found",
			} as const;
		}
	} catch (error) {
		return {
			status: "error",
			errorMessage: "Failed to sign in using email.",
		} as const;
	}

	redirect(redirectUrl);
}