1

I'm having a very peculiar issue with my app...

I have OAuth 2 implemented with GitHub, Discord, and Google. Google and Discord work, but when I attempt with GitHub, it signs me into my Discord. This problem persists through development and production, and I triple checked callback URLs and Client IDs/Secrets, all correct.

Discord and Google providers work completely fine, but for some reason, when I try to sign in through GitHub, it either brings me into the GitHub authorization page like normal, lets me authorize, then signs me into my Discord, OR it just straight up skips any authorization page and signs me into my Discord.

Here is 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);
};

and the login page (although I tried it with the default providers login page as well and the same issue persists):

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>
  );
}

Here is the app deployment: https://survey-app-silk.vercel.app/

Repo: https://github.com/rreeves1996/survey-app

This is such a strange issue and has had me running around in circles trying to figure out how this is happening.

halfer
  • 19,824
  • 17
  • 99
  • 186
Ryan Reeves
  • 31
  • 2
  • What do you mean by "signs me in to my Discord"? What is the outcome that you expect and what do you actually get? – Michal Trojanowski Aug 11 '23 at 07:12
  • I'm not sure how to clarify that any more than I have already...I use the GitHub login button on the login page to sign me in via GitHub OAuth, and I end up logged into my Discord account instead of my GitHub account. The outcome is that I'm signed in via my Discord account, and I was expecting to be signed in via my GitHub. I'm sure it is replicable if you visit the deployment and try it yourself as well, as I've tried it on my phone and it has the same outcome. – Ryan Reeves Aug 11 '23 at 18:59
  • Are you sure this isn't a caching problem or some sort of this? I just tried to signup using github and it worked. It's nonsense to be able to login to discord through github in any way. – xTrimy Aug 13 '23 at 15:23

1 Answers1

2

I solved the issue - I agree it is nonsense to "sign in to Discord through GitHub." The reason I was having the issue was that I was using the default User model provided from generating a new Prisma schema, and in the default User model, it uses the email as a unique identifier. So, this obviously caused issues trying to sign in through a different provider when the email already existed as a unique identifier in the database. I changed the unique identifier in the schema to be the user id and the problem was fixed.

Ryan Reeves
  • 31
  • 2