如何更改下一个认证登录页面的url ?

Question

在Next.js项目中，我已经使用Next-Auth实现了身份验证。

在<<p> strong> index.js (正如Next-Auth文档所解释的那样)只有当存在会话 时，我才返回User

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/>}
</>
)
}

在Guest组件中我有一个Sign In按钮，并且onClick事件指向signInnext-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>
}

只要我点击那个按钮，我就会被重定向到这个pages/auth/signin.js页面。

这是我可以通过EmailProvider或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 },
}
}

当我在这个页面的url是http://localhost:3000/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000

我想知道是否可以将url更改为更礼貌的url，如http://localhost:3000/login或类似的东西。

这个页面已经是一个自定义登录页面，你可以看到在我的[...nextauth].js

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

有什么建议吗?谢谢你们了!

Answer 1

是的，它应该工作。比如你把它放到[...nextauth].js选项

pages: {
signIn: '/login'
}

签到按钮现在将重定向到/login。

那么你只需要把你的登录页面放在pages:pages/login.js.