在 Next.js 中使用 Auth.js 实现 Github 登录

进击的松鼠
1,791 阅读4分钟

前言

Auth.js 官网中介绍到，Auth.js 是一个适用于 Next.js 应用程序的完整开源身份验证解决方案，从设计之初就支持 Next.js 和 Serverless。

Auth.js 是灵活且容易使用的，它可以与任何一种 OAuth 服务一起使用，如 OAuth 1.0、1.0A、2.0，同时支持当今流行的登录服务，如 Github、Twitter、Google 等，支持电子邮件和无密码形式的身份验证。

那么我们就以最经典的 Github 为例，在 Next.js 中实现 Github 登录并获取用户信息。

实现 Github 登录

安装依赖

首先，你得有一个 Next.js 项目，你可以参考 《配置一个 Next.js 项目模板，用于项目快速开发》 这篇文章创建一个项目模版，然后在此基础上使用 Auth.js 实现 Github 登录，当然你可以在自己的项目中去实现。

在项目根目录的命令行终端输入：npm i next-auth@beta 安装依赖。

截屏2024-05-08 22.07.22.png

然后在 src 目录中创建 auth.ts 文件，新增如下代码。

import NextAuth from 'next-auth'

import GitHub from 'next-auth/providers/github'

import type { NextAuthConfig } from 'next-auth'

export const config = {
  theme: {
    logo: 'https://next-auth.js.org/img/logo/logo-sm.png', // 默认logo可以更换
  },
  providers: [GitHub],
  basePath: '/auth',
  callbacks: {
    jwt({ token, trigger, session }) {
      if (trigger === 'update') token.name = session.user.name
      return token
    },
  },
} satisfies NextAuthConfig

export const { handlers, auth, signIn, signOut } = NextAuth(config)

其次在 src/app 文件夹下创建一个动态路由用于捕获后面所有的路由片段，即创建一个 [...nextauth] 文件夹，在该文件夹下创建 route.ts，在里面新增如下代码。

import { handlers } from '@/auth'
export const { GET, POST } = handlers

最后可以建一个登录页面用于测试，如创建 src/app/login/page.ts 文件，在里面新增如下代码。

import { auth, signIn, signOut } from '@/auth'
export default async function SignIn() {
  const session = await auth()

  if (session?.user) {
    return (
      <>
        <div>用户信息：{JSON.stringify(session.user)}</div>
        <div>
          <form
            action={async () => {
              'use server'
              await signOut()
            }}
            className="w-full"
          >
            <button>退出登录</button>
          </form>
        </div>
      </>
    )
  } else {
    return (
      <form
        action={async () => {
          'use server'
          await signIn()
        }}
      >
        <button type="submit">点击登录 GitHub</button>
      </form>
    )
  }
}

配置信息

完成上述操作之后，接下来需要登录 GitHub 配置一些必要的信息。

进入 GitHub 之后，打开 Settings 中的 Developer Settings，点击左侧的 OAuth Apps 后，再点击右边的按钮 New OAuth App，创建一个新的配置。

截屏2024-05-16 00.53.58.png

点击按钮之后会进入一个用于注册新的 OAuth 应用程序的页面。

截屏2024-05-16 01.02.27.png

其中 Application name 就是你的项目名称，Homepage URL 就是域名和端口号，在本地测试环境中直接写为 http://localhost:3000 就行，线上的话记着要换为真实的 IP 和端口号， Authorization callback URL 是授权的回调地址。

你可以参考上述图片的配置，然后点击注册应用按钮，GitHub 就会提供给我们一个 Client ID 和点击按钮生成的一个 Client secrets，把这两个参数存储到项目根目录中的 .env 文件中。

值得注意的是，我们还需要在 .env 中添加一个 AUTH_SECRET 密钥，这是官网明确要求的，AUTH_SECRET 可以通过命令 npx auth secret 帮我们随机生成一个。

截屏2024-05-16 01.48.42.png

然后把 auth 帮我们生成的密钥复制到 .env 文件中。

AUTH_SECRET=wfZ0QQGP6onmfPehXTZeFyOAkg0iwE7202TsxJTYiHA=
AUTH_GITHUB_ID=xxx
AUTH_GITHUB_SECRET=xxx

测试登录

安装完依赖并在 GitHub 中配置完信息获取到 Client ID 和 Client secrets 之后，就可以进入上述代码中新建的登录页面，在浏览器中输入 http://localhost:3000/login 进入登录页面。

截屏2024-05-16 02.17.18.png

点击登录 Github 按钮，就会显示如下页面。

截屏2024-05-16 01.57.06.png

这时候，点击 Sign in with Github 按钮之后，就会跳转到授权页面，再点击授权，授权成功后页面就会显示登录成功，然后就会继续回调到当前登录页面，显示用户信息。

截屏2024-05-16 01.58.57.png

总结

在 Auth.js 中实现 Github 登录只是其中登录方式的一种，还有多种登录方式都可以在 Auth.js 中去实现，如 Google、Twitter 登录等，甚至是邮箱登录都可以实现。

大家如果对其他登录方式感兴趣可以参照官网文档去实现，Auth.js 只是帮我们实现登录的一个途径，有其他好的想法也可以在评论区交流，如如何实现微信登录等。

avatar
文章
阅读
粉丝