🕌

NextAuthを利用する

2023/12/31に公開

以前ネット上の記載などを参考にNextAuthを実装してみましたがバージョンが古いのかコンパイルでうまく動かなかったため、改めて公式を確認しながら動かします。

試したバージョン

$ npm list --depth=0 | grep next
next-auth-example@ /Users/kaikusakari/dev/test20231231/next-auth-example
├── next-auth@5.0.0-beta.4
├── next@14.0.4

サンプルアプリのREADMEを見ながら動かす。NextAuthの最新版は4.24.5だが、サンプルアプリはbetaでパッケージバージョンを指定していたので、そのまま試します。

今回はGoogleのソーシャルログインを使うのでGoogleの認証情報を更新する

$ cat .env.local
AUTH_SECRET=XXXXX
AUTH_GOOGLE_ID=AAAAAAAAAA
AUTH_GOOGLE_SECRET=BBBBBBBBBB

ソースコードを見るとGithubのソーシャルログインが有効になっていたのでGoogleのソーシャルログインを有効にする

auth.ts

・・・略・・・
import Google from "next-auth/providers/google"
・・・略・・・
Google,
・・・略・・・

実行

$ npm run dev

想定通り動きました

デフォルトだとユーザーを一意に特定できる情報がないため、NextAuthのコールバックの中でSubjectクレームを取得してIDとして管理するようにします。

公式にサンプルがあるため、それを修正していきます。

公式サンプル

...
callbacks: {
  async session({ session, token, user }) {
    // Send properties to the client, like an access_token and user id from a provider.
    session.accessToken = token.accessToken
    session.user.id = token.id
    
    return session
  }
}
...

注意書きにセッションのコールバックでトークンの情報を使う場合は事前にJWTのコールバックを実装する必要がある。とのことでそのように実装します。公式はJavaScriptですがTypeScriptでコンパイルエラーが出ない程度に修正しています。

auth.ts

  callbacks: {
    async jwt({ token, account, profile }) {
      if (account && profile?.id) {
        token.accessToken = account.access_token
        token.id = profile.id
      }
      return token
    },
    async session({session, token }) {
      if(session.user) {
        session.user.id = token.sub as string
      }
      return session
    }
  }

こちらを実装して、クライアント側でセッション情報を見た時にidが入っていること確認できました(idの中身はトークンのSubjectクレーム)。

クライアント側の画面表示

console.logでセッション情報を参照した場合の表示

セッション情報

{
  user: {
  name: '草苅快',
  email: 'kai.kusakari@gmail.com',
  image: 'https://lh3.googleusercontent.com/a/ACg8ocLDHSIwQIe-CwXTqt9GkE24742R2Z4z8VohY7j3HJcRjQ=s96-c',
  id: '107136224978590672033'
},
  expires: '2024-01-30T07:26:47.378Z'
}

NextAuthの認証の仕組みの大枠は理解できました。ドキュメントを読み込んで利用していきたい。

試したバージョン

今回はGoogleのソーシャルログインを使うのでGoogleの認証情報を更新する

実行

Discussion