如何在 Next.js 中实现用户身份验证-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用程序中，用户身份验证是必不可少的功能。在 Next.js 中，我们可以使用多种方式来实现用户身份验证。本文将介绍使用 Next.js 官方推荐的身份验证库 next-auth 来实现用户身份验证的步骤以及注意事项。

什么是 `next-auth`？

next-auth 是一个开源的身份验证库，它提供了一种简单而灵活的方式来实现身份验证。它支持多种身份验证提供者，如 Google、Facebook、GitHub 等，也可以自定义身份验证提供者。

步骤

1. 安装 `next-auth`

在项目中安装 next-auth：

npm install next-auth

2. 创建身份验证提供者

在 pages/api/auth/[...nextauth].js 中创建身份验证提供者：

// www.javascriptcn.com code example
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

这里使用了 Google 作为身份验证提供者，可以根据需要添加其他提供者。

3. 创建登录页面

在 pages/login.js 中创建登录页面：

// www.javascriptcn.com code example
import { signIn } from 'next-auth/client';

export default function Login() {
  return (
    <div>
      <button onClick={() => signIn('google')}>Sign in with Google</button>
    </div>
  );
}

这里使用了 signIn 函数来实现登录功能。在点击按钮时，调用 signIn 函数并传入身份验证提供者名称，这里是 'google'。

4. 创建受保护页面

在 pages/protected.js 中创建受保护页面：

// www.javascriptcn.com code example
import { useSession } from 'next-auth/client';

export default function Protected() {
  const [session, loading] = useSession();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!session) {
    return <div>You need to sign in</div>;
  }

  return <div>Hello, {session.user.name}</div>;
}

这里使用了 useSession 钩子来获取当前用户信息。如果用户未登录，页面将显示一条消息提示用户需要登录。如果用户已登录，页面将显示用户的姓名。

5. 添加身份验证中间件

在 _app.js 中添加身份验证中间件：

// www.javascriptcn.com code example
import { Provider } from 'next-auth/client';

function MyApp({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

这里使用了 Provider 组件来将当前用户信息传递给应用程序的其他部分。

注意事项

1. 配置环境变量

在使用 Google 等身份验证提供者时，需要在环境变量中设置客户端 ID 和客户端密钥。可以在 .env.local 文件中添加以下内容：

GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret

2. 自定义页面

next-auth 默认提供了登录和注销页面，但是我们也可以自定义这些页面。只需在 pages 目录下创建一个与页面路径匹配的文件即可。例如，如果要自定义登录页面，可以在 pages/api/auth/signin.js 中创建文件。

3. 调用 API

在需要在服务器端调用 API 的情况下，可以使用 getSession 函数来获取当前用户的会话信息。例如：

// www.javascriptcn.com code example
import { getSession } from 'next-auth/client';

export default async function handler(req, res) {
  const session = await getSession({ req });

  if (session) {
    res.send(`Hello, ${session.user.name}`);
  } else {
    res.send('You need to sign in');
  }
}

示例代码

完整的示例代码可以在 GitHub 上找到。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d399b2a941bf71346df923

如何在 Next.js 中实现用户身份验证

什么是 next-auth？

步骤

1. 安装 next-auth