ユーザー認証

  • Supabase AuthとGoogleログインを使用してログインおよびサインアップフローを構築し、アプリへのアクセス権限を制御します
  • Express.jsバックエンドに認証ミドルウェアを追加し、APIルートを不正なリクエストから保護します
  • フロントエンドとバックエンドの両方のセキュリティをテストし、ログインしたユーザーのみがAI機能を起動できることを確認する
  • ユーザーアカウントを作成し、ユーザーをログイン状態に保つサインアップおよびログインページ
  • リクエスト処理前に認証トークンをチェックするバックエンドミドルウェアを備えた保護されたAPIルート

学生たちは、ReactフロントエンドとExpress.jsバックエンドを含むデバッグ済みのMVPをGitHubリポジトリに構築しました。フロントエンドとバックエンドは、Codespaces内で2つの別々のプロセスとして実行される可能性があります。

認証によるアプリのセキュリティ強化

現在、あなたのCodespaceリンクを知っている人は誰でもアプリを利用できます。ログイン画面はなく、Express.jsバックエンドは受け取ったリクエストをすべて無条件に処理します。誰かがURLを発見すれば、費用が発生するAI呼び出しを実行できてしまいます。財務計画を立てる際に検討した通り、API呼び出しにはすべてコストがかかります。これらの呼び出しを保護することは技術的な判断だけでなく、ビジネス上の判断でもあります。

このユニット全体を通して、TutorMatchをガイドとなる事例として使用します。TutorMatchの事例に従い、各ステップを自身のMVPに合わせて適応させていきます。

このユニットは二重の保護機能を追加します。

  1. ユーザー認証—ログイン画面により、登録ユーザーのみがアプリを閲覧できるようにします。 
  2. セキュリティチェック バックエンドで、すべてのAPIリクエストが実際にログイン済みユーザーから送信されたものであることを検証する。

こう考えてみてください：ログインページは玄関のドアを守ります。バックエンドのセキュリティチェックは窓を守ります。両方が揃うことで、アプリは表と裏の両方から守られるのです。

パスワードを自分で保管してみませんか？

ユーザーアカウントに対する最も直感的なアプローチは、同時に最も危険でもある：ユーザーテーブルを作成し、登録時に各人のメールアドレスとパスワードを保存し、ログイン時にパスワードを確認する。

問題は、パスワードが平文で保存されるため、データベースにアクセスできる者なら誰でも読み取れる点です。データベースが漏洩した場合、全ユーザーのパスワードが危険に晒されます。プロフェッショナルなアプリでは決してこのようなことは行いません。

 安全な認証には、以下の要素が連携して機能する必要があります：

  • パスワードハッシュ化 – 保存前にパスワードを読み取れない文字列に変換すること
  • セッショントークン – ユーザーが各ページでパスワードを入力せずにログイン状態を維持するための一時的な識別子
  • セキュアなストレージ –認証情報を暗号化して処理するため、転送中や保存時に漏洩することはありません。

これらすべてを一から構築するのは複雑でエラーが発生しやすい。だからこそ認証サービスが存在するのだ——セキュリティを処理してくれるので、アプリ開発に集中できる。

user authentication login screen

ユーザー認証サービスを選択する際には、いくつかの選択肢があります：

オプション

仕組み

無料プラン

複雑性

評決

パスワードは自分で保管してください

ユーザテーブルを作成し、パスワードをハッシュ化し、セッションを手動で管理する

無料

高い — セキュリティ上のミスは起こしやすく、危険である

MVPには推奨されません

Google サインイン (OAuth)

ユーザーは「Googleでサインイン」をクリックします。セキュリティはすべてGoogleが管理します。

無料

Medium — Google Cloud Console の設定が必要です

優れた選択肢ですが、設定手順が増えます

Auth0 / 事務員

事前構築済みのログインページを備えたサードパーティ認証サービス

無料プランが利用可能です

Medium — 新規アカウントとSDKが必要です

