ログインボタンを追加

Author: na-trium-144

app/accountMenu.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { authClient } from "@/lib/auth-client";
+
+export const AccountMenu = () => {
+  const { data: session, isPending } = authClient.useSession();
+
+  if (isPending) {
+    return <div className="w-10 h-10 skeleton rounded-full"></div>;
+  }
+
+  if (session) {
+    return (
+      <div className="dropdown dropdown-end">
+        <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+          <div className="w-8 h-8 rounded-full">
+            <img
+              src={
+                session.user?.image ??
+                `https://avatar.vercel.sh/${session.user?.name}`
+              }
+              alt="user avatar"
+            />
+          </div>
+        </label>
+        <ul
+          tabIndex={0}
+          className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
+        >
+          <li>
+            <a onClick={() => authClient.signOut()}>ログアウト</a>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
+  return (
+    <div className="dropdown dropdown-end">
+      <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+        <div className="w-8 h-8 rounded-full">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-full h-full"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+            />
+          </svg>
+        </div>
+      </label>
+      <ul className="z-1 shadow-md dropdown-content bg-base-100 rounded-box menu w-64">
+        <li className="menu-title">
+          ログインすると、チャット履歴を保存し別のデバイスからもアクセスできるようになります。
+        </li>
+        <li>
+          <button
+            onClick={() => authClient.signIn.social({ provider: "github" })}
+          >
+            GitHub でログイン
+          </button>
+        </li>
+        <li>
+          <button
+            onClick={() => authClient.signIn.social({ provider: "google" })}
+          >
+            Google でログイン
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+};

app/lib/auth.ts

@@ -1,14 +1,34 @@
 import { betterAuth } from "better-auth";
 import { prismaAdapter } from "better-auth/adapters/prisma";
 import { PrismaClient } from "@/generated/prisma/client";
+import { getCloudflareContext } from "@opennextjs/cloudflare";
 
 const prisma = new PrismaClient();
 
 export const auth = betterAuth({
   database: prismaAdapter(prisma, {
     provider: "postgresql",
   }),
-  emailAndPassword: {
-    enabled: true,
+  socialProviders: {
+    github: {
+      clientId:
+        process.env.GITHUB_CLIENT_ID ??
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (getCloudflareContext().env as any).GITHUB_CLIENT_ID,
+      clientSecret:
+        process.env.GITHUB_CLIENT_SECRET ??
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (getCloudflareContext().env as any).GITHUB_CLIENT_SECRET,
+    },
+    google: {
+      clientId:
+        process.env.GOOGLE_CLIENT_ID ??
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (getCloudflareContext().env as any).GOOGLE_CLIENT_ID,
+      clientSecret:
+        process.env.GOOGLE_CLIENT_SECRET ??
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (getCloudflareContext().env as any).GOOGLE_CLIENT_SECRET,
+    },
   },
 });

app/navbar.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { AccountMenu } from "./accountMenu";
 import { ThemeToggle } from "./[docs_id]/themeToggle";
 export function Navbar() {
   return (
@@ -32,6 +33,7 @@ export function Navbar() {
       {/* サイドバーが常時表示されている場合のみ */}
       <Link href="/" className="flex-1 font-bold text-xl">my.code();</Link>
       <ThemeToggle />
+      <AccountMenu />
     </div>
     </>
   );

app/sidebar.tsx

@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation";
 import useSWR, { Fetcher } from "swr";
 import { splitMarkdown } from "./[docs_id]/splitMarkdown";
 import { pagesList } from "./pagesList";
+import { AccountMenu } from "./accountMenu";
 import { ThemeToggle } from "./[docs_id]/themeToggle";
 
 const fetcher: Fetcher<string, string> = (url) =>
@@ -20,12 +21,13 @@ export function Sidebar() {
   return (
     <div className="bg-base-200 h-full w-80 overflow-y-auto">
       {/* todo: 背景色ほんとにこれでいい？ */}
-      <h2 className="hidden lg:flex flex-row items-center p-4">
+      <h2 className="hidden lg:flex flex-row items-center p-4 gap-2">
         {/* サイドバーが常時表示されている場合のみ */}
         <Link href="/" className="flex-1 text-xl font-bold">
           my.code();
         </Link>
         <ThemeToggle />
+        <AccountMenu />
       </h2>
       <span className="block lg:hidden p-4 pb-0">
         <label