next-authでユーザー情報を追加する方法

Next.jsでは、ユーザー情報の管理に next-authというライブラリを使います。

ユーザー情報は、name,image,emailをデフォルトで取得できますが、任意の情報を追加する方法を解説します。

前提として、
・Javascriptの知識
・Next.jsの知識
がある方を対象としています。

任意のユーザー情報を追加する方法
ユーザー情報の呼び出し方
useSessionの使い方について
参考

任意のユーザー情報を追加する方法

next-authをインストールするとpages/api/auth/[...nextauth].js が自動で追加されます。このファイル内のNextAuth関数にコールバックのsessionを追加します。

session変数に値を追加することで、任意の値を設定することが可能になります。

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    // 任意のプロバイダーを記述
  ],
  // === ここが追加分 ===
  callbacks: {
    async session(session, token) {
      // この中で session に対して、任意の値を設定する。今回は accessToken を追加
      session.accessToken = token;
      return session;
    },
  },
  // === ここまでが追加分 ===
});

上記の例では、accessTokenをユーザー情報に追加しています。

sessionコールバック

第一引数のsessionには、ユーザーのセッションオブジェクトが格納されています。

{
  user: {
    name: string,
    email: string,
    image: uri
  },
  accessToken: string,
  expires: "YYYY-MM-DDTHH:mm:ss.SSSZ"
}

第二引数のtokenには、JWT（JSON Web Token）またはデータベースセッションを使用している場合にはユーザーオブジェクトが格納されています。

ユーザー情報の呼び出し方

フロント側でuseSessionを使ってユーザー情報を呼び出します。

import { useSession } from "next-auth/client"

export default function Component() {
  const [session, loading] = useSession()

  if (session) {
    return <p>Name: {session.user.name}, Token: {session.user.accessToken}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

useSessionの使い方について

useSessionは、ユーザーのログイン状態を確認することのできる React Hook で、"next-auth/client"から呼び出すことで使用できます。

import { useSession } from "next-auth/client"

export default function Component() {
  const [session, loading] = useSession()

  if (session) {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

[session, loading]について

sessin変数：ユーザーオブジェクトが格納されます。

loading変数：ユーザーオブジェクトを取得中はfalse、取得が完了するとtrueになります。