良いが、管理すべきサービスがまた一つ増える

Supabase認証

Supabaseに組み込まれています。ハッシュ処理、セッション管理、ストレージを自動的に処理します。

無料（含まれています）

Low — あなたは既にSupabaseアカウントをお持ちです

MVPに最適な選択肢

このレッスンでは、ユーザー認証にSupabase Authを使用します。また、プロフェッショナル向けアプリでは標準的なログインオプションであるGoogleログインも追加します。設定はそれほど難しくありません。Supabase Authを主な選択肢とする理由は3つあります：

  1. ファウンダーズツールキットから既にSupabaseアカウントをお持ちです。
  2. Supabaseは上記のセキュリティ上の複雑な処理をすべて標準で対応します。
  3. 無料プランでは、MVPに必要なすべての機能が含まれています。

もう一点考慮すべき点があります：Supabase Authは行レベルセキュリティ（RLS） をサポートしています。 これは、 各ユーザーが自身のレコードのみ閲覧できるようにデータをフィルタリングするデータベース ルールです。 SupabaseをFounder's Toolkitに追加した際にも触れました。ただしRLSはAIルートを保護しません。そのため、さらなる保護を追加する必要があります。

現段階ではRLSは不要です。カスタムテーブルを作成していないためです。Supabaseはユーザーストレージを内部で処理します。MVPでユーザー固有のデータ（ユーザーの履歴、設定、取引履歴など）を保存する場合にRLSが重要になります。

Supabase認証

Supabaseプロジェクトを作成すると、認証機能が自動的に有効になります。Supabaseの設定で特別な設定を行う必要はありません。Founder's Toolkitでは匿名ユーザーとチームメンバー向けに特定のRLSセキュリティポリシーを設定していますが、このデータベースではSupabaseのデフォルトの組み込み認証を使用します。

Supabaseが自動的に設定する項目:

  •  メール/パスワード認証を有効化
  • ユーザーテーブル（auth.users）が作成されました
  • 発行されたJSON Web Tokens (JWT)
  • セッション管理を処理

最初のアクティビティでは、MVPにログインとサインアップフローを追加し、登録ユーザーのみがアプリにアクセスできるようにします。一連のプロンプトに沿って作業を進め、各ステップ後にテストを行い、すべてが正常に動作することを確認してから次のステップへ進みます。 

このレッスンのアクティビティにおける各プロンプトは 役割 + タスク 構造を採用しています。これは練習する価値のあるプロンプト設計パターンです：

  • 役割 AIにどのような専門家になるべきかを指示する
  • タスク 正確に何をすべきかを指示します。

これら二つを分離することで、プロンプトがより明確になり、特に小規模なAIモデルではより良い結果が得られます。

アクティビティ1

Supabaseでユーザー認証を追加する

所要時間：30分

アプリをアップデートし、利用にはログインを必須とします。新規ユーザーは登録が可能で、既存ユーザーはログインできます。アカウントを持たないユーザーはログインページにリダイレクトされます。

  1. GitHubにアクセスし、MVPリポジトリを開いてください。 
  2. add-auth のような名前の新しいブランチを作成してください。 
  3. 新しいブランチでコードスペースを開いてください。

重要な変更を加えようとしています — 機能ブランチがメインブランチを保護します。テスト後にのみメインブランチへマージしてください。

  1. Supabaseにアクセスしてください。Founder’s Toolkitからアカウントとプロジェクトを作成済みである必要があります。
  2. 新しいプロジェクトを作成します。MVPに適した名前を付けます。
  3. データベースパスワードを作成する必要があります。パスワードを作成したら、保存後に確認できないため、安全な場所に保管してください。
  4. 認証設定を構成します：
    1. Supabaseダッシュボードに移動→ 認証 → 設定
    2. 「サインイン/プロバイダー」セクションまでスクロールダウンしてください
    3. メール確認を有効にする
    4. テストのためOFFに切り替える
    5. 本番環境に移行する際は、必ず元に戻すことを忘れないでください！
