descope-auth

Descope 認証

Descope Flows と SDK を使用して、安全なパスワードレス認証を統合します。

フレームワークの検出

ユーザーのフレームワークを検出し、適切なリファレンスを使用します。

プロジェクトに含まれるもの...	使用するリファレンス
next が package.json に含まれる	references/nextjs.md
react（Next.js なし）	references/react.md
@angular/core が package.json に含まれる	references/angular.md
フロントエンドフレームワークなし（プレーンな HTML/JS）	references/vanilla-js.md
Python/Node.js のバックエンドのみ	references/backend.md

クイックスタート（すべてのフレームワーク）

1. https://app.descope.com/settings/project から Project ID を取得します
2. 環境変数を設定します：NEXT_PUBLIC_DESCOPE_PROJECT_ID=<your-id>
3. フレームワーク固有のリファレンスに従います
4. 確認：セットアップ後、<Descope> コンポーネントにログインフォームが表示されることを確認します。ブラウザーのコンソールを確認してください。Project ID がない、または無効な場合は、明確な Could not load flows エラーが表示されます。

最小限のインライン例（Next.js）

// src/app/login/page.tsx
import { Descope } from '@descope/nextjs-sdk';

export default function LoginPage() {
  return (
    <Descope
      flowId="sign-up-or-in"
      onSuccess={(e) => console.log('Authenticated:', e.detail.user)}
      onError={(e) => console.error('Auth failed:', e.detail)}
    />
  );
}

React SPA またはバックエンドのみのセットアップについては、以下のフレームワーク固有のリファレンスを参照してください。

有効な Flow ID（重要：他の ID を作成しないでください）

Flow ID	用途
sign-up-or-in	サインアップ／ログインをまとめて実行（推奨）
sign-up	登録のみ
sign-in	ログインのみ
step-up	MFA ステップアップ認証
update-user	プロフィールの更新、認証方法の追加

認証方法

方法	使用する場面
OTP（メール／SMS）	迅速な確認コード
Magic Link	パスワードレスのメールリンク
Passkeys	生体認証／WebAuthn（最も安全）
OAuth	ソーシャルログイン（Google、GitHub など）
SSO	エンタープライズ向け SAML/OIDC
パスワード	従来型の認証（非推奨）

禁止事項（セキュリティ上のガードレール）

• JWT を手動で解析しないでください。必ず SDK の validateSession() を使用してください
• トークンを localStorage に保存しないでください。SDK が安全に処理します
• Flow ID を作成しないでください。上の表に記載された ID のみを使用してください
• サーバーサイドの検証を省略しないでください。必ずバックエンドで検証してください
• クライアントコードで DESCOPE_MANAGEMENT_KEY を公開しないでください

リファレンス

• references/nextjs.md - Next.js App Router と Pages Router の統合
• references/react.md - React SPA の統合
• references/angular.md - Angular の統合
• references/vanilla-js.md - Vanilla JavaScript／プレーンな HTML の統合
• references/backend.md - バックエンドでのセッション検証