How to change the url for signin page in next-auth?-CodePudding

In Next.js project I've implemented authentication with Next-Auth.

In index.js (as the Next-Auth documentation explains) I return a User only if there is a session

export default function Home({characters}) {
    const {data: session} = useSession()

    return (
        <>
            <Meta
                description="Generated by create next app"
                title={!session ? "Home - Login" : `Home - ${session.user.name}`}
            />
            {session ? <User session={session} /> : <Guest/>}

        </>
    )
}

In the Guest component I have a Sign In button, and the onClick event points to the signIn method from "next-auth/react"

function Guest() {
    return <Layout className="flex flex-col h-screen">
        <div className="font-extrabold mb-4 text-3xl">GUEST USER</div>

        <Button onClick={() => signIn()}>Sign In</Button>

    </Layout>
}

as soon as I click that button I'm redirected to this pages/auth/signin.js page.

This is the page where I can login through EmailProvider or GoogleProvider


import { getCsrfToken, getProviders, signIn } from "next-auth/react"
import { Meta, Layout, Card, InputGroup, Button } from "../../components/ui";

export default function SignIn({ csrfToken, providers }) {
    return (
        <Layout>
            <Meta title="Login"/>
            <Card>
                <form method="post" action="/api/auth/signin/email">
                    <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
                    <InputGroup
                        type="email"
                        htmlFor="email"
                        label="Email"
                        name="email"
                    />
                    <Button type="submit">Sign in with Email</Button>
                </form>
                {Object.values(providers).map((provider) => {
                    if(provider.name === "Email") {
                        return
                    }
                    return (<div className="mt-3" key={provider.name}>
                        <Button onClick={() => signIn(provider.id)}>
                            Sign in with {provider.name}
                        </Button>
                    </div>)
                })}
            </Card>
        </Layout>
    )
}

export async function getServerSideProps(context) {
    const csrfToken = await getCsrfToken(context)
    const providers = await getProviders()
    return {
        props: { csrfToken, providers },
    }
}

When I'm in this page the url is http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000

I wanna know if it's possible to change that url to a more polite one like http://localhost:3000/login or something like this.

This page is already a custom login page as you can see in my [...nextauth].js

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

any suggestions? Thanks guys!

CodePudding user response：

Yes it should work. Lets say you put this in your [...nextauth].js options

  pages: {
    signIn: '/login'
  }

The signIn button will now redirect to /login.

Then you just have to put your login page under pages: pages/login.js.