Just make your sign in page a server component, and put getProviders into the page component.
Then, create a client component the receives providers from the sign in page and handle the client-side logic (buttons and forms)

Thank you @fuma for guiding. Somehow not been able to make it work yet.

If it’s not working, feel free to show what you have done so far and what error you’ve got

I tried following this documentation - https://next-auth.js.org/configuration/initialization#route-handlers-app

to setup my route.js

And i am stuck at the part how to write "Just make your sign in page a server component, and put getProviders into the page component.
Then, create a client component the receives providers from the sign in page and handle the client-side logic (buttons and forms) "

Dont have much experience with Nextjs, so half the things fly over my head.

Hmm why do you need a custom refreshAccessToken?
Anyway if you want to create a custom signin page in App Router, here is an example:

In page.tsx

import { getProviders } from "next-auth/react";
import { Form } from "./form";

export default async function SigninPage() {
  // if you want to fetch list of providers
  const providers = await getProviders()

  return (
    <main className="container flex flex-col justify-center gap-4">
      <h1 className="text-xl font-bold">Login</h1>
      <p className="text-muted-foreground">
        Start your journey now on ALTMusic.
      </p>
      <Form providers={providers} />
    </main>
  );
}

in form.tsx

"use client";

import { Button } from "@/components/ui/button";
import { DiscordLogoIcon } from "@radix-ui/react-icons";
import { signIn } from "next-auth/react";
import { useSearchParams } from "next/navigation";

export function Form({ providers }) {
  const params = useSearchParams();

  // render other providers with `Object.values(providers).map`
  return (
    <div className="mt-4 flex flex-col sm:flex-row">
      <Button
        size="lg"
        onClick={() =>
          signIn("discord", {
            callbackUrl: params.get("callbackUrl") ?? "/dashboard",
          })
        }
      >
        <DiscordLogoIcon className="mr-2 w-5 h-5" />
        Login with Discord
      </Button>
    </div>
  );
}

Don't forget to update your NextAuth configuration:

export const authOptions = {
  pages: {
    signIn: "/auth/signin", // Link to your custom signin page
  },
};

@fuma - How do we get configured auth providers list in this code? For now I have only credentials, so for now, i might be able to proceed without any problem with that you have provided. Let me try them out. Regarding refreshAccessToken - the app was logging out whenever access token expires. This piece of code helped me to make sure new access token is obtained and used so user continues using the app.

For other auth providers, it is the same. Just edit the code in form.tsx

I've changed my code above