React Academy · レッスン

Session管理とuseSession Hook

server componentsとclient componentsでsession dataにアクセスし、認証状態に応じてページを保護します。

「Session管理とuseSession Hook」はCoddyKit上の無料React Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

Auth.jsのセッション型

Auth.jsは2種類のセッション戦略をサポートしています。JWT（デフォルト。cookie内のステートレスなトークン）と、データベース（DB内のセッションレコード。サーバー側で無効化可能）です。

Client ComponentでのuseSession

useSession()は、現在のセッションを読み取るClient Component用フックです。data（セッション）、status（'loading' | 'authenticated' | 'unauthenticated'）、update関数を返します。

'use client';
import { useSession } from 'next-auth/react';

export function UserAvatar() {
  const { data: session, status } = useSession();
  if (status === 'loading') return <Spinner />;
  if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
  return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}

SessionProviderの設定

アプリ全体（またはClient Componentのサブツリー）をSessionProviderでラップすると、useSessionからセッションコンテキストにアクセスできます。

// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
  return <html><body><Providers>{children}</Providers></body></html>;
}

Server Componentでのauth()

Server Componentではauth()を直接使用します。フックもプロバイダーも必要ありません。サーバー側のcookieからセッションを読み取ります。

import { auth } from '@/auth';

export default async function Header() {
  const session = await auth();
  return (
    <nav>
      {session ? (
        <span>Hello, {session.user?.name}</span>
      ) : (
        <Link href="/login">Sign in</Link>
      )}
    </nav>
  );
}

Clientルートの保護

useSessionにrequired: trueオプションを指定すると、未認証のユーザーをサインインページへ自動的にリダイレクトできます。

'use client';
import { useSession } from 'next-auth/react';

export default function ProtectedPage() {
  const { data: session } = useSession({ required: true });
  // session is never null here — unauthenticated users are redirected
  return <div>Welcome, {session?.user?.name}</div>;
}

セッションの更新

useSessionが返すupdate()関数を呼び出すと、サインアウトして再度サインインすることなくセッションを更新できます（たとえばプロフィールを更新した後など）。

const { data: session, update } = useSession();

async function handleNameChange(newName: string) {
  await updateUserName(newName); // API call
  await update({ user: { name: newName } }); // refresh session
}

JWTセッションのコールバック

jwtコールバックを使用するとサインイン時にJWTトークンへカスタムデータを追加でき、sessionコールバックを使用するとそのデータをセッションオブジェクトに公開できます。

callbacks: {
  async jwt({ token, user }) {
    if (user) token.role = user.role; // add on first sign-in
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role as string;
    return session;
  },
},

セッションの有効期限

Auth.jsの設定でセッションの最大有効期間を設定します。JWTセッションは有効な間、リクエストごとに自動更新されます。

export const { handlers, auth } = NextAuth({
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60,   // refresh if older than 1 day
  },
});

データベースセッションの無効化

データベースセッションはサーバー側で取り消せるため、強制ログアウトに便利です。データベースからセッションレコードを削除すると、直ちに無効化できます。

// Server Action to log out all devices:
async function logOutAllDevices() {
  'use server';
  const session = await auth();
  if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
  redirect('/login');
}

Client Componentでのロールベースアクセス

useSessionからセッションのロールを読み取り、それに応じてUIを条件付きでレンダリングします。

const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';

return (
  <>
    {isAdmin && <AdminPanel />}
    <UserContent />
  </>
);

理解度チェック

Client ComponentでuseSession()を動作させるには、どのプロバイダーでアプリをラップする必要がありますか。

まとめ

Server Componentでセッションにアクセスするにはauth()を使用し、Client ComponentではSessionProviderでラップした上でuseSession()を使用します。JWTおよびsessionコールバックでカスタムデータを追加し、クライアント側ではupdate()でセッションを更新し、セッションの有効期限にはmaxAgeを設定します。

よくある質問

「Session管理とuseSession Hook」レッスンは無料ですか？

はい。「Session管理とuseSession Hook」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Session管理とuseSession Hook」で何を学びますか？

server componentsとclient componentsでsession dataにアクセスし、認証状態に応じてページを保護します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Session管理とuseSession Hook」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る