SupabaseのAuth UIをNext.js ( App Router )で使ってみた

最近のIDP系サービスは認証系のUIライブラリも提供しており、今回はSupabaseのReact向けライブラリをNext.jsで利用してログインページを実装しました。SupabaseのAuth UI Reactパッケージを使うことで、SNSログインにも対応した簡単なUIが実装できました。テーマやCSSのカスタマイズも可能で、試してみた結果を今後の記事にする予定です。ただし、RSCでは使えないようです。また、use clientを外すとエラーが発生し、クライアント側での設計が必要です。参考記事はこちら：https://supabase.com/docs/guides/auth/auth-helpers/auth-ui

最近のIDP系サービス（Supabase / AWS Amplify / Auth0 / etc.. ）は認証系のUIライブラリも提供してくれています。今回はSupabaseのReact向けライブラリを、Next.js ( App Router )で使ってみました。

ライブラリのインストール

利用するライブラリはこの3つです。

npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared

`use client`でページを実装する

src/app/login/page.tsxなどのファイルを作成して、ログインページを実装しましょう。

'use client'
import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'
import {
    // Import predefined theme
    ThemeSupa,
} from '@supabase/auth-ui-shared'

const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL as string,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string,
)


export default function Login() {
  return (
    <Auth
        supabaseClient={supabase}    
        appearance={{ theme: ThemeSupa }}
    />
  )
}

SNSログインにも対応したUIがこれだけで実装できました。

テーマやCSSカスタマイズもできる様子なので、試し次第記事にしていきます。

RSCでは使えない様子

use clientを試しに外したところ、エラーが出ました。Client側で動かすことになる前提で、ページの設計などが必要そうです。

参考記事

https://supabase.com/docs/guides/auth/auth-helpers/auth-ui