(feat): custom signin page

[NiazMorshed2007]

This feature closes #5856 by adding custom login page.

What I included?

1. Configuration part

I added some configuration in the [...nextauth].js file to allow creating custom page in auth/signin. Changes I added 👇

const authOptions = {
// ...
  pages: {
    signIn: "/auth/signin",
  }
};

2. Design and connecting the login functionality part

Kept the design simple but I'm always open to redesign if you wish!

Can I see a screenshot?

Sure! Here is how it's currently look like:

How did I managed the login funtionality?

I followed the best practices from NextAuth documentation to implement this. Here is a little brief about it 👇:

1. First of all I imported these necessary functions and modules

import { getServerSession } from "next-auth/next"
import { getProviders, signIn } from "next-auth/react"
import { authOptions } from "pages/api/auth/[...nextauth]"

2. And then with getServerSideProps() function I checked if the user is already logged in or not. If the user is logged I sent them to / page and if not I pushed the providers in the props of the page

export async function getServerSideProps(context) {
    const session = await getServerSession(context.req, context.res, authOptions);

    // if the user is logged in redirect, (note: don't redirect to the same page otherwise it'll be in a infinite loop)
    if (session) {
        return { redirect: { destination: "/" } };
    }

    const providers = await getProviders();

    return {
        props: { providers: providers ?? [] },
    }
}

3. And then I grabbed the providers from the props and turned providers into an array using Object.values() and mapped over to display different auth providers. Notice the handleProviderIcon function here, it will check the provider name and render icon accordingly.

 {Object.values(providers).map((provider) => (
                    <button
                        key={provider.name}
                        onClick={() => signIn(provider.id)}
                        className="group relative transition-all flex gap-4 items-center w-full justify-center rounded-md bg-primary-medium p-3 text-sm font-medium text-white hover:bg-primary-medium/60 outline-none"
                    >
                        {handleProviderIcon(provider.name)} Continue with {provider.name}
                    </button>
 ))}

The handleProviderIcon function:

    const handleProviderIcon = (provider_name) => {
        if (provider_name === "GitHub") {
            return <BsGithub className="text-xl" />
        }
    }

That's is the wrap.
I look forward for reviews.
Thanks!🙌

[github-actions]

It's great having you contribute to this project

Welcome to the community 🤓

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

[ChinmayMhatre]

A couple of suggestion from my end :

• Add tailwind classes for both dark mode and light mode by using the :dark variant ( let me know if you need any help with this )
• Take into consideration the contrast ratio between the background and foreground elements. (when using bg-primary-high use text-primary-low or text-primary-low-medium) (use this website to test the contrast ratio: https://contrast-ratio.com)
• Use the colours from the tailwind css config to keep consistency

[NiazMorshed2007]

A couple of suggestion from my end

Thanks @ChinmayMhatre for the suggestion, I'll work on this when I get free, also I may reach out to you on EddieHub discrod for help :)

[NiazMorshed2007]

@ChinmayMhatre I've done some tweaking. Can you review it?

[ChinmayMhatre]

@ChinmayMhatre I've done some tweaking. Can you review it?

I'll take a look tommorow!

[ChinmayMhatre]

@NiazMorshed2007 please add screenshots of the page in light mode and dark mode

[NiazMorshed2007]

@ChinmayMhatre Sure thing!

The light version:

The dark version:

[ChinmayMhatre]

Ui looks good to me. Maybe @eddiejaoude can take a look for any more optimizations.

[eddiejaoude]

The formatting doesn't look quite right, can you check you are using our Prettier config in VScode

[NiazMorshed2007]

I've done the other requested changes. But before I commit I've the issue with prettier still. Is the configuration for prettier is the .prettierrc file? I got it empty

[eddiejaoude]

yep we use the default, that is fine, the plugin will work on save usually

[NiazMorshed2007]

Yeah, but it doesn't fix the formatting. I've pinged on discord about this issue.

[eddiejaoude]

Looks great 👍 some inline comments

[eddiejaoude]

A switch would be better here and then add a default at the end for a fallback login icon

[eddiejaoude]

But for now maybe just add a return out side of the if with a default key/secure icon

[NiazMorshed2007]

You mean like this?

const handleProviderIcon = (provider_name) => {
        if (provider_name === "GitHub") {
            return <BsGithub className="text-xl" />
        }

        return <LockIcon />
    }

[eddiejaoude]

yes 👍 , but you might want to add the same class to it also

[eddiejaoude]

Thank you 👍