【Nextjs】SupabaseのSSOログインよりもPrisma+Better-Authの方が楽だと思ったお話

注意

こちらZennに投稿した記事のコピーです。

私について

中学三年生で一般人よりかはちょっとプログラミングが得意だと自負しているごく普通の人です。
時々パソコンでウイルス暴発させてバカみたいなことしてます。
Nextjs歴: 2年

導入...？

これまで私はSSOログインというものに興味を持っていながらも「実装がめんどくさそう」という理由で放置していました。
しかしNextjsを初めて早1年（今年の初め）、友人からSupabaseというとんでもなく便利そうなデータベースの存在を教えてもらったときから私の考えは変わり始めました。

本文

Supabase編

Supabaseを使い始め、データベースの直感的操作というものを知り、当時の私は「もう何でも作れそう。私は神だ」とか思っちゃったりしていました。
そんなある日、私はSupabase AuthにSSOログイン機能があることを知ります。
「早速実装してみよう」なんて思いながら設定を始め……最初の挫折にぶち当たります。

Supabaseのリダイレクト設定……めんどくさくね？

このタイトル通り、私が思ったのは「Supabaseのリダイレクト設定……めんどくさくね？」です。
多分おそらくメイビー絶対私の無知のせいなのではという予想は持ち得ていますが、ここではそんなこと置いておいて。
私が覚えている限りのめんどくさいポイントを紹介します。
Google OAuth前提です。

1. Googleのリダイレクト設定とSupabase Authのリダイレクト設定

Google OAuthを実装するにはまず、Client idとClient Secretを取得する必要があると思います。
そこはまぁ別にいいんです。コピーして張り付ければいいだけなんですから。

……しかし、そのあとです。
私がぶち当たっためんどくさいポイント、それは――――SupabaseのGoogle用Callback URL、Additional Redirect URLs、NextjsのCallback URL、GoogleのURL設定……なんかややこしくね？！？！

えぇ、今なら理解してますとも。
あれでしょ？　SupabaseのOAuthのCallback URLをGoogleのCallbackに設定して、
そんでNextjsのCallback URLをSupabaseのAdditional Redirect URLsに設定して、
そんで……あぁ、今ももう忘れてしまっている。最初の「理解してますとも」はぜひとも忘れてもらって。と

というようにね、なんか設定がややこしくてめんどくさいんですよ。
同じような単語が多すぎて「どれをどうすればいいんだっけ？」ってなってしまう。
覚えれる人には問題ないだろうけど、私みたいなスライム以下の記憶力しか持たない人には難しかったというお話です。

2. あとからの仕様変更がめんどい

そもそもこれはSupabase Authを使ってる人に言えちゃうことだと思うんですけど、Auth専用のテーブルにユーザーが保存されるせいでいろいろめんどくさいなと感じちゃったりしたんです。
早速比較してみましょう。最近私はprisma + better-authを使っているのでそれで例を出します。

model User {
  id            String    @id @default(cuid())
  email         String    @unique
  username      String?   @unique
  name          String?
  bio           String?
  image         String?
  emailVerified Boolean   @default(false)
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt

  // リレーション
  articles      Article[]
  comments      Comment[]
  reactions     Reaction[]
  followers     Follow[]   @relation("Following")
  following     Follow[]   @relation("Follower")
  badges        UserBadge[]
  sessions      Session[]
  accounts      Account[]

  @@map("users")
}

このようにprismaだとテーブルに結構拡張性がありますね。
しかし、supabaseだとprofileテーブルとかを新たに作る必要があると思います。（たぶん。おそらく。めいびー。違うかったら教えて）

……うん、やっぱりsupabaseはめんどくさい。
結局私はこんな思考に陥ってしまうんです。

Prisma + Better-Authの場合

神

こいつらはもうね、万能ですよ。
supabaseと違ってprismaセットアップした後にAIに「Better-Authのセットアップして」っていえば勝手にベースとなるテーブル（AccountやUser、あとSession）のmodelは作ってくれますし、あとから自由にUserテーブルについていじることができる。
なによりdbの付属機能を使わないので自宅鯖とかに突っ込んだPostgreSQLやMySQLでも使えるのがみそ！
もうね、便利すぎまして。大好きという言葉しか出ません。

Supabaseだったらコールバックurlを何個も設定しないといけないところも、better-authで設定したエンドポイント/api/auth/callback/googleのみGoogleに設定するだけでいけちゃいます！（詳しくはそれ用の記事を見てもらって）

ただちょっとめんどくさいところ

少なくともbetter-authを使うには、3つのファイルの設定が必要です。
@/lib/auth.ts、@/lib/auth-client.ts、@/app/api/auth/[...all]/route.ts。
この三つの役割を説明しましょう。

@/lib/auth.ts

@/lib/auth.ts

import { betterAuth } from "better-auth"
import { prismaAdapter } from "better-auth/adapters/prisma"
import { prisma } from "./prisma"

export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: "postgresql",
  }),
  emailAndPassword: {
    enabled: true,
  },
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      enabled: !!process.env.GOOGLE_CLIENT_ID,
    },
  },
  session: {
    expiresIn: 60 * 60 * 24 * 7, // 7日間
    updateAge: 60 * 60 * 24, // 24時間ごとに更新
  }
});

これはbetter-authのバックエンド用クライアントを作成するためのファイルです。
SSOの設定だったりセッションの期限だったりを設定できます。
確かsessionは設定しないでも動いたはず……？

@/lib/auth-client.ts

@/lib/auth-client.ts

import { createAuthClient } from "better-auth/react"

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL || "http://localhost:3000",
})

export const {
  signIn,
  signOut,
  signUp,
  useSession,
} = authClient;

これはbetter-authのフロントエンドクライアントを生成するためのものです。
ここのsignUpだったりの関数を使うことでログイン、登録機能を実装できます。
関数一つでできるなんて便利だね！！

@/app/api/auth/[...all]/route.ts

import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { GET, POST } = toNextJsHandler(auth);

これはbetter-authに関するリクエストを受けるためのハンドラー定義のはず。
詳しくは知らないけどここでログインだったり登録、ログアウトだったりの処理をやってくれます。
バックエンドなので@/lib/auth.tsを使っていますね。やったね！！

総括

拡張性高いしbetter-authの方が便利じゃね？
以上、私の意見でした！！
まだまだ何も知らぬにわかエンジニアなので問題点とかあればぜひともコメント（ここにあったっけ？）などで教えてくれると嬉しいです。

ぐっばい！

関連記事

Supabaseのセットアップ方法: https://zenn.dev/buenotheebiten/articles/8d37297130bf93
Better-Authのセットアップ記事: https://zenn.dev/eju_labs/articles/2bd20ff92dc801

Supabaseの公式ドキュメント: https://supabase.com/docs/guides/getting-started/quickstarts/nextjs
Better-Authの公式ドキュメント: https://www.better-auth.com/docs