More than 1 year has passed since last update.

Next.js + Supabase アプリでサーバーやローカル開発環境で、認証に必要な Client ID と Client secrets の取得。(Slack、Google、GitHub)

Last updated at 2024-03-01Posted at 2024-01-04

ローカルでのSlack認証は使用できません。
※詳細は記事の中で。

疑問があればAIに聞きましょう。

↑高性能で無料で使えます。

この記事から、Middlewareを複数のファイルに分割する部分のみの記事

Next.js 14 App router Middlewareを複数のファイルに分割する方法 #Next.js - Qiita

参考リポジトリ

supabase-by-example/oauth-flow at main · supabase-community/supabase-by-example
https://github.com/supabase-community/supabase-by-example/tree/main/oauth-flow

↑Supabaseのコミュニティのサンプルのうち
OAuthのサンプルを利用しています。

OAuthの複数あるサンプルのうち、↑Next.js の App router版を選んでいます。

この記事の目的

参考リポジトリにSupabaseのローカル認証の設定をします。
そして、その設定したSupabaseのローカル認証の動作確認をします。

サンプル

supabase-by-example/oauth-flow/nextjs at main · supabase-community/supabase-by-example

用語

便宜上、以下のように呼びます。

サーバー

Supabaseのサーバー側
ブラウザ上からアクセスするSupabase

Dashboard | Supabase

ローカル

Supabaseのローカル開発環境
PC内でDockerを起動させて動かしているSupabase

サンプル

↓Supabaseのコミュニティのサンプルを指します。

※ローカルでの認証の動作確認で使うのに便利です。

はじめに

Supabaseで開発する際に、
ローカルで開発して、サーバーにデプロイする方法を採用しています。
その時に、OAuth認証を利用するのですが、ローカルとサーバーでは少し設定が変わるので、
ローカル用とサーバー用の2個OAuth認証を用意する必要があります。

重要

OAuthへの設定と、登録する情報は、

サーバー上で認証を動かす場合は

Supabaseのサーバー側のデータはサーバー側から取得します。

Supabaseのサーバーの設定は、
Supabaseサーバーのダッシュボードの
左サイドバー Authenticationの
Providersの設定から取得します。

有効にするOAuthを選択して有効化してください。

Callback URL (for OAuth) も各OAuthに登録する時に必要ですのでメモをしておいてください。

ローカル上で認証を動かす場合は

ローカル側のデータはローカル側から取得します。
ローカルの設定は少し特殊です。

Supabaseのローカルの設定は、
そのプロジェクトの supabase/config.toml に書き込みます。

※ supabase/config.tomlの場所
supabase CLI をインストール後
プロジェクトのルート直下でsupabase init を実行すると、
プロジェクトのルート直下にsupabaseフォルダが作成されます。
その中に config.toml が作成されています。

Supabaseでの設定の共通の注意点

localhost 部分は 127.0.0.1 にします。

※古い情報だと localhost と書いてるのがあります。

環境変数を .env ファイルに書き込む場合ではダブルクォーテーションで囲みます。

.env.local というファイル名は使用しないでください。
.envというファイル名で作成してください。

末尾に↓スラッシュ記号はつけません。

良い例
http://127.0.0.1:54321/auth/v1/callback

悪い例
http://127.0.0.1:54321/auth/v1/callback/

Supabase の共通設定

Supabaseのダッシュボードを開きます。
左サイドバーの ↓Authentication を選択します。

https://supabase.com/dashboard/project/[Reference ID]/auth/providers

Auth Providers ページが表示されます。

設定したい各OAuthを有効化します。

それぞれの Callback URL 先をメモしておきます。

Callback URL (for OAuth) を Copy します。

これは各OAuthに登録する時に必要です。

Supabase 側での情報を取得したら、次に各OAuthの情報を登録して Client ID 等を取得します。

Supabaseの設定ファイル config.toml

OAuth認証の有効化の基本形

[auth.external.*****]
enabled = true
client_id = "env(*****_CLIENT_ID)"
secret = "env(*****_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = "http://[URL]/auth/v1/callback"

redirect_uri

空白の場合: 空白のままにすると、アプリケーション用に設定されたデフォルトのredirect_URLが使用されます。
デフォルト値の変更: 必要に応じて、特定のURLをコールバックに使用するためにredirect_uriをカスタマイズすることができます。

