AuthProviderとAuthContextの違いをスッキリ解説！

Reactで認証機能を実装するときによく出てくる
AuthContext と AuthProvider。
なんとなく使ってるけど、「結局この2つって何が違うの？」とモヤっとしてる人も多いのではないでしょうか？

この記事では、AuthContext と AuthProvider の役割の違いをイラスト感覚でわかりやすく解説します！

🧠 ざっくり結論！

👀 AuthContextとは？

export const AuthContext = createContext<AuthContextType | undefined>(undefined)

• ReactのContextオブジェクトです。
• 認証情報（ログインユーザーなど）をグローバルに共有するための”箱”を作ります。
• この時点では中身は空っぽ。

つまり、「みんなで共有するための箱を用意しただけ」の状態です。

⚙️ AuthProviderとは？

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState<User | null>(null)
  const [isAuthenticated, setIsAuthenticated] = useState(false)

  // ...ログイン・ログアウト処理など...

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

• AuthContext に値をセットしてアプリ全体に渡すコンポーネントです。
• 実際の認証状態やユーザー情報を持っていて、それを AuthContext.Provider を通して子コンポーネントに供給しています。

要するに、「箱に実際のデータを入れて使えるようにする」のがこの AuthProvider です。

🧩 関係性まとめ

// AuthContext：状態を共有する「箱」
export const AuthContext = createContext<AuthContextType | undefined>(undefined)

// AuthProvider：その箱にデータを詰めて、子コンポーネントに提供する
<AuthContext.Provider value={...}>
  {children}
</AuthContext.Provider>

// useAuth：その箱からデータを取り出すフック（カスタムフックで分離して使うと便利！）

🔌 たとえ話でイメージすると…

• AuthContext：電源コンセントの”差込口”
• AuthProvider：そこに電気（データ）を流す人
• useAuth()：その電気を使うためのプラグ

📝 実際にどう使う？

// App.tsx
import { AuthProvider } from './contexts/AuthContext'

const App = () => (
  <AuthProvider>
    <YourAppRoutes />
  </AuthProvider>
)

こうすることで、<YourAppRoutes />以下のすべてのコンポーネントが useContext(AuthContext) や useAuth() を使ってログイン状態にアクセスできるようになります！

✅ まとめ

• AuthContext：共有のための「状態の箱」
• AuthProvider：その箱に実際の値を入れてアプリ全体に届ける
• useAuth()：その箱から値を取り出すカスタムフック（分けておくと便利）

Reactで認証状態を管理する際には、この3点セットの関係をしっかり理解しておくと、よりスムーズに開発できるようになります！