Next.js Discord

Discord Forum

Custom SignIn page with NextAuth using App Router

Unanswered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
Hello, I am trying to create a custom sign in page with NextAuth, using the AppRouter

I've added the following on my options:

pages: {
        signIn: '/auth/signin',
    },


Then I created auth/signin/page.tsx with the following:

import { getServerAuthSession } from '@/server/auth';
import { getProviders } from 'next-auth/react';
import { redirect } from 'next/navigation';

export default async function SignInPage() {
    const session = await getServerAuthSession();
    const providers = await getProviders();

    if (session && session?.user) {
        redirect('/');
    }

    return (
        <>
            {Object.values(providers).map((provider) => (
                <div key={provider.name}>{provider.name}</div>
            ))}
        </>
    );
}


I am having the following TS error (shown in the image) No overload matches this call

Any ideas what could be happening?

4 Replies

@Giant Angora Hello, I am trying to create a custom sign in page with NextAuth, using the AppRouter I've added the following on my options: pages: { signIn: '/auth/signin', }, Then I created `auth/signin/page.tsx` with the following: import { getServerAuthSession } from '@/server/auth'; import { getProviders } from 'next-auth/react'; import { redirect } from 'next/navigation'; export default async function SignInPage() { const session = await getServerAuthSession(); const providers = await getProviders(); if (session && session?.user) { redirect('/'); } return ( <> {Object.values(providers).map((provider) => ( <div key={provider.name}>{provider.name}</div> ))} </> ); } I am having the following TS error (shown in the image) `No overload matches this call` Any ideas what could be happening?
Yellowhead catfish
change your auth.ts to be like this:
const providers: Provider[] = [GitHub, Discord];

export const providerMap = providers.map((provider) => {
  if (typeof provider === "function") {
    const providerData = provider();
    return { id: providerData.id, name: providerData.name };
  } else {
    return { id: provider.id, name: provider.name };
  }
});
and then map through providerMap like this: 
            {Object.values(providerMap).map((provider) => (
              <form
                key={provider.id}
                action={async () => {
                  "use server";
                  await signIn(provider.id, { redirect: false });
                }}
              >
                <button type="submit">
                  <span>Sign in with {provider.name}</span>
                </button>
              </form>
            ))}
Giant AngoraOP
I am using T3 stack, this is my auth.ts

import { DrizzleAdapter } from '@auth/drizzle-adapter';
import {
    getServerSession,
    type DefaultSession,
    type NextAuthOptions,
} from 'next-auth';
import { type Adapter } from 'next-auth/adapters';
import GithubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';

import { env } from '@/env';
import { db } from '@/server/db';
import { createTable } from '@/server/db/schema';

declare module 'next-auth' {
    interface Session extends DefaultSession {
        user: {
            id: string;
            // ...other properties
            // role: UserRole;
        } & DefaultSession['user'];
    }

    // interface User {
    //   // ...other properties
    //   // role: UserRole;
    // }
}

export const authOptions: NextAuthOptions = {
    callbacks: {
        session: ({ session, user }) => ({
            ...session,
            user: {
                ...session.user,
                id: user.id,
            },
        }),
    },
    adapter: DrizzleAdapter(db, createTable) as Adapter,
    providers: [
        GoogleProvider({
            clientId: env.GOOGLE_CLIENT_ID,
            clientSecret: env.GOOGLE_CLIENT_SECRET,
        }),
        GithubProvider({
            clientId: env.GITHUB_CLIENT_ID,
            clientSecret: env.GITHUB_CLIENT_SECRET,
        }),
    ],
    pages: {
        signIn: '/auth/signin',
    },
};

export const getServerAuthSession = () => getServerSession(authOptions);
still do what i told you to lol