基本的な機能を備えたOAuth 2.0のクライアント側APP の最小構成。検証や学習用です。

pnpm -C apps/auth-app dev

docker compose build --no-cache

docker compose up

react-router-auth-sample は Vite の dev サーバーで起動し、apps/auth-app 配下の変更がホットリロードされます。

docker compose up -d db

docker compose run --rm db-migrate

bash 初期化してやり直す（全データ削除） docker compose up --build --abort-on-container-exit db-migrate

bash

docker compose down -v

docker compose up -d db

docker compose run --rm db-migrate

プロバイダごとの固定値（OAuth App）

• GITHUB_CLIENT_ID（必須）
• GITHUB_CLIENT_SECRET（プロバイダによって必要。公開クライアント向けのフローでも要求されることがある ）
• AUTHORIZE_URL（認可エンドポイント）
• TOKEN_URL（トークンエンドポイント）
• USERINFO_URL（ユーザー情報エンドポイント。例：GitHub は https://api.github.com/user）
• SCOPE（最小：login-only）

GitHub App（User Access Token）用

• GITHUB_APP_CLIENT_ID（必須）
• GITHUB_APP_CLIENT_SECRET（必須）
• GITHUB_APP_AUTHORIZE_URL（省略可。既定は https://github.com/login/oauth/authorize）
• GITHUB_APP_TOKEN_URL（省略可。既定は https://github.com/login/oauth/access_token）
• GITHUB_APP_SCOPE（省略可）
• GITHUB_APP_REDIRECT_URI（省略可。APP_ORIGIN から組み立てる場合は不要）

Resource Server 連携用

• RESOURCE_SERVER_BASE_URL（省略可。既定: http://localhost:5174）
• RESOURCE_OAUTH_AUTHORIZE_URL（省略可。既定: ${RESOURCE_SERVER_BASE_URL}/oauth/authorize）
• RESOURCE_OAUTH_TOKEN_URL（省略可。既定: ${RESOURCE_SERVER_BASE_URL}/oauth/token）
• RESOURCE_PROTECTED_API_URL（省略可。既定: ${RESOURCE_SERVER_BASE_URL}/api/protected）
• RESOURCE_OAUTH_CLIENT_ID（省略可。既定: sample-client）
• RESOURCE_OAUTH_CLIENT_SECRET（省略可。既定: sample-secret）
• RESOURCE_OAUTH_SCOPE（省略可。既定: read）
• RESOURCE_OAUTH_REDIRECT_URI（省略可。既定: http://localhost:5173/auth/resource/callback）

Sign Up with GitHub (GitHub App) で private repository を取得するには、少なくとも以下が必要です。

• GITHUB_APP_SCOPE に repo read:user を含める（例: GITHUB_APP_SCOPE=repo read:user）
• GitHub App 側で対象 private repository へのアクセス権を許可してインストールする

refresh-token関係のためにopt-inにしている必要がある(ややこしいが、ボタンがopt-outになっている必要がある) doc/opt-in.png

アプリ側の固定値

• REDIRECT_URI（プロバイダに登録した callback URL と一致させる）
• APP_ORIGIN（REDIRECT_URI を組み立てる方式の場合に必要）

例: APP_ORIGIN から REDIRECT_URI を組み立てる場合

GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
AUTHORIZE_URL=https://github.com/login/oauth/authorize
TOKEN_URL=https://github.com/login/oauth/access_token
USERINFO_URL=https://api.github.com/user
SCOPE=read:user

GITHUB_APP_CLIENT_ID=YOUR_GITHUB_APP_CLIENT_ID
GITHUB_APP_CLIENT_SECRET=YOUR_GITHUB_APP_CLIENT_SECRET
GITHUB_APP_AUTHORIZE_URL=https://github.com/login/oauth/authorize
GITHUB_APP_TOKEN_URL=https://github.com/login/oauth/access_token
GITHUB_APP_SCOPE=repo read:user
# GITHUB_APP_REDIRECT_URI=http://localhost:5173/auth/github-app/callback

RESOURCE_SERVER_BASE_URL=http://localhost:5174
RESOURCE_OAUTH_CLIENT_ID=sample-client
RESOURCE_OAUTH_CLIENT_SECRET=sample-secret
# RESOURCE_OAUTH_REDIRECT_URI=http://localhost:5173/auth/resource/callback
# RESOURCE_OAUTH_SCOPE=read

APP_ORIGIN=http://localhost:5173
REDIRECT_URI=http://localhost:5173 /auth/github/callback
SESSION_SECRET=YOUR_SESSION_SECRET

SESSION_SECRETはopenssl rand -base64 48で生成可能

1. resource-server にログイン（http://localhost:5174/login）
2. auth-app の /signup から Connect Resource Server を押下
3. 認可画面で Authorize を押下
4. /resourceinfo に保護APIレスポンスが表示される