如何在 NextAuth 中登录成功时 return 一个页面
How to return a Page when login is success in NextAuth
我想在登录成功时 return 到特定页面,例如,当用户提供正确的凭据时,他们应该被重定向到特定页面让我们说 dashboard.js 而不是仅仅回到 index.js
index.js
<main >
{!session && <>
<h1>You are not signed in</h1> <br/>
<button onClick={signIn}>Sign in</button>
</>}
{session && <>
<h1>Signed in as {session.user.name} </h1> <br/>
<button onClick={signOut}>Sign out</button>
</>}
</main>
[...nextauth].js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
const options = {
providers: [
Providers.Credentials({
// The name to display on the sign in form (e.g. 'Sign in with...')
name: 'UserName',
// The credentials property is used to generate a suitable form on the sign in page.
credentials: {
username: { label: "Username", type: "text", },
password: { label: "Password", type: "password" }
},
async authorize(credentials) {
// Authentication Logic: local function, external API call, etc
const user = { name: credentials.username, password: credentials.password }
//checking the credititials
if( user.name!="admin" || user.password!="admin"){
return null;
}else{
return user;
}
}
})
],
session: {
jwt: true,
}
/*jwt: {
secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
} */
}
export default (req, res) => NextAuth(req, res, options);
调用 signIn
时,您可以传递一个对象作为第二个参数,其中包含一个 callbackUrl
,它定义了用户登录后将被重定向到的位置。
<button onClick={() => signIn('yourProviderHere', { callbackUrl: '/dashboard' })}>Sign in</button>
此处的 callbackUrl 文档:https://next-auth.js.org/getting-started/client#specifying-a-callbackurl
我想在登录成功时 return 到特定页面,例如,当用户提供正确的凭据时,他们应该被重定向到特定页面让我们说 dashboard.js 而不是仅仅回到 index.js
index.js
<main >
{!session && <>
<h1>You are not signed in</h1> <br/>
<button onClick={signIn}>Sign in</button>
</>}
{session && <>
<h1>Signed in as {session.user.name} </h1> <br/>
<button onClick={signOut}>Sign out</button>
</>}
</main>
[...nextauth].js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
const options = {
providers: [
Providers.Credentials({
// The name to display on the sign in form (e.g. 'Sign in with...')
name: 'UserName',
// The credentials property is used to generate a suitable form on the sign in page.
credentials: {
username: { label: "Username", type: "text", },
password: { label: "Password", type: "password" }
},
async authorize(credentials) {
// Authentication Logic: local function, external API call, etc
const user = { name: credentials.username, password: credentials.password }
//checking the credititials
if( user.name!="admin" || user.password!="admin"){
return null;
}else{
return user;
}
}
})
],
session: {
jwt: true,
}
/*jwt: {
secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
} */
}
export default (req, res) => NextAuth(req, res, options);
调用 signIn
时,您可以传递一个对象作为第二个参数,其中包含一个 callbackUrl
,它定义了用户登录后将被重定向到的位置。
<button onClick={() => signIn('yourProviderHere', { callbackUrl: '/dashboard' })}>Sign in</button>
此处的 callbackUrl 文档:https://next-auth.js.org/getting-started/client#specifying-a-callbackurl