OAuth認証フローにおいて、安全な認証を実現するために不可欠な要素です。
OAuthプロバイダに登録し、許可されたURLと一致させる必要があります。
ユーザーがログイン後に目的のアプリケーションに戻れるようにします。

await supabase.auth.signInWithOAuth({
      provider: 'github',
      options: {
		redirecto: "https://example.com/auth/callback"
	}
})

↑コードでredirectoを指定しておけば、設定ファイルのよりも優先されます。？
？？？
空欄の場合はこの値が使用されます？
※あとで、検証の必要あり

config.tomlファイルのデフォルトのコールバックの設定する場所でも
設定できるので、ローカルとサーバーの設定をここで変えることが出来るかもしれない。
※あとで、検証の必要あり

*****

各OAuthの名前です。
↑*****には以下のような値が入ります。

apple
azure
bitbucket
discord
facebook
github
gitlab
google
keycloak
linkedin
notion
slack
spotify
twitch
twitter
workos
zoom

Supabase初期化時のファイル (OAuth部分を抜粋)

↓supabase init コマンドでの初期化時の内容です。

supabase/config.toml

# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`,
# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
[auth.external.apple]
enabled = false
client_id = ""
secret = ""
# Overrides the default auth redirectUrl.
redirect_uri = ""
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""

サンプルのSupabase設定ファイルの内容

↓サンプルからコピーした内容です。

supabase/config.toml

# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`,
# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
[auth.external.apple]
enabled = false
client_id = ""
secret = ""
# Overrides the default auth redirectUrl.
redirect_uri = ""
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""
[auth.external.github]
enabled = true
client_id = "env(GITHUB_CLIENT_ID)"
secret = "env(GITHUB_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""
[auth.external.google]
enabled = false
client_id = "env(GOOGLE_CLIENT_ID)"
secret = "env(GOOGLE_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""
[auth.external.azure]
enabled = false
client_id = "env(AZURE_CLIENT_ID)"
secret = "env(AZURE_SECRET)"
url = "https://login.microsoftonline.com/f242226b-5204-4bb2-86ff-69e42c87814c"
# Overrides the default auth redirectUrl.
redirect_uri = ""

ローカルで環境変数 `.env` を使う場合の設定例

.env

NEXT_PUBLIC_SUPABASE_URL="http://127.0.0.1:54321"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJh...."
SUPABASE_SERVICE_ROLE_KEY="eyJh...."

GITHUB_CLIENT_ID="{GitHubのクライアントID}"
GITHUB_SECRET="{GitHubのクライアントシークレット}"
GOOGLE_CLIENT_ID="{GoogleのクライアントID}"
GOOGLE_SECRET="{Googleのクライアントシークレット}"

Supabaseの設定ファイル config.toml での環境変数の読み込み方

例

supabase\config.toml

[auth.external.github]
enabled = true
client_id = "env(GITHUB_CLIENT_ID)"
secret = "env(GITHUB_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""

各OAuthを有効化するには、
それぞれの
enabled = false
を
enabled = true
に変更します。

環境変数を読み込む場合は、拡張子tomlファイルでは↑env()関数を使います。

※環境変数を直接書き込んではいけません、
直接書き込んで利用したい場合は .gitignoreファイルに追加してgitの管理外にしておいてください。

環境変数 Next.jsの場合

Next.jsの場合は、 process.env.***** で読み込みます。

読み込み例

pages.tsx

export default function Home() {
  return (
    <div className="">
        NEXT_PUBLIC_SUPABASE_URL="http://localhost:54321"
        <br />
        NEXT_PUBLIC_SUPABASE_URL="{process.env.NEXT_PUBLIC_SUPABASE_URL}"
        <br />
        <br />
        NEXT_PUBLIC_SUPABASE_REDIRECT_URL="http://localhost:54321/auth/v1/callback"
        <br />
        NEXT_PUBLIC_SUPABASE_REDIRECT_URL="{process.env.NEXT_PUBLIC_SUPABASE_REDIRECT_URL}"
        <br />
        <br />
        NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJh...."
        <br />
        NEXT_PUBLIC_SUPABASE_ANON_KEY="{process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}"
    </div>
  )
}

Slack認証

サーバー

Slack認証の取得

まずSlackにアカウントを作り
ログインします。
そしてワークスペース＝チャットする場所を作成します。
名前は適当につけます。

サインインをしてワークスペースを作っていると、

から
Create an Appボタンが表示されますので、このボタンを押します。

