Amplify Gen 2の認証状態を管理する（第2回）— Zustand + React Routerで保護ルートを実装

npm install zustand react-router

// src/features/auth/stores/authStore.ts
import { create } from 'zustand'

interface User {
  id: string
  email: string
  displayName: string
  role: UserRole
  language: string
  displayTheme: string
  createdAt: string
  updatedAt: string
}

type UserRole = 'SUPER_ADMIN' | 'ORG_ADMIN' | 'MANAGER' | 'OPERATOR' | 'VIEWER' | 'ADMIN' | 'MEMBER'

interface AuthState {
  user: User | null
  isAuthenticated: boolean
  isLoading: boolean
  setUser: (user: User | null) => void
  setLoading: (loading: boolean) => void
  clear: () => void
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  isAuthenticated: false,
  isLoading: true, // 初期値はtrue — 認証チェック完了まで
  setUser: (user) =>
    set({
      user,
      isAuthenticated: user !== null,
      isLoading: false,
    }),
  setLoading: (isLoading) => set({ isLoading }),
  clear: () =>
    set({
      user: null,
      isAuthenticated: false,
      isLoading: false,
    }),
}))

アプリ起動
  ↓
isLoading: true → スピナー表示
  ↓
getCurrentUser() 完了
  ├─ セッションあり → isAuthenticated: true → メイン画面
  └─ セッションなし → isAuthenticated: false → ログイン画面

// src/app/Root.tsx
import { useEffect, useCallback } from 'react'
import { BrowserRouter } from 'react-router'
import { QueryClientProvider } from '@tanstack/react-query'
import { useAuth } from '../features/auth/hooks/useAuth'
import { useSessionTimeout } from '../features/auth/hooks/useSessionTimeout'
import { App } from './App'

function AuthInitializer({ children }: { children: React.ReactNode }) {
  const { checkCurrentUser, signOut } = useAuth()

  // セッションタイムアウト時のコールバック
  const handleSessionTimeout = useCallback(async () => {
    await signOut()
    window.location.href = '/login'
  }, [signOut])

  useSessionTimeout(handleSessionTimeout)

  // アプリ起動時に現在のユーザーを確認
  useEffect(() => {
    checkCurrentUser()
  }, [checkCurrentUser])

  return <>{children}</>
}

export function Root() {
  return (
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <AuthInitializer>
            <App />
          </AuthInitializer>
        </BrowserRouter>
      </QueryClientProvider>
    </ErrorBoundary>
  )
}

// src/features/auth/components/ProtectedRoute.tsx
import { Navigate, Outlet, useLocation } from 'react-router'
import { useAuthStore } from '../stores/authStore'
import { LoadingSpinner } from '../../shared/components/LoadingSpinner'

export function ProtectedRoute() {
  const { isAuthenticated, isLoading } = useAuthStore()
  const location = useLocation()

  // 認証チェック中はスピナー表示
  if (isLoading) {
    return <LoadingSpinner />
  }

  // 未認証ならログインページへ（現在のパスを保存）
  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />
  }

  // 認証済みなら子ルートをレンダリング
  return <Outlet />
}

const location = useLocation()
const from = (location.state as { from?: Location })?.from?.pathname ?? '/'

// ログイン成功後
navigate(from, { replace: true })

// src/features/auth/components/AdminRoute.tsx
import { Navigate, Outlet } from 'react-router'
import { useAuthStore } from '../stores/authStore'
import { LoadingSpinner } from '../../shared/components/LoadingSpinner'

function isAdminRole(role: UserRole): boolean {
  return ['SUPER_ADMIN', 'ORG_ADMIN', 'ADMIN'].includes(role)
}

export function AdminRoute() {
  const { user, isLoading } = useAuthStore()

  if (isLoading) {
    return <LoadingSpinner />
  }

  // 未認証 or 管理者でなければホームへ
  if (!user || !isAdminRole(user.role)) {
    return <Navigate to="/" replace />
  }

  return <Outlet />
}

// src/app/routes.tsx
import { Routes, Route } from 'react-router'
import { ProtectedRoute } from '../features/auth/components/ProtectedRoute'
import { AdminRoute } from '../features/auth/components/AdminRoute'
import { AppLayout } from './AppLayout'
import { LoginForm } from '../features/auth/components/LoginForm'
import { RegisterForm } from '../features/auth/components/RegisterForm'
import { PasswordResetForm } from '../features/auth/components/PasswordResetForm'

export function AppRoutes() {
  return (
    <Routes>
      {/* パブリックルート — 誰でもアクセス可能 */}
      <Route path="/login" element={<LoginForm />} />
      <Route path="/register" element={<RegisterForm />} />
      <Route path="/password-reset" element={<PasswordResetForm />} />

      {/* 保護されたルート — 認証必須 */}
      <Route element={<ProtectedRoute />}>
        <Route element={<AppLayout />}>
          <Route path="/" element={<ChatContainer />} />
          <Route path="/profile" element={<ProfileSettings />} />

          {/* 管理者ルート — ADMIN以上のみ */}
          <Route element={<AdminRoute />}>
            <Route path="/admin" element={<AdminDashboard />} />
            <Route path="/admin/users" element={<UserList />} />
            <Route path="/admin/audit-log" element={<AuditLogView />} />
          </Route>
        </Route>
      </Route>
    </Routes>
  )
}

Routes
├── /login, /register, /password-reset  ← パブリック（誰でもOK）
└── ProtectedRoute                       ← 認証チェック
    └── AppLayout                        ← サイドバー等の共通レイアウト
        ├── /, /profile                  ← 一般ユーザー
        └── AdminRoute                   ← 管理者チェック
            └── /admin, /admin/users     ← 管理者のみ

// src/features/auth/hooks/useSessionTimeout.ts
import { useEffect, useRef, useCallback } from 'react'

const SESSION_TIMEOUT = 30 * 60 * 1000 // 30分
const ACTIVITY_EVENTS = ['mousedown', 'keydown', 'touchstart', 'scroll'] as const

export function useSessionTimeout(onTimeout: () => void) {
  const timerRef = useRef<ReturnType<typeof setTimeout>>()

  const resetTimer = useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current)
    }
    timerRef.current = setTimeout(onTimeout, SESSION_TIMEOUT)
  }, [onTimeout])

  useEffect(() => {
    // 初回タイマー設定
    resetTimer()

    // ユーザー操作でリセット
    for (const event of ACTIVITY_EVENTS) {
      window.addEventListener(event, resetTimer, { passive: true })
    }

    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current)
      }
      for (const event of ACTIVITY_EVENTS) {
        window.removeEventListener(event, resetTimer)
      }
    }
  }, [resetTimer])
}