🍈

React × TypeScript × Viteでの認証管理！AuthContextでログイン状態を管理

に公開
React
TypeScript
Vite
tech

はじめに

  • React + TypeScript + Vite で開発を進める中で、認証やルーティングの設計に悩んだので、この記事にまとめました。
    • AuthContext を使った認証の管理
    • React Router との組み合わせ方
    • コンポーネントの順番を意識した設計

プロジェクト構成

AuthContext.tsxやルーティング関連のファイルを整理

 ├─ src
   ├─ components
   │ ├─ layout
   │   ├─ Layout.tsx  # 共通のレイアウト
   ├─ contexts
   │ ├─ AuthContext.tsx  # 認証管理
   ├─ router
   │ ├─ index.tsx  # ルーティング設定
   ├─ main.tsx  # ルートコンポーネント
   ├─ App.tsx  # アプリのエントリーポイント

AuthContext.tsxの実装

認証状態を管理するAuthContextを作成し、AuthProviderでアプリ全体に認証情報を提供します。

  • createContextで認証の状態を定義
    • createContextを使用し、アプリ全体で共有する認証状態（isAuthenticated）とログイン・ログアウト関数を定義
      ⇨ createContextを使用することで、どのコンポーネントからでもAuthContextを通じて認証状態を取得
const AuthContext = createContext<AuthContextType | undefined>(undefined);
  • AuthProviderを作成
    • useStateを使用し、isAuthenticated（ログイン状態）を管理し、
      AuthContext.Providerを子コンポーネントに認証情報
      ⇨ AuthProviderにて、どのコンポーネントからでもuseAuth()を使用し認証状態を取得
      ⇨ login()/logout()で、簡単にログイン状態を変更
export function AuthProvider({ children }: { children: ReactNode }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => setIsAuthenticated(true);
  const logout = () => setIsAuthenticated(false);

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

useAuth()で認証情報を取得

useAuth()を作成し、認証状態を取得できるようにします。

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) throw new Error("useAuth must be used within an AuthProvider");
  return context;
}

main.tsxでAuthProviderを適用

AuthProviderをmain.tsxに組み込み、アプリ全体で認証情報を管理します。

  • AuthProviderはBrowserRouterの外側に配置（ルーティング内でuseAuth()を使用可能）
<AuthProvider>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</AuthProvider>

App.tsx の構成

共通レイアウト Layout.tsx を適用し、その中に AppRouter を組み込みます。

  • この順番にすることで、すべてのページに共通のヘッダー・フッターを適用
<Layout>
  <AppRouter />
</Layout>

main.tsxのコンポーネントの順番

コンポーネントの順番の説明です。

順番 コンポーネント 役割 位置の理由
1 StrictMode 開発時のエラー検出 最も外側でReactのチェック機能が有効
2 AuthProvider 認証状態を提供 BrowserRouterの前に置くことで、ルーティング内でuseAuth()が使用可能
3 BrowserRouter ルーティングを管理 Appを囲むことで、Routeの動作有効
4 App アプリ全体の管理 LayoutやAppRouterを統括

Discussion