supabase user authentications screen
  1. プロジェクトのURLとAPIキーを取得する
    1. 左サイドバーで、プロジェクト設定（下部にある歯車アイコン）をクリックしてください
    2. データAPIをクリックしてください。
    3. API URLが表示されます。それをコピーして、お使いのコンピューターのどこかに保存してください。アプリで必要になります。
    4. プロジェクト設定メニューに戻り、APIキーをクリックしてください。
    5. 公開鍵と秘密鍵の2つの鍵が表示されます。
    6. 公開可能なキーをコピーしてください。アプリにもこれが必要です。

公開URLと公開用キーはどちらも公開されており、アプリのフロントエンドで使用可能です。SupabaseはRLS（行レベルセキュリティ）を採用しているため、データは保護されています。ユーザーはサインアップやログインが可能ですが、自身のデータのみ閲覧でき、管理者権限は付与されません。

ここでは秘密鍵を使用しません。フロントエンドでは決して使用しないでください。後ほど決済処理の段階で利用します。

  1. プロジェクトに新しい .env ファイルを ルートフォルダに新しい .env ファイルが server フォルダには既に.envファイルが存在しますが、Supabaseの統合はフロントエンド側で行われるため、プロジェクトのルートディレクトリに配置する必要があります。
  2. ルートディレクトリに2行を追加してください .env ファイルに2行を追加してください
    VITE_SUPABASE_URL=your_public_URL
    VITE_SUPABASE_KEY=your_publishable_key
  3. ファイル内の該当行に、実際のSupabase URLと公開用キーを追加してください。

注記:Reactを使用しているため、フロントエンド環境変数に接頭辞としてVITE_が必要です。使用するフレームワークによって異なる場合があります。

Codespaceのターミナルで、以下のコマンドを入力してください：
npm install @supabase/supabase-js

プロンプトコパイロット（または他のLLM）に、アプリのログイン/サインアップコードを生成するよう促してください。以下にサンプルプロンプトを示します。

役割: あなたはウェブ開発者として、私のReactアプリにユーザー認証機能を実装するのを手伝ってくれます。

タスク: Supabaseのサインアップおよびログインフォームを追加し、SupabaseのURLと連携させる。起動画面はログイン画面とし、ユーザーがログインすると他のタブが表示され、ユーザーはそれらの2つのタブにアクセスできる。ログインフォームはPagesフォルダ内にAuthform.jsxファイルとして追加すること。 ユーザーがログイン後、他のタブボタン横にログアウトボタンを追加し、ユーザーがログアウトしてメイン画面に戻れるようにする。

AuthFormには、FindTutorタブとGetAdviceタブで使用したのと同じ書式設定を使用してください。 

.envファイルにSupabaseプロジェクトURLと公開用APIキーをVITE_SUPABASE_URLとVITE_SUPABASE_URLとして追加しました。 

完全なフローをテストする：

  1. 登録:
    • /signup に移動
    • メールアドレスとパスワードを入力してください（6文字以上）
    • 「サインアップ」をクリック
    • ホームページにリダイレクトすべきです
  2. Supabaseで確認する:
    • Supabaseダッシュボードを開く → 認証 → ユーザー
    • 新しいユーザーが表示されているはずです
  3. ログアウト:
    • ログアウトボタンをクリック
    • ログインページにリダイレクトされるべきです
  4. ログイン:
    • 同じメールアドレスとパスワードを入力してください
    • ホームページにリダイレクトすべきです
  5. セッション永続性:
    • ページを更新する
    • まだログインしているはずです

いずれかのステップで失敗した場合は、コパイロットに「Teach Me」パターンを使用してください：期待した結果、実際に起こったこと、修正策を提供する前にコパイロットに説明を求めることを記述します。

次のアクティビティのために、コードスペースとブランチを開いたままにしておいてください。

Googleログインオプションの追加は任意ですが、無料で実装でき、アプリにプロフェッショナルな印象を加えることができます。

