Next.js Discord

Discord Forum

Next-auth error with Battlenet provider - [SIGNIN_OAUTH_ERROR]

Unanswered
German Longhaired Pointer posted this in #help-forum
Open in Discord
German Longhaired PointerOP
I'm getting the error [next-auth][error][SIGNIN_OAUTH_ERROR]. When I looked it up on the Next-auth website, it stated this:

SIGNIN_OAUTH_ERROR
This error occurs during the redirection to the authorization URL of the OAuth provider. Possible causes:

1. Cookie handling Either PKCE code verifier or the generation of the CSRF token hash in the internal state failed.
If set, check your cookies configuration, and make sure the browser is not blocking/restricting cookies.

2. OAuth misconfiguration
Please check your OAuth provider and make sure your URLs and other options are correctly set.

If you are using an OAuth v1 provider, check your OAuth v1 provider settings, especially the OAuth token and OAuth token secret.

3. openid-client version mismatch
If you are seeing expected 200 OK with body but no body was returned, it might have happened due to openid-client (which is a dependency we rely on) node version mismatch. For instance, openid-client requires >=14.2.0 for lts/fermium and has similar limits for the other versions. For the full list of the compatible node versions please see package.json.

The second option seem to align the most to my problem, but I'm stuck.

This is the code:

7 Replies

German Longhaired PointerOP
[...nextauth].ts

import { DefaultSession, NextAuthOptions, User, getServerSession } from "next-auth";
import BattleNetProvider from "next-auth/providers/battlenet"
import NextAuth from "next-auth/next";

declare module 'next-auth' {
    /**
     * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
     */
    interface Session { 
      accessToken?: string
    }
  }

export const authConfig: NextAuthOptions = {
    providers: [
        BattleNetProvider({
            clientId: process.env.BNET_CLIENT_ID!,
            clientSecret: process.env.BNET_CLIENT_SECRET!,
            issuer: "https://www.battlenet.com.cn/oauth"
        })
    ],
    callbacks: {
    async jwt({ token, account }) {
        // Persist the OAuth access_token to the token right after signin
        if (account) {
        token.accessToken = account.access_token
        }
        return token
    },
    async session({ session, token, user } )  {
        // Send properties to the client, like an access_token from a provider.
        session.accessToken = token.accessToken as string
        return session
    }
    },
    secret: process.env.JWT_SECRET
}

export default NextAuth(authConfig)


login-btn.tsx

import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
    const { data: session } = useSession()
    if (session) {
        return (
            <>
                Signed in as {session.user!.email} <br />
                <button onClick={() => signOut()}>Sign out</button>
            </>
        )
    }
    return (
        <>
            Not signed in <br />
            <button onClick={() => signIn()}>Sign in</button>
        </>
    )
}
_app.tsx
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'

export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return <SessionProvider session={session}>
    <Component {...pageProps} />
  </SessionProvider>
}
German Longhaired PointerOP
All I need is a template for the battlenet provider for next-auth. They seem to use some sort of authorize URI https://oauth.battle.net/authorize, but I'm unclear on how to use it.
Great Kiskadee
Try using battle.net's well-known to find their oidc-configuration file
@Great Kiskadee Try using battle.net's `well-known` to find their `oidc-configuration` file
German Longhaired PointerOP
I'm not sure what you mean. Apologies.
Great Kiskadee
Use OIDC with Next-Auth and point the url in the provider to Battle.net's OIDC config file at <root-url>/.well-known/<oidc-config>
@Great Kiskadee Use OIDC with Next-Auth and point the url in the provider to Battle.net's OIDC config file at `<root-url>/.well-known/<oidc-config>`
German Longhaired PointerOP
After tinkering a bit with the code, I realized that I provided the wrong issuer.

  BattleNetProvider({
            clientId: process.env.BNET_CLIENT_ID as string,
            clientSecret: process.env.BNET_CLIENT_SECRET as string,
            issuer: "https://us.battle.net/oauth"
        })


I am quite silly. Thank you for the help!