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

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

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

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

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

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をユーザー情報に追加しています。

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

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

フロント側で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>
}

参考

• https://next-auth.js.org/getting-started/client
• https://next-auth.js.org/configuration/callbacks#session-callback