アクティビティ2

（任意）Googleログインを追加

所要時間：30分

  1. Supabaseダッシュボードに移動→ 認証 → プロバイダー。
  2. リストからGoogleを探して有効にしてください。 
  3. コールバックURLを探してコピーしてください。通常は以下のような形式です：https://[YOUR-PROJECT-ID].supabase.co/auth/v1/callback.

重要： 画面上部の大きな「無料でお試し」または「300ドルクレジットを有効化」バナーは無視してください 。これらのボタンをクリックすると、Googleが本人確認のためにクレジットカード情報を要求します。

Identity/Auth APIを利用するには、300ドルのクレジットや「請求アカウント」は必要ありません。

  1. Google Cloud コンソール にアクセスしてください。 Google AI Studio を使用している場合、アカウントをお持ちのはずです 。

  2. 新しいプロジェクトを作成し、適切な名前を付けます。 Googleでは、アカウントごとに複数の無料プロジェクトを作成でき、課金やクレジットカードの使用は不要です。

  3. APIとサービス → OAuth同意画面 に移動します。

    • 「はじめましょう」をクリックしてください。
    • アプリ名とユーザーサポート用メールアドレスを入力してください。
    • クリック 外部 観客のために。

      重要：「アプリ名」と「サポート用メールアドレス」のみを提供してください。ロゴや機密性の高い「スコープ」（ユーザーのドライブ全体への読み取り権限など）の追加を求められた場合、Googleがクレジットカードによる認証を要求する可能性があります。

      MVP向けプロのアドバイス：      「テスト」モードのまま、またはユーザー数が少ない間は、現時点で検証申請を行う必要はありません。

  1. APIとサービス → 認証情報に移動します。
  2. クリック+ クレデンシャルの作成 → OAuthクライアントID
  3. アプリケーションの種類: Webアプリケーションを選択してください。
  4. 許可されたリダイレクトURI: 上記のSupabaseからコピーしたコールバックURLを貼り付けてください。
  5. 「作成」をクリックしてください。クライアントIDと クライアントシークレットが発行されます。
  6. これらの情報は必ずコピーしてください。ウィンドウを閉じるとアクセスできなくなります。JSON形式でダウンロードすれば、両方の形式を利用できます。
  1. Supabaseダッシュボードに戻り→ 認証 → プロバイダー → Google を選択してください。
  2. クライアントIDとクライアントシークレットを貼り付けてください。
  3. Google プロバイダーを有効にするを オンに切り替えて、保存をクリックします。

ユーザーがGoogleでログインする際、認証後にどこに戻るべきかを認識する必要があります。デフォルトではhttp://localhost:3000/になりますが、当社のフロントエンドはhttp://localhost:5173で動作しています。

  1. 正常に動作することを確認するには、アプリが実行中の状態でGithubのURLをコピーしてください（例：https://codespace_name.app.github.dev/のようになります）。
  2. Supabaseで、認証 → URL設定に移動します。 
  3. GitHub URLをリダイレクトURLとして追加してください。
  1. Github CodespaceのURLを .env にGitHub CodespaceのURLを変数として追加してください。変数名はVITE_DEVELOPMENT_URLとします（アプリがReactの場合のみVITEが必要です）。

コパイロットにGoogleログイン機能の追加を依頼します。リダイレクトURLを含めるよう指示を追加することに注意してください。 

  1. ログイン画面にGoogleログインを追加するようCopilotに指示してください。

役割: あなたはウェブ開発者として、私のReactアプリにユーザー認証機能を実装するのを手伝ってくれます。

タスク: ログインページにGoogleサインインを追加する。SupabaseのsignInWithOAuthメソッドを「Google」プロバイダーで使用する。環境変数VITE_DEVELOPMENT_URLにリダイレクトする。

注： コードスペースを切り替える場合 、リダイレクト先（およびフロントエンド用のSupabase URLとAPIキー）を記載した新しい.envファイルを作成する必要があります。

