There's a perplexing issue troubling my application...
The implementation of OAuth 2 with GitHub, Discord, and Google is causing some trouble. While Google and Discord authentication works smoothly, attempting to sign in via GitHub redirects me to Discord instead. This issue persists across both development and production environments, despite verifying the accuracy of callback URLs and Client IDs/Secrets multiple times.
Interestingly, the Discord and Google providers function without any hitches. However, when I try to log in through GitHub, it either directs me to the GitHub authorization page as expected, lets me authorize, and then signs me into Discord, or skips the authorization step altogether and lands me on Discord directly.
Looking at my server/api/auth.ts:
declare module "next-auth" {
interface Session extends DefaultSession {
user: DefaultSession["user"] & {
id: string;
// ...other properties
// role: UserRole;
};
}
// interface User {
// // ...other properties
// // role: UserRole;
// }
}
export const authOptions: NextAuthOptions = {
callbacks: {
session: ({ session, user }) => ({
...session,
user: {
...session.user,
id: user.id,
},
}),
},
adapter: PrismaAdapter(prisma),
providers: [
DiscordProvider({
clientId: env.DISCORD_CLIENT_ID as string,
clientSecret: env.DISCORD_CLIENT_SECRET as string,
}),
GithubProvider({
clientId: env.GITHUB_CLIENT_ID as string,
clientSecret: env.GITHUB_CLIENT_SECRET as string,
}),
GoogleProvider({
clientId: env.GOOGLE_CLIENT_ID as string,
clientSecret: env.GOOGLE_CLIENT_SECRET as string,
}),
],
pages: {
signIn: "/auth/login",
},
};
export const getServerAuthSession = (ctx: {
req: GetServerSidePropsContext["req"];
res: GetServerSidePropsContext["res"];
}) => {
return getServerSession(ctx.req, ctx.res, authOptions);
};
An analysis of the login page (though the default provider's login page was also tested, encountering the same issue):
export default function Login() {
return (
<div className="card mt-2 h-fit w-full shadow-xl lg:w-96">
<div className="card-body rounded-md bg-slate-800 pb-4">
<header>
<h3 className="mb-4 text-center text-4xl font-extralight uppercase tracking-widest text-slate-100">
Sign In
</h3>
</header>
<div className="divider my-0" />
<p className="text-center">
<strong>Sign in using OAuth 2:</strong>
</p>
<div className="my-2 flex flex-col gap-2">
<button
className="hover: btn btn-accent btn-block mb-2 border-slate-700 bg-slate-900 bg-opacity-30 hover:border-slate-700 hover:bg-slate-700 hover:bg-opacity-100"
onClick={() => void signIn("github")}
>
<AiFillGithub className="text-xl" /> Continue with GitHub
</button>
<button
className="btn btn-primary btn-block mb-2 bg-opacity-30 hover:bg-opacity-100"
onClick={() => void signIn("discord")}
>
<FaDiscord className="text-xl" /> Continue with Discord
</button>
<button
className="btn btn-block mb-2 border-slate-200 bg-blue-50 bg-opacity-30 text-white hover:bg-blue-50 hover:bg-opacity-100 hover:text-slate-900"
onClick={() => void signIn("google")}
>
<FcGoogle className="text-xl" /> Continue with Google
</button>
</div>
</div>
</div>
);
}
Application deployment can be accessed here:
Repository link: https://github.com/rreeves1996/survey-app
This peculiar issue has left me puzzled, chasing my tail to understand its root cause.