Nextauth

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

NextAuthとはNext.jsに認証機能を簡単に実装できるライブラリです。
GitHub, Google, Twitter, Facebook, Apple, Line, … などのアカウントを使用したソーシャルログインを実現できます。

インストール

npm install next-auth
# or
yarn add next-auth

`[...nextauth].js`

/pages/api/authに[...nextauth].jsを作成する．Next.jsを触っていればわかると思いますが，ダイナミックルーティングですべての設定がここで反映されます。

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export default NextAuth({
  // Configure one or more authentication providers
  providers: [　　　　　　　　　　　　　　　　　　　　　　　　 //👈ポイント➀
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here
  ],
callbacks: {
    async jwt(token, user, account, profile, isNewUser) {           //👈ポイント②
      if (account?.accessToken) {
        token.accessToken = account.accessToken;
      }
      return token;
    },
    async session(session, token) {                                 //👈ポイント③
      session.accessToken = (token as GenericObject).accessToken;
      return session;
    },
  },
})

ポイント➀

providersを設定しています。
サンプルでは GitHub を使用していますが、Google や Twitter を使用する場合もここで同様に設定します。

ポイント②

JWT が作成・更新された時に実行する処理を記述
token.accessToken に SingIn 時発行した accessToken を設定しています。

ポイント③

NextAuth.jsは、デフォルトでDBを使用せずJWTのみでセッション管理とユーザ情報の管理を行います。

それらを利用して、ログイン後に別のコンポーネントを表示させたり、ユーザーごとにクライアント側の処理を変更させる、というように簡単にクライアント側のみで動作のカスタマイズが可能です。

クライアント側からsession情報にアクセスするにはuseSession()を利用します。
session.accessToken に token.accessToken の値(ポイント ② で用意しておいたもの)を設定しています。

callbacksとは何かのアクションが実行されたタイミングで実行させたい処理を記述します。

`_app.js`

Providerを設定。
認証機能を使えるようにするために，SessionProviderを設定します

import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}