※ モーダルウィンドウとは、元画面の上に別のウィンドウを表示し、
ユーザーに情報を伝える画面のことです。

Create an app モーダルウィンドウが開きます。

From scratch を選択します。

Name app & choose workspaceモーダルウィンドウが開きます。

App Name
practice-app (適当につけます。)

ワークスペースを選択して決定ボタンを押します。

Basic Informationページが表示されます。

そうすると、下の方にある「App Credentials」の項目から、

App ID
Date of App Creation
Client ID
Client Secret
Signing Secret
Verification Token
をメモしておきます。

App ID
A06C....

Date of App Creation
January 4, 2024

Client ID
6424....

Client Secret
9a6b....

Signing Secret
d12c....

Verification Token
BXGj....

次にリダイレクト先を設定します。
Slack API: Applications | masakinihirota Slack

https://api.slack.com/apps/[App ID]/oauth?

左サイドバーから OAuth & Permissions を選択し、
Redirect URLs 内の Add New Redirect URL を選択します。

あとは、Supabaseの設定ファイルに書き込みます。

ローカル

Supabaseでは利用できません。
Slack側がHTTPSを要求してくるのに対して、
Supabaseのローカル側はHTTPで動作しているためです。

Slackの Redirect URLは「https」を要求されるので
Supabaseのローカル認証では使えないようです。

※Supabaseのローカルのリダイレクト先はHTTPの、

http://127.0.0.1:54321/auth/v1/callback

だからです。

ローカルでSupabaseをHTTPSで動作させる方法は知りません。

Google認証

サーバー

ログインをします。

左上のGoogleアイコンの右側にあるプロジェクトを選択します。

モーダルウィンドウが開きます。
「新しいプロジェクト」を作成します。

※最大10件まで新規作成可能です。

プロジェクト名
oauth-practice (適当な名前)

「作成」ボタンを押します。

しばらく待ちます。

プロジェクトを選択します。

APIとサービスを選択します。

左サイドバーの OAuth 同意画面を選択します。

1 OAuth 同意画面

User Type
外部を選択します。

「作成ボタン」を押します。

アプリ情報

※複数埋める箇所がありますが、必要項目だけ埋めてください。

アプリ名＊
oauth-practice (適当な名前)

ユーザーサポートメール＊
*****@gmail.com

デベロッパーの連絡先情報
メールアドレス＊
*****@gmail.com

「保存して次へ」ボタンを押します。

２スコープ

特に変更はありません。

「保存して次へ」ボタンを押します。

３テストユーザー

テスト中は１００名までアプリにアクセスできます。

特に変更はありません。

「保存して次へ」ボタンを押します。

４概要

入力した情報を確認した後に、

「ダッシュボードに戻る」ボタンを押します。

認証情報

次に、左サイドバーの認証情報を選択します。

「＋認証情報を作成」ボタンを押します。

OAuthクライアントIDを選択します。

アプリケーションの種類から適切なものを選びます。

ウェブアプリケーションを選択します。

アプリケーションの種類＊
ウェブアプリケーション

名前＊
OAuth-practice (適当な名前)

承認済みのリダイレクトURI

「+URIを追加」ボタンを押します。

ローカルのコールバックURLを入力します。

http://127.0.0.1:54321/auth/v1/callback

「作成」ボタンを押します。

「OAuth クライアントを作成しました」と表示されます。

クライアントID
6511....

クライアントシークレット
GOCS....

作成日 2024年1月5日 5:32:41 GMT+9
ステータス ✔有効

が表示されるので保存しておきます。

JSONをダウンロードボタンを押すと、PCに保存できます。

「OK」ボタンを押します。

あとは、Supabaseの設定ファイルに書き込みます。

ローカル

ローカルでは、リダイレクト先をこのように設定します。

http://127.0.0.1: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
http://127.0.0.1:3000

Authorization callback URL
http://localhost:54321/auth/v1/callback
http://127.0.0.1:54321/auth/v1/callback

※↑ローカル開発環境の場合

項目を埋めたら緑色の「Register application」ボタンを押します。

※localhostは127.0.0.1

localhostは通常、IPアドレスの127.0.0.1に対応しています。
これは、ネットワーク接続を必要とせずにコンピュータ自体にアクセスするための特別なアドレスです。
これは「ループバックアドレス」とも呼ばれ、自分自身にネットワーク接続をループバックするために使用されます。

そうすると、次の項目の値が生成されます。

Client ID
85ff....

Client secrets
af8a....

