Closed harleyharl closed 1 year ago
Hi, this is intended, as some errors are shown inline on the sign-in page to give the user the option to try to sign in again. See the possible error codes and which page they belong to at: https://next-auth.js.org/configuration/pages#error-codes
Hi, I'm having a similar issue to what's described and I have a custom signin page. The issue I'm experiencing is that when a user already has a linked account they redirect to /api/auth/signin?error=OAuthAccountNotLinked. My expectation is to be redirected to /auth/signin?error=OAuthAccountNotLinked. I may be missing something in the documentation though I read "The following errors are passed as error query parameters to the default or overridden sign-in page:" at the page you had linked above.
"next": "^13.4.14-canary.0", // Using App Router
"next-auth": "^4.23.0",
http://localhost:3000/auth/signin
export const authOptions: NextAuthOptions = {
adapter: PrismaAdapter(prisma),
//configure one or more auth providers
providers: [
GitHubProvider({
clientId: process.env.GITHUB_CLIENT_ID!,
clientSecret: process.env.GITHUB_CLIENT_SECRET!,
}),
DiscordProvider({
clientId: process.env.DISCORD_CLIENT_ID!,
clientSecret: process.env.DISCORD_CLIENT_SECRET!,
}),
CredentialsProvider({
name: "Credentials",
credentials: {
email: { label: "email", type: "text", placeholder: "email" },
password: {
label: "password",
type: "password",
placeholder: "password",
},
},
async authorize(credentials, req) {
const res = await fetch(`${process.env.NEXTAUTH_URL}/api/auth/signin`, {
method: "POST",
body: JSON.stringify(credentials),
headers: { "Content-Type": "application/json" },
});
const user = await res.json();
//no error and user exists
if (res.ok && user) {
return user;
}
//no valid user
return null;
},
}),
],
pages: {
signIn: '/auth/signin',
error: '/auth/signin',
},
secret: process.env.NEXTAUTH_SECRET,
callbacks: {
async session({ session }){
return session;
},
},
session: {
strategy: 'jwt'
}
}
import { signIn } from 'next-auth/react
const handleProviderSignIn = (
providerName: string
) => {
signIn(providerName, {
callbackUrl: process.env.VERCEL_URL || "http://localhost:3000",
});
};
Similar Question
Hi, I'm having a similar issue to what's described and I have a custom signin page. The issue I'm experiencing is that when a user already has a linked account they redirect to /api/auth/signin?error=OAuthAccountNotLinked. My expectation is to be redirected to /auth/signin?error=OAuthAccountNotLinked. I may be missing something in the documentation though I read "The following errors are passed as error query parameters to the default or overridden sign-in page:" at the page you had linked above.
Dependencies
"next": "^13.4.14-canary.0", // Using App Router "next-auth": "^4.23.0",
SignIn Page
http://localhost:3000/auth/signin
Steps to Reproduce:
- User with no account signs in with Github provider successfully
- User signs out
- User with account from Github provider signs in with Discord provider
- Discord requests authorization
- User is redirected to /api/auth/signin?error=OAuthAccountNotLinked
Expected Behavior:
- Users tries to sign in with different provider when account already exists
- User is redirected to /auth/signin?error=OAuthAccountNotLinked
NextAuth Options
export const authOptions: NextAuthOptions = { adapter: PrismaAdapter(prisma), //configure one or more auth providers providers: [ GitHubProvider({ clientId: process.env.GITHUB_CLIENT_ID!, clientSecret: process.env.GITHUB_CLIENT_SECRET!, }), DiscordProvider({ clientId: process.env.DISCORD_CLIENT_ID!, clientSecret: process.env.DISCORD_CLIENT_SECRET!, }), CredentialsProvider({ name: "Credentials", credentials: { email: { label: "email", type: "text", placeholder: "email" }, password: { label: "password", type: "password", placeholder: "password", }, }, async authorize(credentials, req) { const res = await fetch(`${process.env.NEXTAUTH_URL}/api/auth/signin`, { method: "POST", body: JSON.stringify(credentials), headers: { "Content-Type": "application/json" }, }); const user = await res.json(); //no error and user exists if (res.ok && user) { return user; } //no valid user return null; }, }), ], pages: { signIn: '/auth/signin', error: '/auth/signin', }, secret: process.env.NEXTAUTH_SECRET, callbacks: { async session({ session }){ return session; }, }, session: { strategy: 'jwt' } }
Custom signin handler uses
import { signIn } from 'next-auth/react const handleProviderSignIn = ( providerName: string ) => { signIn(providerName, { callbackUrl: process.env.VERCEL_URL || "http://localhost:3000", }); };
Can you check your basePath in the config and also the pages field ?
Hi! I'm stuck on the same page as OP. In which scenarios would next-auth redirect to /auth/error
(if it was the overridden error page) instead of /auth/signin
(if it was the overridden signin page)?
Question 💬
When I get errors during the OAuth login process, I'm sent back to this page:
http://localhost:3000/api/auth/signin?error=OAuthCallback
However, I want to redirect users to an error like this:
http://localhost:3000/auth/error?error=OAuthCallback
And I have a component defined at pages/auth/error to display the error and I've overridden the default error page like this in my configuration file (as shown in the docs):
I've found that if I overwrite the signIn page with "/auth/error" I can render the error page, but then that page is rendered on successful sign in too:
How to reproduce ☕️
pages/api/auth/[...nextAuth].ts
pages/auth/error
And the component where sign in is called (which is wrapped in a session provider, you get the idea):
Contributing 🙌🏽
Yes, I am willing to help answer this question in a PR