简介
- 简单的说，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/react@18.0.1
添加一个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 ，需要将<SessionProvider />
组件放到顶层，也就是需要共享Session的子组件要在这个Provider下面。
- pages/_app.tsx 代码：
import { SessionProvider } from "next-auth/react"
import type { AppProps } from "next/app"
import "./styles.css"
// Use the <SessionProvider> 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 (
<SessionProvider
// Provider options are not required but can be useful in situations where
// you have a short session maxAge time. Shown here with default values.
session={pageProps.session}
>
<Component {...pageProps} />
</SessionProvider>
)
}
使用全局SESSION
- useSession 实例可以访问共享session数据， <SessionProvider /> 用来维护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} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
后端 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
}
}
...
结束
