Next.js + Supabase <=ローカル開発環境を作成
OAuth 2.0のフロー
GitHub の OAuth 2.0 のフローを説明します。
Next.jsのアプリがGitHubの認証プロバイダーにアクセスします。
そうするとコードを取得できます。
そのコードをそのままもう一度GitHubの認証プロバイダーに送信します。
GitHubの認証プロバイダーはそのコードを検証します。
検証が正しかった場合、アクセストークンを発行します。
そうするとGitHubの認証プロバイダーからアクセストークンが送られてきます。
アクセストークンを持っていると、そのアクセストークンが生存している間は、Next.jsのアプリはGitHubのユーザーであることを証明できます。
注意点
環境変数.envファイルではダブルクォーテーションで囲みます。
localhost は 127.0.0.1 にします。
末尾にスラッシュはつけません。
良い例
http://localhost:54321/auth/v1/callback
悪い例
http://localhost:54321/auth/v1/callback/
GitHub認証
GitHubのOAuth Appを新規作成します。
そうするとGitHub認証の環境変数が取得できます。
ローカル開発環境用のGitHub認証ができる環境変数を取得します。
GitHubへアクセス
最初に GitHub
にアクセスします。
右上のユーザーが表示されているアイコンから
Settings
そして
左サイドバーの
Developer settings
を選択します。
GitHub Apps
そうすると↑この場所に来るので、ここから
左サイドバーの
OAuth Apps
を選択します。
次に、
右上の 「New OAuth App」 ボタンを押します。
必要な項目を埋めていきます。
Application name
oauth-practice (適当な名前)
Homepage URL
http://localhost:3000
Authorization callback URL
http://localhost:54321/auth/v1/callback
※↑ローカル開発環境の場合
項目を埋めたら 緑色の 「Register application」 ボタンを押します。
そうすると、次の項目の値が生成されます。
Client ID
85ff....
Client secrets
af8a....
取得したClient ID等を .env に書き込みます。
GITHUB_CLIENT_ID={GITHUBのクライアントID}
GITHUB_SECRET={GITHUBのクライアントシークレット}
例
GITHUB_CLIENT_ID="85ff...."
GITHUB_SECRET="af8a...."
※ ↑環境変数はダブルクォーテーションで囲みます。
OAuth登録時のローカルでの設定例
※名前は自由につけます。
※ローカルで動かすには、URLは localhost
ではなく 127.0.0.1
にする必要があります。
※Supabaseでの設定が 127.0.0.1 と固定されているため(だと思う)
GitHub側では localhost
を 127.0.0.1
自動変換してくれないため(だと思う)
Supabaseの設定ファイル
GitHub
と
Google
の例
[auth.external.github]
enabled = true
client_id = "env(GITHUB_CLIENT_ID)"
secret = "env(GITHUB_SECRET)"
redirect_uri = "http://127.0.0.1:54321/auth/v1/callback"
[auth.external.google]
enabled = true
client_id = "env(GOOGLE_CLIENT_ID)"
secret = "env(GOOGLE_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""
Local Development | Supabase Docs
https://supabase.com/docs/guides/cli/local-development#use-auth-locally