Supabase。無料OSS/APIフル活用！サクッと作るログイン認証・パスワードリセット機能開発実践講座

Supabaseによる認証機能開発の前提知識として、 TypeScript・Angular・Node.jsの概要についてご説明します。

Supabaseによる認証機能開発の前提知識として、実際にどのような流れで開発を行うのか、いくつかの具体例を通じて開発作業の解像度を上げる、 また、今回利用する技術スタックがどのような開発に向いているのか理解する、これらの点を押さえていきましょう。

今回開発に使用するフレームワークである、Angularのアーキテクチャ概要についてご説明します。

ユーザーのサインアップ、ログイン、パスワードリセットなどの認証機能をSupabaseで実装する際の、基本的な管理単位であるSupabaseのプロジェクトを作成します。

GmailのSMTPサーバーを使用してSupabaseのメール通知設定を行います。

次のレクチャー以降、本格的に開発を行うための準備として、開発プロジェクトのセットアップを行います。

次のレクチャー以降、Supabase APIを使って認証機能を開発するための準備として、Supabaseクライアントライブラリのインストールを行います。

ユーザー名、メールアドレス、パスワードの各フィールドに対してバリデーションを行い、入力値が適切であるかをチェックします。

ユーザー登録フォームに入力された情報をインプットに、SupabaseのAPIを使用して新しいユーザーを登録します。さらに、ユーザー登録後にサインアップ検証メールを確認し、ログイン画面にリダイレクトされることを確認します。

ログイン機能のカスタムバリデーションを実装します。

今回は「Login」ボタンをクリックした際に、Supabaseのサインイン用APIを呼び出して、実際にログイン処理を行う実装を行います。

ホーム画面の上に表示されているナビゲーションバーを、ホーム画面のみで表示、すなわちログインしているユーザーのみが特定のナビゲーションバーの項目を表示できるようにします。また、ログインしていないユーザーが利用する、ログイン画面等では非表示にする制御を実装していきます。

ナビゲーションバーの右上に、現在ログイン中のユーザー名などを含む、ドロップダウンメニューを表示する実装を行います。ログイン後にユーザー名を表示し、ログアウトボタンを含むメニューを表示することが目的です。

前回追加したユーザーメニュー内の、ログアウトリンククリックイベントに紐づく、ログアウト機能を実装していきます。

Angularの認証ガード機能を実装していきます。

ユーザーがパスワードを忘れた場合にセルフリセットできるようにするための、リセットリンク送信機能開発の第一弾として、カスタムバリデーションを実装します。

ユーザーがパスワードを忘れた場合にセルフリセットできるようにするための、リセットリンク送信機能開発の第二弾として、Supabaseを使ってリセットリンクを送信する機能を実装します。

パスワードリセット機能の第一弾として、カスタムバリデーションを実装します。

パスワードリセット機能の第二弾として、Supabaseを使って実際にパスワードをリセットする機能を実装します。