https://i.stack.imgur.com/9vt70.jpg

Encountering an error when trying to access my login page. Using the t3 stack with next auth and here is my [...nextauth].ts file

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",
  },
};

Showcasing the button that initiates the sign-in flow as per documentation guidelines

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

Also sharing the structure of the sign-in page

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

If you have any insights or advice, it would be greatly appreciated. Thank you!