Next.js 使用NextAuth添加用户身份验证

在本文中，我们将学习如何在我们的NextJS项目中添加用户身份验证。NextJS是一个基于React的框架，它具有为Windows、Linux和mac等不同平台开发漂亮的Web应用程序的能力。动态路径的链接帮助有条件地渲染NextJS组件。

方法： 要在我们的项目中添加用户身份验证，首先我们需要安装nextauth模块。然后，我们将创建一个名为[…nextauth].js的动态文件。然后，我们将在此文件中添加不同的提供商用于身份验证。然后，我们将在我们的主页上添加登录和注销选项。

创建NextJS应用：

步骤1： 您可以使用以下命令创建一个新的NextJS项目：

npx create-next-app gfg

项目结构： 它会看起来像这样。

Next.js 使用NextAuth添加用户身份验证

步骤2： 使用以下命令安装NextAuth：

npm i next-auth

Next.js 使用NextAuth添加用户身份验证

步骤3： 现在转到 Google 开发者控制台并获取你的 Oauth API ID 和密钥。

Next.js 使用NextAuth添加用户身份验证

步骤4： 现在在页面/ api目录下创建一个名为auth的新文件夹。在文件夹中创建一个名为 […nextauth].js 的新文件，并在该文件中添加以下代码。

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
  
export default NextAuth({ 
      
  providers: [ 
    GoogleProvider({ 
      clientId: CLIENT_ID, 
      clientSecret: CLIENT_SECRET, 
    }), 
  ], 
})

在这里，我们首先从 next-auth 导入 NextAuth 和 GoogleProvider。然后，我们仅使用 Google 作为我们的身份验证提供者。

步骤5： 现在我们将在每个页面上添加 Provider，为此我们将在 _app.js 文件中添加 Provider。在你的 _app.js 文件中添加以下代码。

import { Provider } from "next-auth/client"
  
export default function App({ 
  Component, 
  pageProps: { session, ...pageProps }, 
}) { 
  return ( 
    <Provider session={session}> 
      <Component {...pageProps} /> 
    </Provider> 
  ) 
}

步骤6： 现在，我们可以在我们的首页上添加登录和退出按钮。为此，我们将使用useSession()钩子函数来检查用户是否已登录。我们将在我们的 index.js 文件中添加以下代码。

import { useSession, signIn, signOut } from "next-auth/client"
  
export default function Component() { 
  const { data: session } = useSession() 
  if (session) { 
    return ( 
      <> 
        <h1>GeeksforGeeks</h1> 
        <button onClick={() => signOut()}>Sign out</button> 
      </> 
    ) 
  } 
  return ( 
    <> 
      <h1>GeeksforGeeks</h1> 
      <button onClick={() => signIn()}>Sign in</button> 
    </> 
  ) 
}