STEP2. Next.js＋Supabaseで認証機能の実装

2024年8月24日 20:31

Difyで認証機能を実装することを目標に、まずはNext.jsとSupabaseを使った認証機能を試します。

まずは以下の講座を受講して、Next.js を理解することからはじめました。
有料部分の講座はハンズオン形式で機能ごとに設定を確認しながら進めることが出来るので、理解を深めるのにとても役に立つのでぜひ！

また、講座の無料公開部分でLINE 登録すると、完成版のソースをダウンロードすることもできます。今回こちらのソースコードを利用してログインが出来るところまで試します。（※有料部分の記載や記事の転用はしておりません）

別の記事ではNext.js初心者の自分が思った疑問点（自分のあたまの中）を整理してます。

1. Supabaseの準備

Supabase にサインアップ＆ログインします。
（アカウント作成時にOrganizationsは自動作成されます）

1.1 プロジェクトの作成

ダッシュボードの左メニュー All projects から New projectボタンをクリックし、Choose organization のリストから自身の organization（～'s Org）を選択します。

All projects＞New project＞Organizationを選択

Project name と Database Password を入力し、
Regionは「Northeast Asia(Tokyo)」を選択。

Project nameとDatabase PasswordとRegionを設定

1.2 APIキーとURLの確認

左メニューから Project Settings ＞API を選択し、[ API Settings ] の [ Project URL ]と[ Project API Key ]("anon public") の値をメモ帳に控えておく。

1.3 リダイレクトURLの設定

左メニューから Authentication ＞URL Configuration を選択し、[ Site URL ] の値を変更します。
今回ログイン機能を試すにあたり、未指定時に適用されるSite URLの” localhost "の部分を、Next.jsのアプリケーションを実装するサーバのURL（＋ポート指定「:3000」）に変更します。

1.4 SMTPサーバの設定

公式ドキュメントに記述の通り、認証メール送信には1時間あたり３通の Rate Limit 制限があります。

2023 年 10 月 21 日現在、これは 1 時間あたり 3 通のメールに更新されています。これを変更できるのは、独自のカスタム SMTP 設定のみです。

https://supabase.com/docs/guides/platform/going-into-prod

試しているとすぐ３通を超えてしまうので、先にSMTP設定からカスタムSMTPサーバの設定を実施しておきます。

左メニューのProject Settings ＞ Authentication ＞ SMTP Settingsに遷移

「Enable Custom SMTP」のトグルをONにして各項目に値を入力後SAVEをクリック

「Sender email」「Sender name」今回は自分のメールアカウントを設定、
「SMTP Provider Settings」の各項目は自分のメールアカウントのサーバ設定を確認する。

1.5 Auth Providers

左メニューから Authentication ＞Providers を選択し、Auth Providers のEmailのメニューを展開し、「Enable Email provider」「Confirm email」「Secure email change」のトグルがONになっていることを確認（変更した場合はSAVEをクリックして保存）します。

1.6 データベースの作成

左メニューから SQL Editor を選択する。

参照記事（無料公開部分）を見ながらテーブル作成を実施します。
その後、左メニューの Database からテーブルが作成されたことを確認します。

2. Next.js の準備

前提：Node.jsとnpmの両方がインストールされていること
最新の安定版 Next.js を使用する場合、Node.js 14.6.0 以上が必要です。

node -v
npm -v

2.1 プロジェクトの作成

①講座の無料公開部分でLINE 登録し、ソースの場所を取得します。
②実装するサーバの任意の場所に空のディレクトリーを作成します。
③２のディレクトリで１のリポジトリをgit cloneで取得します。

参考：Next.jsアプリケーションを新規に作成する場合

通常、新規にアプリケーションを作成する場合は、実装するサーバの任意のディレクトで以下のコマンドを実行します。（今回は実施しません）

npx create-next-app -e with-supabase {{ My-Project-Name }}

npx: Node.jsのパッケージランナーで、インストールせずにパッケージを実行できます。
create-next-app: Next.jsの公式プロジェクト作成ツールです。
-e with-supabase:
- -eは --example の省略形で、特定のテンプレート（例）を使用することを指定します。
- with-supabase は、SupabaseとNext.jsを統合した公式のサンプルテンプレートです。
{{ My-Project-Name }}: 作成するプロジェクトの名前を指定します。

2.2 環境変数の設定

2.1の③でcloneしたリポジトリ（プロジェクトのルートディレクトリ）に移動します。「.env.local」を作成し、1.2項で確認した [ Project URL ] と [ Project API Key ] を、下記 ” your-project-url ” ” your-anon-key ” の部分に設定します。

# Update these with your Supabase details from your project settings > API
# https://app.supabase.com/project/_/settings/api
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key