Is there a proper way to use provider style (color, logo, etc) in a custom Auth.js sign-in page?

Question

I'm making a custom sign-in page, and I can make a button for each provider with the provider name in the button text, but I also wanted to set the button color and add the provider's logo.

I thought that this would be possible since that information is defined in the provider itself (i.e. https://github.com/nextauthjs/next-auth/blob/5a7c1bb2bbdbba776f1b3e9228e6f3b9a287aea6/packages/next-auth/src/providers/discord.ts#L47) but it seems that getProviders is returning a ClientSafeProvider (https://github.com/nextauthjs/next-auth/blob/5a7c1bb2bbdbba776f1b3e9228e6f3b9a287aea6/packages/next-auth/src/react/types.ts#L18) which doesn't include this style information?

Is there something I'm missing/a proper way to get the style information of a provider?

April#4516 · Answer

My code, if it matters: (to show what I'm doing to get the providers)

import styles from './page.module.css';

import '@radix-ui/themes/styles.css';
import { Text, Card, Heading, Flex, Separator, TextField } from '@radix-ui/themes';

import { redirect } from 'next/navigation';
import { getProviders } from "next-auth/react"
import { getServerSession } from "next-auth/next"
import { authOptions } from "../../api/auth/[...nextauth]/route";

import ProviderButton from './providerButton';
import EmailForm from './emailForm';

export default async function SignIn() {
    const session = await getServerSession(authOptions);
    
    if (session) {
        redirect('/');
    }

    const providers = await getProviders() ?? [];

    return (
        <Flex justify='center'>
            <Card className={styles.card} size='4'>
                <Heading size='6' mb='4'>
                    Sign in to {process.env.NEXT_PUBLIC_APP_NAME}
                </Heading>

                <EmailForm />

                <Separator my='4' size='4' />

                {Object.values(providers).map((provider) => (
                    <ProviderButton id={provider.id} name={provider.name} className={styles.providerButton} />
                ))}
            </Card>
        </Flex>
    )
}

Is there a proper way to use provider style (color, logo, etc) in a custom Auth.js sign-in page?

2 Replies