Next.js 13 GitHub OAuth无法正常工作,不知何故让我进入Discord?

chhkpiq4  于 2023-10-15  发布在  Git
关注(0)|答案(1)|浏览(123)

我的应用程序出了一个很奇怪的问题...
OAuth 2使用GitHub、Discord和Google实现。Google和Discord工作,但当我尝试使用GitHub时,它会让我进入我的Discord。这个问题在开发和生产过程中仍然存在,我检查了三次回调URL和客户端ID/Secrets,都正确。
Discord和Google提供商工作得很好,但由于某种原因,当我试图通过GitHub登录时,它要么像正常一样将我带入GitHub授权页面,让我授权,然后将我登录到我的Discord,或者它直接跳过任何授权页面并将我登录到我的Discord。
下面是我的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);
};

和登录页面(尽管我也尝试了默认的提供者登录页面,但同样的问题仍然存在):

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

以下是应用程序部署:https://survey-app-silk.vercel.app/
回购:https://github.com/rreeves1996/survey-app
这是一个如此奇怪的问题,让我在圈子里跑来跑去,试图弄清楚这是如何发生的。

rt4zxlrg

rt4zxlrg1#

我解决了这个问题-我同意“通过GitHub登录Discord”是无稽之谈。我出现这个问题的原因是我使用了生成新Prisma模式提供的默认User模型,在默认User模型中,它使用电子邮件作为唯一标识符。因此,当电子邮件已经作为唯一标识符存在于数据库中时,这显然会导致尝试通过其他提供商登录时出现问题。我将模式中的唯一标识符更改为用户ID,问题就解决了。

相关问题