*開発時のセッション取得

Next-Authだと「Auth-Secret・Google-ID / Secret」を用意すると、SignInボタンをクリックした後にユーザー情報の取得が出来たが、同じ感じでBetter-Authを使い始めると、SignInボタンを押しても何も起きない（ように見える）& ユーザー情報がnullのまま

-->

これはNext-AuthはデフォルトでJWTというのを用いてCookieにセッションが保存されるようになっている一方で、Better-Authはデフォルトでそのような機能がない為。つまりBetter-Authを使うならDBにセッションを保存する必要がある。

https://www.better-auth.com/docs/adapters/sqlite

試しにsqliteを使ってみるとSignIn後にユーザー情報が取得できるのがわかる

セッショントークン

export async function proxy(request: NextRequest) {
  const isProd = process.env.NODE_ENV === "production";

  const sessionToken = isProd
    ? request.cookies.get("__Secure-better-auth.session_token")?.value
    : request.cookies.get("better-auth.session_token")?.value;

  if (!sessionToken) {
    const url = new URL("/", request.url);
    return NextResponse.redirect(url);
  }

開発時と本番でセッショントークンの名前が異なる

Better-Auth

セットアップ：PrismaAdapter等

https://www.prisma.io/docs/guides/betterauth-nextjs

pnpm add better-auth

npm install prisma tsx @types/pg --save-dev
npm install @prisma/client @prisma/adapter-pg dotenv pg

lib/auth.ts：

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

export const { handlers, signIn, signOut, auth }: any = betterAuth({
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    },
  },
  database: prismaAdapter(prisma, {
    provider: "postgresql",
  }),
});

prisma.config.ts ：

import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';

if (process.env.NODE_ENV !== "production") {
  import("dotenv").then((dotenv) => {
    dotenv.config({ path: ".env.development" });
  });
}
export default defineConfig({
  schema: 'prisma/schema.prisma',
  migrations: {
    path: 'prisma/migrations',
  },
  datasource: {
    url: env('VERCEL_DATABASE_URL'),
  },
});

.env

# Better Auth
BETTER_AUTH_SECRET=your-generated-secret
BETTER_AUTH_URL=http://localhost:3000

# Prisma
DATABASE_URL=""

schema.prisma にDocsからAuth関連のモデルをペーストし、DBに反映させる

npx prisma db push

https://www.prisma.io/docs/guides/betterauth-nextjs
Schemaファイルが空ならpnpm dlx @better-auth/cli@latest generateで生成、 prisma migrate devで管理

api/auth/[...all]/route.ts ：

import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";
 
export const { POST, GET } = toNextJsHandler(auth);

prisma.ts ：

import { PrismaPg } from "@prisma/adapter-pg";
import { PrismaClient } from "./generated/prisma";

const adapter = new PrismaPg({
  connectionString: process.env.VERCEL_DATABASE_URL!,
});

const globalForPrisma = global as unknown as {
  prisma: PrismaClient;
};

export const prisma =
  globalForPrisma.prisma ||
  new PrismaClient({
    adapter,
  });

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

Userの型

Prisma統合で作成される User を型として使うには以下のようにする

type Session = typeof auth.$Infer.Session;
type User = Session["user"];

SignIn / Out / Session

サーバー

サーバー側の場合 haeders()を使うので、 "use server"を書いたファイルから関数をexportする

SignIn：保留

サーバーコンポーネントで完結するSignInのやり方がわからない

SignOut：

"use server";
import { headers } from "next/headers";
import { auth } from "../auth/auth";

export async function signOutServer() {
  await auth.api.signOut({
    headers: await headers(),
  });
}

Session：

  const data = await auth.api.getSession({
    headers: await headers(),
  });

---

export const getServerSession = async () => {
  return await auth.api.getSession({
    headers: await headers(), 
  });
};

クライアント

lib/auth-client.ts ：

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

export const { signIn, signUp, signOut, useSession } = createAuthClient();

SignIn / Out：

export const GoogleSignIn = () => {
  return (
    <Button
      onClick={() =>
        signIn.social({
          provider: "google",
        })
      }
      type="submit"
      className="cursor-pointer"
    >
      Sign in
    </Button>
  );
};

export const GoogleSignOut = () => {
  return (
    <Button
        onClick={() => {
          signOut();
          // window.location.reload();
          router.replace("/test");
        }}
      type="submit"
      variant={"link"}
      className="cursor-pointer bg-red-500 text-white"
    >
      Sign out
    </Button>
  );
};

signInはcallbackURLが無いと"/"にリダイレクトされる
signOutを行うページ内にサーバー側でのセッションを用いた情報を表示している場合、window.location.reload()かrouter.replace()をしないとその表示が消えない。window.location.reload()は完全リロードなのでリソースの再DLコストがかかる為、router.replace() に現在のパスを入れると良い

Session：

  const { data, error } = useSession();

ユーザー登録

２つのパターン：

PrismaAdaperがSignIn時に自動で作る User を使う
1. 他のテーブルとリレーションを持たせる
SignIn時に作られる User を元に独自の App_User を作成

以下は「2」の独自ユーザーの作成

Userが持つデータが少ないなら「１」の方が楽

SignIn時にユーザー登録

SignInボタン：

const GoogleSignIn = () => {
  return (
    <button
      type="submit"
      onClick={() =>
        signIn.social({
          provider: "google",
          callbackURL: "/api/auth/user",
        })
      }
    >
      <FcGoogle size={20} />
    </button>
  );
};

callbackURLはGoogleサインインが正常に行われた後にブラウザが遷移する先

route.ts：

export async function GET() {
  const session = await getServerSession();

  if (!session) {
    return NextResponse.redirect(`${BASE_URL}/sign-in`);
  }

  const { email, name, image } = session.user;

  // ユーザー登録処理

  // リダイレクト 
    return NextResponse.redirect(`${BASE_URL}/`);
  }
}

Sessionの所に書いた使い回し可能なSession取得関数を用いて、Session情報をもとに独自のUserテーブルを作成
*重要：returnするのはNextResponse.jsonではなくNextResponse.redirect にする。NextResponse.json だとAPIルートがブラウザに表示されたままになる

Nextjs：Better-Auth

Nextjs：Better-Auth