アプリをデプロイする際には、Supabaseで本番環境アプリのURLをリダイレクト先として追加し、コード内でも同様にリダイレクト先として設定する必要があります。

  1. 変更をブランチにコミットしてください。

次の活動のために、ブランチとCodespaceを開いたままにしておいてください。

APIルートの保護

アプリにログインページが追加されたため、ユーザーはアプリを表示するためにログインする必要があります。しかし、Express.jsバックエンドは、ユーザーがフロントエンド経由でログインしていなくても、受信したすべてのリクエストを処理し続けています。誰かがブラウザコンソールを開き、ログインページを完全に迂回してAPIを直接呼び出すことが可能です。

これは「窓」の問題です。玄関ドア（ログインページ）はロックしたものの、窓（APIルート）は開いたままです。これを修正するには、 セキュリティチェック （ ミドルウェア）を追加し、すべてのAPIリクエストが実際にログイン済みユーザーから送信されたものであることを検証します。

以下のことを行う必要があります：

以下のルートを保護する：

  • 費用がかかる（AIコール、API使用）
  • データの変更（作成、更新、削除）
  • ユーザー固有の情報を表示する

公開を維持する：

  • 健康診断
  • 静的アセット
  • ホームページ（公開されている場合）

バックエンドがリクエストを受信したとき：

  1. 確認：このリクエストには、ユーザーがログインしていることの証明が添付されていましたか？
  2. はい→ 通常通りリクエストを処理する
  3. もしない場合 → 「401 Unauthorized」エラーでリクエストを拒否する

その「証明」は JWT（JSON Web Token）であり、Supabaseがログインした各ユーザーに付与する長い文字列です。フロントエンドはバックエンドへのリクエストごとにこのトークンを含めます。バックエンドはSupabaseとトークンを照合し、それが本物で有効期限が切れていないことを確認します。

内容：

  • ユーザーが誰であるか（ユーザーID、メールアドレス）
  • 発行されたとき
  • 期限が切れたとき
  • Supabaseが発行したものであり、改ざんされていないことを証明する暗号署名が添付されています。
アクティビティ3

APIルートのセキュリティを確保する

所要時間：25分

アクティビティ1と2で使用したのと同じブランチで、Codespaceにまだいない場合は開いてください。

  1. あなたの サーバー フォルダ（Expressバックエンドが配置されている場所）にSupabaseをインストールします：
    • ターミナルウィンドウで、
      cd server
      npm install @supabase/supabase-js
  1. Supabaseプロジェクトに戻り、取得してください 秘密のAPIキー （公開可能な鍵ではない）。
    • プロジェクト設定 → APIキーに移動
    • 秘密鍵までスクロールダウンしてください。
    • それをコピーして、お使いのコンピューターの安全な場所に保存してください。
  2. 更新する .env ファイルを更新してください サーバーの フォルダ内の server/.env はバックエンド用の別ファイルです）。
  3. 以下の行を追加し、SupabaseのURLとシークレットキーを貼り付けてください：
    SUPABASE_URL=your_public_URL
    SUPABASE_SERVICE_ROLE_KEY=your_secret_key

重要：

  • フロントエンドと同じSUPABASE_URLを使用してください
  • SUPABASE_SERVICE_ROLE_KEYには、公開用キーではなくシークレットキーを使用してください。
  • 秘密鍵は管理者権限を有します – フロントエンドコードで絶対に公開しないでください
  1. このプロンプトを使用して、CopilotにバックエンドコードにAPI呼び出しの安全性を確保するコードを追加するよう依頼してください。

役割: あなたはバックエンド開発者として、私のExpress.js APIのセキュリティ強化を支援します。

