supabase-tutorial-react-auth

Supabaseの公式Reactチュートリアル。
基本的なユーザー管理アプリを構築する。以下の機能が含まれる。

• Supabase Database: ユーザーデータを格納するためのPostgresデータベース。
• Supabase Auth: ユーザーはマジックリンク(パスワードなし、電子メールアドレスのみ)でサインインできます。
• Supabase Storage: ユーザーは写真をアップロードできます。
• Row Level Security: データは保護されているため、個人は自分のデータにのみアクセスできます。
• Instant APIs: データベーステーブルを作成すると、APIが自動的に生成されます。

Requirement

Fedora37ローカル環境上のDocker環境内で実行確認済。
また、Reactは以下のバージョンで実行確認済。

$ node -v
v19.3.0

$ npm -v
9.2.0

$ yarn -v
1.22.19

Installation

プロジェクトを作成する

1. app.supabase.comにアクセスする。
2. New projectをクリックする。
3. プロジェクトの詳細を入力する。
4. 新しいデータベースが起動するまで待つ。

データベーススキーマを設定する

1. ダッシュボードのSQL Editorページに移動する。
2. User Management Starterをクリックする。
3. Runをクリックする。

APIキーを取得する

1. ダッシュボードのSettingsページに移動する。
2. サイドバーのAPIをクリックする。
3. このページでAPI URL, anon, service_roleを取得する。

Repositoryをクローンする

git cloneコマンドで本Repositoryを任意のディレクトリ配下にcloneする。

環境変数の設定

本Repository直下に.envファイルを作成し、以下のとおり設定する。

REACT_APP_SUPABASE_URL = ${プロジェクトURL} # API Settings で取得したProject URL
REACT_APP_SUPABASE_ANON_KEY = ${APIプロジェクトキーanon} # Project API keys で取得したanon

パッケージをインストールする

本Repository直下で以下のコマンドを実行する。

$ yarn install

Usage

本Repository直下で以下のコマンドを実行する。

$ yarn start