Supabase AuthをNext.jsで触ってみた-1
公式のチュートリアルに従って、Supabaseを使用した認証画面をNext.jsで作成しました。手順を紹介します。まず、create-next-appを使用してNext.jsアプリをセットアップしました。次に、Supabase CLIを使用してSupabaseプロジェクトをセットアップしました。.env.localにプロジェクトIDとAPIキーを設定し、SDKをインストールしました。ログインページを作成し、ユーザーの作成とログインを試しました。セットアップに時間がかかりましたが、便利でカスタマイズ可能なAPIも使用できるため、CLIがあることは素晴らしいと感じました。チュートリアルの続きは後日紹介します。
目次
Supabaseを使った認証画面を、公式のチュートリアルにしたがってNext.jsで作ってみました。やった内容の振り返りをかねて、手順を紹介します。
Next.jsのApp Routerでアプリをセットアップする
構築の順番は、先にNext.jsのアプリを用意して、そこにSupabaseを組み込む形をとります。そのため、まずはcreate-next-app
を実行しましょう。
npx create-next-app@latest
今回はこのような設定で立ち上げました。
✔ What is your project named? … nextjs-supabase
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) …Yes
✔ Would you like to customize the default import alias (@/*)? … No
ディレクトリの中に入っておきます。
$ cd nextjs-supabase
Supabase CLIでSupabaseプロジェクトをセットアップする
続いてSupabase側の準備を行います。今回はCLIから操作してみました。
Supabase CLIをインストールする
CLIをインストールしておきます。
$ npm i -D supabase
自分のSupabaseアカウントつながってるか確認しておきましょう。
% npx supabase projects list
Cannot find project ref. Have you run supabase link?
LINKED │ ORG ID │ REFERENCE ID │ NAME │ REGION │ CREATED AT (UTC)
─────────┼──────────────────────┼──────────────────────┼────────────────────────┼────────────────────────┼──────────────────────
│ eairkgncwshmtocyglhu │ zcffmbecqgibgossrapl │ flutter-stripe-example │ Northeast Asia (Tokyo) │ 2023-09-19 13:18:16
エラーが出る場合、npx supabase login
することで解決する(はず)です。
Supabase projectを作成する
ダッシュボードから作っても良いのですが、試してみたかったのでCLIからプロジェクトを作りました。--org-id
や--db-password
は適宜書き換えて使ってください。
$ supabase projects create my-project --org-id cool-green-pqdr0qc --db-password ******** --region us-east-1
Created a new project nextjs-demo at https://supabase.com/dashboard/project/xxxxxx
https://supabase.com/dashboard/project/xxxxxx
のxxxx
がプロジェクトIDです。
プロジェクトIDを以下のようなURL形式で、.env.local
に設定しましょう。
NEXT_PUBLIC_SUPABASE_URL=https://{YOUR_PROJECT_ID}.supabase.co
API Keyを取得する
Next.jsから使うため、APIキーを取得しましょう。これもCLIから作成できます。
% npx supabase projects api-keys --project-ref xxxxxx
実行結果がこちらです。
NAME │ KEY VALUE
───────────────┼─────────────────────────────────────────────
anon │ xxxxx
service_role │ xxxxx
anon
の方のAPIキーを.env.local
に設定しましょう。
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SupabaseをNext.jsに組み込む
ここからは組み込みを行っていきます。
SDKをインストールする
まずはSDKをインストールしましょう。Next.js用のヘルパーがあるのがありがたいですね。
npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
Next.jsのミドルウェアを用意する
src/middleware.ts
を作成して、認証用のミドルウェアを追加します。
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextRequest, NextResponse } from 'next/server'
export async function middleware(req: NextRequest) {
const res = NextResponse.next()
// Create a Supabase client configured to use cookies
const supabase = createMiddlewareClient({ req, res })
// Refresh session if expired - required for Server Components
await supabase.auth.getSession()
return res
}
// Ensure the middleware is only called for relevant paths.
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
* Feel free to modify this pattern to include more paths.
*/
'/((?!_next/static|_next/image|favicon.ico).*)',
],
}
ログインページを追加する
続いてログインページをsrc/app/login/page.tsx
で作りました。クライアント側での操作が多いため、use client
をつけます。
'use client'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useRouter } from 'next/navigation'
import { useState } from 'react'
export default function Login() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const router = useRouter()
const supabase = createClientComponentClient()
const handleSignUp = async () => {
await supabase.auth.signUp({
email,
password,
})
router.refresh()
}
const handleSignIn = async () => {
await supabase.auth.signInWithPassword({
email,
password,
})
alert('signed in')
router.refresh()
}
const handleSignOut = async () => {
await supabase.auth.signOut()
router.refresh()
}
return (
<>
<input name="email" onChange={(e) => setEmail(e.target.value)} value={email} />
<input
type="password"
name="password"
onChange={(e) => setPassword(e.target.value)}
value={password}
/>
<button onClick={handleSignUp}>Sign up</button>
<button onClick={handleSignIn}>Sign in</button>
<button onClick={handleSignOut}>Sign out</button>
</>
)
}
画面はスタイルをつけていないとこんな感じになると思います。
アカウント作成を試す
メールアドレスとパスワードを入れて、Sign upをクリックしましょう。
SupabaseのAuthenticationにユーザーが追加されました。
利用したログイン情報を再度入力して、Sign inをクリックするとログイン処理が走ります。
途中まで触った感想
ほとんどセットアップに時間を使って終わった感じではあります。ただ、CLIからセットアップなどが一式実行できるのはかなり便利だと思いますし、CLIから行けるということは、Management APIあたりをみればAPIを使ったカスタムワークフローとかも作れそうにみえます。
チュートリアルはまだまだ続きがありますので、続きはまた後日紹介します。