六、NextAuth.js 简述

简介

• 简单的说，NextAuth.js 是用于 Next.js 应用程序的完整开源身份验证解决方案。支持 OAuth 1.0、1.0A、2.0 和 OpenID Connect。
• 项目GitHub，https://github.com/nextauthjs/next-auth

创建一个 NextAuth

• 这里直接再Github上下载 template 来生成测试项目： https://github.com/nextauthjs/next-auth-typescript-example
• 提示，可以直接在 Github 的 Codespace 上打开
• yarn install && yarn dev
• 如果遇到 It looks like you're trying to use TypeScript but do not have the required package(s) installed. 错误的解决办法：

当前的 "@types/react": "^18.0.27" 尝试修改成 18.0.1

yarn remove @types/react
yarn add --dev @types/[email protected]

添加一个API路由

• pages/api/auth/[...nextauth].js 是项目的全局配置文件。

配置 authentication providers

• 在 providers 属性中，可以看到支持 EmailProvider,AppleProvider,Auth0Provider,FacebookProvider,GithubProvider,GoogleProvider,TwitterProvider 等。
• 可以通过 options documentation 了解更多内容。
• 提示内建的 providers 列表：
  42 School,Amazon Cognito,Apple,Atlassian,Auth0,Authentik,Azure Active Directory,Azure Active Directory B2C,Battle.net,Box,BoxyHQ SAML,Bungie,Coinbase,Discord,Dropbox,EVE Online,Facebook,FACEIT,Foursquare,Freshbooks,FusionAuth,GitHub,GitLab,Google,HubSpot,IdentityServer4,Instagram,Kakao,Keycloak,LINE,LinkedIn,Mail.ru,Mailchimp,Medium,Naver,Netlify,Okta,OneLogin,Osso,Osu!,Patreon,Pinterest,Pipedrive,Reddit,Salesforce,Slack,Spotify,Strava,Todoist,Trakt,Twitch,Twitter,United Effects,VK,Wikimedia,WordPress.com,WorkOS,Yandex,Zitadel,Zoho,Zoom,

配置全局 session state

• 改配置在 pages/_app.tsx 下，这实际上是Next.js的标定。
• 要想在子组件中共享 Session ，需要将
  组件放到顶层，也就是需要共享Session的子组件要在这个Provider下面。
• pages/_app.tsx 代码：

import { SessionProvider } from "next-auth/react"
import type { AppProps } from "next/app"
import "./styles.css"

// Use the  to improve performance and allow components that call
// `useSession()` anywhere in your application to access the `session` object.
export default function App({ Component, pageProps }: AppProps) {
  return (
    
      
    
  )
}

使用全局SESSION

• useSession 实例可以访问共享session数据， 用来维护session在多个页面间的更新和持久化。
• 举例：components/login-btn.jsx

import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} 

         signOut()}>Sign out
      
    )
  }
  return (
    <>
      Not signed in 

       signIn()}>Sign in
    
  )
}

后端 API Route

• 通过session保护后端API的路由，可以使用getServerSession() 来断定session的有效性，举例：

import { getServerSession } from "next-auth/next"
import { authOptions } from "./auth/[...nextauth]"
export default async (req, res) => {
  const session = await getServerSession(req, res, authOptions)
  if (session) {
    res.send({
      content:
        "This is protected content. You can access this content because you are signed in.",
    })
  } else {
    res.send({
      error: "You must be signed in to view the protected content on this page.",
    })
  }
}

使用 NextAuth.js 回调的可扩展性

• 例如，要将值从登录传递到前端、客户端，您可以结合使用会话和 jwt（ Json web token ） 回调，该回调在 pages/api/auth/[...nextauth].js 全局配置文件中：

callbacks: {
  async jwt({ token, account }) {
    // Persist the OAuth access_token to the token right after signin
    if (account) {
      token.accessToken = account.access_token
    }
    return token
  },
  async session({ session, token, user }) {
    // Send properties to the client, like an access_token from a provider.
    session.accessToken = token.accessToken
    return session
  }
}
...

• 这个的左右实际上是让开发者在调用getSession 或者 useSession 时可以随意对session返回值进行扩展，类似于一个 filter 的概念。

结束

• 接下来介绍 Next.js 的回调地址配置。