タスク： 

  1. Supabaseクライアントライブラリ（@supabase/supabase-js）をインポートする
  2. 環境変数から取得した SUPABASE_URL と SUPABASE_SERVICE_ROLE_KEY を使用して Supabase クライアントを初期化します。
  3. Express.jsバックエンドに認証ミドルウェア関数を追加する。
    • トークンを抽出する
    • Supabaseにトークンの検証を依頼する
    • はいの場合 → リクエストを継続させる
    • もしない場合 → 401 エラーを返す

  4. このミドルウェアは、外部APIを呼び出すルートにのみ適用してください

  5. ホームページやヘルスチェックなどの公開ルートには適用しないでください

  1. 生成されたコードを確認してください。

    requireAuth（または類似の名前）という関数が確認できるはずです。この関数はAuthorizationヘッダーをチェックし、トークンを抽出し、Supabaseで検証します。また、この関数がAPIルートには適用されているが、パブリックルートには適用されていないことも確認できるはずです。

    主要な部分は以下のコードと類似しているはずです：
				
					async function requireAuth(req, res, next) {
  const authHeader = req.headers.authorization;

  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  const token = authHeader.split(' ')[1];
  const { data, error } = await supabase.auth.getUser(token);

  if (error || !data.user) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  req.user = data.user;
  next();
}

// Protected route — security check runs first
app.post('/api/ai-query', requireAuth, async (req, res) => {
  // This code only runs if the user is logged in
});

// Public route — no security check needed
app.get('/health', (req, res) => {
  res.json({ status: 'ok' });
});

TutorMatchの場合、保護対象のルートはapp.post(‘/api/ai-query’, requireAuth, …)です。アプリによってルート名は異なりますが、パターンは同じです——実行にコストがかかるルートを保護してください。

バックエンドは各リクエストでログイン証明を要求するようになりましたが、フロントエンドはまだそれを送信していません。

  1. フロントエンドコードを更新するようCopilotに指示してください。以下にサンプルプロンプトを示します。

役割: あなたはフロントエンド開発者として、私のReactアプリケーションをセキュアなExpress.jsバックエンドに接続する作業を支援します。

タスク: すべてのフロントエンドAPI呼び出しをprotectedルートに更新し、AuthorizationヘッダーにSupabaseのセッショントークンを含めるようにする。

  1. Copilotが更新したコードを確認してください。

    フェッチ呼び出しにAuthorizationヘッダーが追加されているはずです。変更内容は以下の通りです：
				
					const { data: { session } } = await supabase.auth.getSession();

if (!session) {
  window.location.href = '/login';
  return;
}

