How to Display Existing Email Address When OAuthAccountNotLinked Error Occurs?

[wodndb]

Hi everyone,

I’m using auth.js (next-auth v5) and encountered a situation where the following error is triggered:

OAuthAccountNotLinked: Another account already exists with the same e-mail address.

This happens when attempting to log in with an OAuth provider while the email already exists in the database.

I want to display a custom error page that shows which email address is causing the issue (e.g., “The email address example@gmail.com is already linked to another account”).

The reason for displaying the email address is to provide clarity to users. For example, users often have multiple email accounts and may not remember which one they used to sign up. By showing the conflicting email address, they can take appropriate action, such as logging in with the correct method or resetting their password.

Challenges

While creating a custom error page, I found that I can only determine the type of error through the error query parameter. However, there’s no way to access the email address directly from the error page.

Looking into the codebase, specifically in @auth/core/src/index.ts, it seems like when an AuthInternal process fails due to an OAuthAccountNotLinked error, the error type is appended to the query parameters for redirection. Would it be feasible to also include the error message and email address in the query parameters?

Sourcecode: Catch OAuthAccountNotLinked error and redirect to error page

// core/src/index.ts L163
try {
    const internalResponse = await AuthInternal(internalRequest, config)
    if (isRaw) return internalResponse

    const response = toResponse(internalResponse)
    const url = response.headers.get("Location")

    if (!isRedirect || !url) return response

    return Response.json({ url }, { headers: response.headers })
  } catch (e) {
    const error = e as Error
    logger.error(error)

    const isAuthError = error instanceof AuthError
    if (isAuthError && isRaw && !isRedirect) throw error

    // If the CSRF check failed for POST/session, return a 400 status code.
    // We should not redirect to a page as this is an API route
    if (request.method === "POST" && internalRequest.action === "session")
      return Response.json(null, { status: 400 })

    const isClientSafeErrorType = isClientError(error)
    const type = isClientSafeErrorType ? error.type : "Configuration"

    const params = new URLSearchParams({ error: type })
    if (error instanceof CredentialsSignin) params.set("code", error.code)

    const pageKind = (isAuthError && error.kind) || "error"
    const pagePath =
      config.pages?.[pageKind] ?? `${config.basePath}/${pageKind.toLowerCase()}`
    const url = `${internalRequest.url.origin}${pagePath}?${params}` // <-- Here

    if (isRedirect) return Response.json({ url })
    return Response.redirect(url)
  }
}

Alternatively, I’m considering using the signIn callback in auth.ts to intercept the email address during the login attempt. I could then query the database for the email and providerAccountId to manually check for duplicates. If a conflict is detected, I could redirect users to a custom error page with the relevant information included in the query parameters. (I haven’t tested this approach yet.)

However, I would prefer not to use the signIn callback for this purpose. The main reason is that auth.js already has internal logic for checking if an email is linked to another account, and duplicating this logic in the signIn callback feels redundant and overly complicated. It seems inelegant to replicate logic that is already handled within auth.js itself.

Psudocode: signin callback

export const {
  handlers,
  signIn,
  signOut,
  auth,
  unstable_update: update,
} = NextAuth({
  session: { strategy: 'jwt' },
  adapter: PrismaAdapter(prisma),
  pages: {
    signIn: '/auth/signin',
  },
  providers: [
    //...
  ],
  callbacks: {
    async signIn({ user, account, profile }) {
      const email = user?.email || profile?.email || '';

      switch (account?.provider) {
        case 'credentials':
        case 'resend':
          return true;

        case 'google':
        case 'kakao':
        case 'naver':
          const providerInDb = await getUserAccountProvider(email);

          if (providerInDb) {
            return `/auth/signin?error=OAuthAccountNotLinked&email=${email}&provider=${providerInDb}`;
          }
          return true;

        default:
          return false;
      }
    },
    async jwt({ token, trigger, session, account }) {
      //...
    },
    async session({ session, token }) {
      //...
    },
  },
});

Questions

1. Is there a secure way to retrieve the conflicting email address when this error occurs?
2. Would it be safe and practical to modify the error handling in @auth/core to include the email address in the query parameters?
3. Has anyone tried a similar workaround using the signIn callback, and does it work well in practice?

Any advice or insights would be greatly appreciated.

Thank you!