認証の仕組み

なぜ学ぶか： 「Googleでログイン」ボタンの裏で何が起きているのか。認証はAIに任せられる実装の代表ですが、仕組みを知らないと「ログインできない」トラブルで手詰まりになります。言葉の地図を持ち、AIの認証コードを恐れず読めるようになります。

認証＝「あなたは誰？」の確認

ID/パスワード・OAuth（外部アカウント連携）など方法は色々ありますが、目的は1つ：ユーザーの特定です。

OAuth＝他サービスに身元保証してもらう

「Googleでログイン」は、Googleが「本人です」と保証する仕組み。アプリはパスワードを預からずに済むので、個人開発では第一候補です。

セッション＝ログイン状態の維持

認証成功後、ブラウザに「ログイン済みの証（トークン）」が保存され、以降のリクエストに自動で添えられます。毎回聞かれないのはこのおかげです。

つまずき所はリダイレクトURL

OAuthは「外部サイトへ行って戻ってくる」旅。戻り先URL（localhostと本番）の設定漏れが「ログインできない」の定番原因です。

コード例

// Supabase での OAuth ログイン（GitHub の例）
const signIn = async () => {
  await supabase.auth.signInWithOAuth({
    provider: "github",
    options: { redirectTo: `${location.origin}/auth/callback` },
  });
};

// 現在のログインユーザーを取得
const { data: { user } } = await supabase.auth.getUser();
console.log(user?.id, user?.email);

signInWithOAuthを呼ぶとGitHubのサイトへ飛び、承認後にredirectToへ戻ってきます。この「行って戻る」旅の戻り先設定が、ログイントラブルの定番ポイントです。

ステップ 1 / 2

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。