当我尝试访问我的登录页面时，由于某种原因出现此错误。我正在使用t3堆栈与next auth。这是我的[... nextauh].ts文件

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
      }
      return session;
    },
  },
  // Configure one or more authentication providers
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
    /**
     * ...add more providers here
     *
     * Most other providers require a bit more work than the Discord provider.
     * For example, the GitHub provider requires you to add the
     * `refresh_token_expires_in` field to the Account model. Refer to the
     * NextAuth.js docs for the provider you want to use. Example:
     * @see https://next-auth.js.org/providers/github
     */
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

下面是用于启动登录流程的按钮（根据文档，发送用户登录页面）

<ul>
... other buttons ...
  <li>
    <button onClick={() => {
      session ? signOut() : signIn()
    }} className="bla bla bla"/>
  </li>
</ul>

这里是登录页面

const SignIn: NextPage<{ providers: AppProps }> = ({ providers }) => {
    return (
        <>
            <main className="h-screen">
                <div className="container h-full px-6 py-24">
                    <div
                        className="g-6 flex h-full flex-wrap items-center justify-center lg:justify-between">
                        <div className="md:w-8/12 lg:ml-6 lg:w-5/12">
                            <form>
                                <div className="relative mb-6" data-te-input-wrapper-init>
                                    <input
                                        type="text"
                                        className="bla bla bla"
                                        id="exampleFormControlInput3"
                                        placeholder="Email address" />
                                    <label
                                        htmlFor="exampleFormControlInput3"
                                        className="bla bla bla"
                                    >Email address
                                    </label>
                                </div>
                                <div className="mb-6 flex items-center justify-between">
                                    <div className="bla bla bla">
                                        <input
                                            className="bla bla bla"
                                            type="checkbox"
                                            value=""
                                            id="exampleCheck3"
                                            checked />
                                        <label
                                            className="bla bla bla"
                                            htmlFor="checkBox">
                                            Remember me
                                        </label>

                                        <button
                                            type="submit"
                                            className="bla bla bla"
                                            data-te-ripple-init
                                            data-te-ripple-color="light">
                                            Send sign-in email link
                                        </button>

                                        <div
                                            className="bla bla bla">
                                            <p
                                                className="bla bla bla">
                                                OR
                                            </p>
                                        </div>

                                        <div>
                                            {Object.values(providers).map((provider) => (
                                                <button
                                                    data-te-ripple-init
                                                    data-te-ripple-color="light"
                                                    className="bla bla bla"
                                                    style={{ backgroundColor: "#3b5998" }}
                                                    key={provider.id}
                                                    onClick={() => signIn(provider.name, {
                                                        callbackUrl: `${window.location.origin}`
                                                    })}>
                                                    Sign in with {provider.name}
                                                </button>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
};

export default SignIn;

export const getServerSideProps: GetServerSideProps = async () => {
    const providers = await getProviders();
    return {
        props: { providers },
    };
};

任何帮助将不胜感激。谢谢你！