NextAuth登录成功后如何返回页面

时间:2021-03-24 11:34:23

标签: reactjs next.js next-auth

我想在登录成功时返回特定页面,例如当用户提供正确的凭据时,他们应该被重定向到特定页面让我们说dashboard.js 而不是仅仅返回 index.js< /p>

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);

1 个答案:

答案 0 :(得分:0)

在调用 signIn 时,您可以传递一个对象作为第二个参数,其中包含一个 callbackUrl,它定义了用户登录后将被重定向到的位置。

<button onClick={() => signIn('yourProviderHere', { callbackUrl: '/dashboard' })}>Sign in</button>

此处为 callbackUrl 的文档:https://next-auth.js.org/getting-started/client#specifying-a-callbackurl