取得したClient ID等を .env に書き込みます。

.env

GITHUB_CLIENT_ID={GITHUBのクライアントID}
GITHUB_SECRET={GITHUBのクライアントシークレット}

例

.env

GITHUB_CLIENT_ID="85ff...."
GITHUB_SECRET="af8a...."

※ ↑環境変数はダブルクォーテーションで囲みます。

ローカル

ローカルでは、リダイレクト先をこのように設定します。

http://127.0.0.1:54321/auth/v1/callback

各OAuthからクライアントIDとクライアントシークレットを取得後は

サーバーの場合は

Supabaseのダッシュボードから
左サイドバーの Authentication を選択します。
Providers の項目から
各OAuthを有効化します。
各OAuthの Client ID とClient Secretを入力します。
「Save」ボタンを押します。

ローカルの場合は

supabase\config.toml ファイルにredirect_urlを設定します。

.env ファイルに
各OAuthの Client ID とClient Secretを入力します。

Supabaseを再起動させます。

参考URL

Slack認証

Supabase AuthでSlack認証を試してみた | DevelopersIO

Google認証

supabaseでLogin with Google

話題のSupabaseでサクッとGoogle認証機能をつくってみた！ #React - Qiita

GitHub認証

GitHub認証ローカルで動かす OAuth-practice #GitHub - Qiita

【Supabase入門】認証・DB・リアルタイムリスナーを使ってチャットアプリを作ろう

※サンプル4つ目の Azure 認証は取得を諦めました。
~~・・・めんどくさくなった~~
4つもいらないと思ったため。

認証の流れ

サンプル

呼び出し

OAuth SignIn Flow in SSR environment

↓

await supabase.auth.signInWithOAuth({
      provider: 'github',
      options: {
		redirecto: "https://example.com/auth/callback"
	}
})

↓GitHubにお願いしに行く。

OAuth provider server <<=GitHub等

↓GitHub等からSupabaseに戻ってくる。

Supabse server
	OAuth Endpoint
		https://<project-ref>.supabse.co/auth/v1/callback

↓Supabaseからエンドポイントに戻ってくる。

https://example.com/auth/callback

↓エンドポイントから自分のアプリに戻ってくる。

https://example.com/

サンプルをローカルで動作させる

GitHub 成功
Slack 失敗
Google 成功
Azure 未登録

サンプルのローカルでの設定 GitHubとGoogleの認証に成功 Slackは失敗 Azureは未登録

supabase\config.toml

# A string used to distinguish different Supabase projects on the same host. Defaults to the working
# directory name when running `supabase init`.
project_id = "oauth-flow-nextjs"

[api]
# Port to use for the API URL.
port = 54321
# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
# endpoints. public and storage are always included.
schemas = ["public", "storage", "graphql_public"]
# Extra schemas to add to the search_path of every request. public is always included.
extra_search_path = ["public", "extensions"]
# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
# for accidental or malicious requests.
max_rows = 1000

[db]
# Port to use for the local database URL.
port = 54322
# The database major version to use. This has to be the same as your remote database's. Run `SHOW
# server_version;` on the remote database to check.
major_version = 15

[studio]
# Port to use for Supabase Studio.
port = 54323

# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
# are monitored, and you can view the emails that would have been sent from the web interface.
[inbucket]
# Port to use for the email testing server web interface.
port = 54324
smtp_port = 54325
pop3_port = 54326

[storage]
# The maximum file size allowed (e.g. "5MB", "500KB").
file_size_limit = "50MiB"

[auth]
# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
# in emails.
site_url = "http://localhost:3000"
# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
additional_redirect_urls = ["https://localhost:3000", "https://supabase-oauth-flow.tunnelto.dev/**"]
# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 seconds (one
# week).
jwt_expiry = 3600
# Allow/disallow new user signups to your project.
enable_signup = true

[auth.email]
# Allow/disallow new user signups via email to your project.
enable_signup = true
# If enabled, a user will be required to confirm any email change on both the old, and new email
# addresses. If disabled, only the new email is required to confirm.
double_confirm_changes = true
# If enabled, users need to confirm their email address before signing in.
enable_confirmations = true

# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`,
# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
[auth.external.apple]
enabled = false
client_id = ""
secret = ""
# Overrides the default auth redirectUrl.
redirect_uri = ""
# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
# or any other third-party OIDC providers.
url = ""