const response = await fetch('/api/ai-query', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${session.access_token}`
  },
  body: JSON.stringify({ prompt: userInput })
});

ここがすべてがつながる場所です：

  1. Supabase Authは、ユーザーがログインした際にフロントエンドにトークンを発行します。
  2. フロントエンドは、すべてのリクエストにそのトークンを送信します。
  3. あなたのバックエンドがそれを確認します。
    • 有効であれば、リクエストは通過する。
    • そうでない場合は、ブロックされています。
  1. Codespacesでアプリを実行し、次の2つのシナリオをテストしてください：

テスト1 — ログイン済みユーザー（動作するはず）：

    1. アプリを開き、テスト用の認証情報でログインしてください。
    2. AI機能を通常通りご利用ください。
    3. 以前とまったく同じように動作するはずです。

これが機能する場合、フロントエンドがトークンを送信し、バックエンドがそれを受け入れていることになります。

テスト2 — ログインなし（ブロックされるべき）：

    1. アプリからログアウトし、ユーザーがログイン状態にならないようにする。
    2. 開発者ツールを開く（F12 または右クリックで「要素を検査」を選択）、次に「コンソール」タブをクリックします。
    3. コンソールに以下の内容を貼り付けて、APIを直接呼び出してみてください（注：当社の フェッチは /api/ai-query です。フロントエンドコードと同じものを使用するようにフェッチコマンドを変更してください。）
				
					fetch('/api/ai-query', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt: 'test' })
}).then(r => r.json()).then(console.log);

You should see { error: “Unauthorized” } — NOT an AI response.

両方のテストに合格した場合、アプリは安全です。ログインページは玄関を保護します。ミドルウェアは窓を保護します。

  1. ユーザー認証が機能していることを最終確認してください：

    • 完全にログアウトし、ページを更新してください — ログインページが表示されるはずです
    • ログインして、AI機能が動作することを確認してください
    • 開発者ツールのコンソールを開き、トークンなしでAPIを呼び出してみてください（テスト2と同様）— 401エラーが返されることを確認してください

  2. 変更をステージングし、ソース管理にコミットします。メッセージには「認証ミドルウェアによるAPIルートの保護を追加」などと記入し、ブランチにプッシュします。

  3. GitHubにアクセスし、add-authブランチ からプルリクエストを作成し、変更内容を確認し、メインブランチにマージしてください。 

トラブルシューティング

以下に発生する可能性のある問題と、その解決策を示します

開発者ツールを開き、ネットワークタブを選択します。APIリクエストをクリックし、リクエストヘッダーを確認してください。Authorization: Bearer eyJ…と表示されているはずです。ヘッダーが表示されない場合は、getSession()の呼び出しが正常に動作しているか確認してください。

requireAuth を正しいルートに適用したことを確認してください。

バックエンドでは必ずSUPABASE_SERVICE_ROLE_KEY（SUPABASE_ANON_KEY ではない）を使用してください。サービスロールキーには、あらゆるユーザーからのトークンを検証する権限があります。

Supabaseクライアントライブラリがインストールされていることを確認してください（npm install @supabase/supabase-js）。サーバーファイルの先頭でインポートしてください。

リフレクション

ユーザー認証の追加は、アプリをプロフェッショナルで安全なものにする重要なステップです。以下の点を検討してください：

Sunset and reflection over lake
01

セキュリティ
ログインページだけあって、バックエンドのセキュリティチェックがない場合、何が起こるでしょうか？
02

あなたのAPIルート
ご自身のMVPにおいて、どのルートに認証ミドルウェアが必要で、どのルートを公開状態に保てるでしょうか？その判断基準は何でしたか？
03

プロンプティング
役割＋タスク構造はAI生成コードの品質にどのような影響を与えたか？それらは従来のプロンプト結果と比べて異なる（優れている／劣っている）か？

主要用語

  • 認証：ユーザーの身元確認——本人であることを確認すること（サインアップおよびログイン）。ユーザーがアクセスできる内容を制御する認可とは異なる。
  • 認証:認証済みユーザーが実行できる操作を制御すること。行レベルセキュリティ（RLS）は、データベースレベルでこれを実装する方法の一つである。
  • パスワードハッシュ化：パスワードを保存する前に判読不能な文字列に変換すること。Supabase認証はこれを自動的に行います。平文パスワードの保存は重大なセキュリティリスクです。
  • セッショントークン：ユーザーが認証後にログイン状態を維持するための一時的な識別子。Supabase Authが自動的に管理します。
  • 認証ミドルウェア:ルートハンドラーの前に実行され、リクエストがログイン済みユーザーからのものであることを検証するコードです。ユーザーが認証されていない場合、ミドルウェアはリクエストをブロックします。
  • Authorizationヘッダー:各リクエストにおいて、フロントエンドからバックエンドへ認証情報（通常はトークン）を伝送するHTTPヘッダー。
  • Bearer Token: A type of authentication token sent in the Authorization header. The format is Bearer <token>. “Bearer” means “whoever carries this token is authorized.”
  • JSON Web Token (JWT):認証トークンの標準フォーマット。ユーザーに関するエンコードされた情報と有効期限を含みます。Supabaseはセッション管理にJWTを使用します。
  • OAuth: ユーザーが新しいパスワードを作成する代わりに、既存のアカウント（Googleなど）でサインインできるようにする認証標準 。「Open Authorization」の略称。

その他のリソース

レッスン内容
前のクイズ
コースに戻る
次のクイズ