Import trace for requested module:
./src/app/account/signin/page.tsx
 ⨯ ./src/app/account/signin/page.tsx
Error: 
  × "getServerSideProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching
  │ 
  │ 
    ╭─[/Users/USER/PATH/TO/WEBSITE/CODE/src/app/account/signin/page.tsx:21:1]
 21 │   );
 22 │ }
 23 │ 
 24 │ export async function getServerSideProps(context: GetServerSidePropsContext) {
    ·                       ──────────────────
 25 │   const session = await auth(context);
 26 │ 
 27 │   // If the user is already logged in, redirect.
    ╰────

├── @prisma/client@5.8.1
├── @types/next-auth@3.15.0
├── @types/node@20.11.6
├── @types/react@18.2.48
├── @types/react-dom@18.2.18
├── bun-types@1.0.25
├── dotenv@16.4.0
├── eslint@8.56.0
├── eslint-config-next@14.0.4
├── next@14.1.0
├── next-auth@5.0.0-beta.5
├── prisma@5.8.1
├── react@18.2.0
├── react-dom@18.2.0
└── typescript@5.3.3

export default function SignIn() {
    // getServerSideProps
    return (
        <>
            {Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => signIn(provider.id)}>
                Sign in here with {provider.name}
                    </button>
                </div>
            ))}
        </>
    );
}

export default async function SignIn() {
    const session = await auth();

    // If the user is already logged in, redirect.
    // Note: Make sure not to redirect to the same page
    // To avoid an infinite loop!
    if (session) {
        redirect("/account/guilds/")
    }

    const providers = await getProviders();

    return (
        <>
            {Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => signIn(provider.id)}>
                Sign in here with {provider.name}
                    </button>
                </div>
            ))}
        </>
    );
}

⨯ src/app/account/signin/page.tsx (15:37) @ getProviders
 ⨯ TypeError: (0 , next_auth_react__WEBPACK_IMPORTED_MODULE_1__.getProviders) is not a function
    at SignIn (./src/app/account/signin/page.tsx:22:90)
  13 |  }
  14 |
> 15 |  const providers = await getProviders();
     |                                     ^
  16 |
  17 |  if (!providers) {
  18 |          return redirect("/");

export default async function SignIn() {
    const session = await auth();

    // If the user is already logged in, redirect.
    // Note: Make sure not to redirect to the same page
    // To avoid an infinite loop!
    if (session) {
        redirect("/account/guilds/")
    }

    return <SignInForm />
}

// signin-form.tsx
'use client';

export default function SignInForm() {
  const providers = getProviders();

  return (
      <>
          {Object.values(providers).map((provider) => (
              <div key={provider.name}>
                  <button onClick={() => signIn(provider.id)}>
              Sign in here with {provider.name}
                  </button>
              </div>
          ))}
      </>
  );
}

getCsrfToken and getProviders are still available as imports, but we plan to deprecate them in the future and introduce a new API to get this data server-side.

Client-side: Instead of using these APIs, you can make a fetch request to the /api/auth/providers and /api/auth/csrf endpoints respectively.

export default async function SignIn() {
    const session = await auth();

    // If the user is already logged in, redirect.
    // Note: Make sure not to redirect to the same page
    // To avoid an infinite loop!
    if (session) {
        return redirect("/account/guilds/");
    }

    const providers = await fetch("")

    if (!providers) {
        return redirect("/");
    }

    <SignInForm />;
}

Type '{ providers: Response; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'providers' does not exist on type 'IntrinsicAttributes'.ts(2322

 const providersResponse = await fetch("")
 const providers = await providersResponse.json()

{"discord":{"id":"discord","name":"Discord","type":"oauth","signinUrl":"http://localhost:3000/api/auth/signin/discord","callbackUrl":"http://localhost:3000/api/auth/callback/discord"}}

type Provider = {
  id: string,
  name: string,
  type: string,
  signinUrl: string,
  callbackUrl: string
}

"use client";

import { signIn } from "next-auth/react";

type Provider = {
    id: string,
    name: string,
    type: string,
    signinUrl: string,
    callbackUrl: string
}

export default function SignInForm({ providers }: { providers: Provider[] }) {
    return (
        <>
            {Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => signIn(provider.id)}>
                Sign in here with {provider.name}
                    </button>
                </div>
            ))}
        </>
    );
}

"use server";

import { redirect } from "next/navigation";
import { auth } from "~/lib/auth.ts";
import SignInForm from "~/Components/Auth/signin-form.tsx";

export default async function SignIn() {
    const session = await auth();

    // If the user is already logged in, redirect.
    // Note: Make sure not to redirect to the same page
    // To avoid an infinite loop!
    if (session) {
        return redirect("/account/guilds/");
    }

    const providerResponse = await fetch("http://localhost:3000/api/auth/providers");

    if (!providerResponse.ok) {
        return redirect("/");
    }

    const data = await providerResponse.json();

    console.log(data);

    <SignInForm providers={data}/>;
}

"use client";

import { signIn } from "next-auth/react";

type Provider = {
    id: string,
    name: string,
    type: string,
    signinUrl: string,
    callbackUrl: string
}

export default function SignInForm({ providers }: { providers: Provider[] }) {
    return (
        <>
            {Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => signIn(provider.id)}>
                Sign in here with {provider.name}
                    </button>
                </div>
            ))}
        </>
    );
}