[auth.external.github]
enabled = true
client_id = "env(GITHUB_CLIENT_ID)"
secret = "env(GITHUB_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""

[auth.external.google]
enabled = true
client_id = "env(GOOGLE_CLIENT_ID)"
secret = "env(GOOGLE_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""

[auth.external.azure]
enabled = false
client_id = "env(AZURE_CLIENT_ID)"
secret = "env(AZURE_SECRET)"
url = "https://login.microsoftonline.com/f242226b-5204-4bb2-86ff-69e42c87814c"
# Overrides the default auth redirectUrl.
redirect_uri = ""

[auth.external.slack]
enabled = true
client_id = "env(SLACK_CLIENT_ID)"
secret = "env(SLACK_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""

[analytics]
enabled = false
port = 54327
vector_port = 54328
# Setup BigQuery project to enable log viewer on local development stack.
# See: https://logflare.app/guides/bigquery-setup
gcp_project_id = ""
gcp_project_number = ""
gcp_jwt_path = "supabase/gcloud.json"

.env

NEXT_PUBLIC_SUPABASE_URL="http://127.0.0.1:54321"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJh...."

GITHUB_CLIENT_ID="85ff...."
GITHUB_SECRET="af8a...."

GOOGLE_CLIENT_ID="6511...."
GOOGLE_SECRET="GOCS...."

# AZURE_CLIENT_ID=""
# AZURE_SECRET=""

# Slackはローカルでは利用できない
SLACK_CLIENT_ID="6424...."
SLACK_SECRET="9a6b...."

※環境変数の後半は非表示にしています。
※↑この設定はローカル用です、↓サーバー用の環境変数は別に設定したりする必要があります。

Next.jsの環境変数は、↓こちらをご覧ください。

Configuring: Environment Variables | Next.js

https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

拡張子を変えた環境変数ファイルを用意しないのならば、
↓接頭辞 "SERVER_"を追加するなど区別できるようにします。

.env server用

SERVER_GITHUB_CLIENT_ID="85ff...."
SERVER_GITHUB_SECRET="af8a...."

※SERVERの設定はデプロイ先のサーバーの環境変数に設定します。
例えば、Vercel等に登録しておきます。

以上でサンプルのローカルでの動作確認をしました。

認証後に Supabaseのauth.usersテーブルから、必要な情報をpublicスキーマのテーブルに書き込みます。

その詳細な情報は

Supabase Auth スキーマとそのテーブルの詳細 #PostgreSQL - Qiita
https://qiita.com/masakinihirota/items/7f65f732ecbafbd5cb00

この記事を参考に必要な項目を選んで、コードを書きます。

参考 Google Facebook認証

Next.js+Supabaseで認証機能を実装しよう【コード付き完全ガイド】｜TodoONada株式会社
https://note.com/libproc/n/n168e87864291

Next.js + Supabaseでソーシャルログインを実装する方法｜TodoONada株式会社
https://note.com/libproc/n/n7d417158843d

招待形式

Supabase + Next.jsでユーザー招待機能を実装する | NullNull
https://nullnull.dev/236cebc7-96f0-4a12-b719-94fe23ceccc9

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Next.js + Supabase アプリでサーバーやローカル開発環境で、認証に必要な Client ID と Client secrets の取得。(Slack、Google、GitHub)

この記事から、Middlewareを複数のファイルに分割する部分のみの記事

参考リポジトリ

この記事の目的

サンプル

用語

サーバー

ローカル

サンプル

はじめに

重要

サーバー上で認証を動かす場合は

ローカル上で認証を動かす場合は

Supabaseでの設定の共通の注意点

Supabase の共通設定

Supabaseの設定ファイル config.toml

OAuth認証の有効化の基本形

redirect_uri

*****

Supabase初期化時のファイル (OAuth部分を抜粋)

ローカルで環境変数 .env を使う場合の設定例

Supabaseの設定ファイル config.toml での環境変数の読み込み方

Slack認証

サーバー

ローカル

Google認証

サーバー

1 OAuth 同意画面

２スコープ

３テストユーザー

４概要

認証情報

ローカル

GitHub認証

サーバー

GitHubへアクセス

ローカル

各OAuthからクライアントIDとクライアントシークレットを取得後は

サーバーの場合は

ローカルの場合は

参考URL

Slack認証

Google認証

GitHub認証

認証の流れ

サンプルをローカルで動作させる

参考 Google Facebook認証

招待形式

ローカルで環境変数 `.env` を使う場合の設定例