ソーシャルログインとログアウトの挙動を実装

Author: na-trium-144

README.md

@@ -14,8 +14,6 @@ API_KEY=GeminiAPIキー
 BETTER_AUTH_URL=http://localhost:3000
 ```
 
-<!-- 本番環境では BETTER_AUTH_SECRET と DATABASE_URL の設定も必要です。 -->
-
 prismaの開発環境を起動
 (.env にDATABASE_URLが自動的に追加される)
 ```bash
@@ -26,6 +24,15 @@ npx prisma dev
 npx prisma db push
 ```
 
+### 本番環境の場合
+
+上記の環境変数以外に、
+* BETTER_AUTH_SECRET に任意の文字列
+* DATABASE_URL に本番用のPostgreSQLデータベースURL
+* GOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETにGoogle OAuthのクライアントIDとシークレット https://www.better-auth.com/docs/authentication/google
+* GITHUB_CLIENT_IDとGITHUB_CLIENT_SECRETにGitHub OAuthのクライアントIDとシークレット https://www.better-auth.com/docs/authentication/github
+
+
 ## 開発環境
 
 ```bash

app/accountMenu.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { authClient } from "@/lib/auth-client";
+import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 
 export function AutoAnonymousLogin() {
@@ -16,6 +17,30 @@ export function AutoAnonymousLogin() {
 
 export function AccountMenu() {
   const { data: session, isPending } = authClient.useSession();
+  const pathname = usePathname();
+
+  const signout = () => {
+    if (
+      window.confirm(
+        "ログアウトしますか？\nチャット履歴はこの端末上で見られなくなりますが、再度ログインすることでアクセスできます。"
+      )
+    ) {
+      authClient.signOut({
+        fetchOptions: {
+          onSuccess: () => window.location.reload(),
+        },
+      });
+    }
+  };
+  const signoutFromAnonymous = () => {
+    if (window.confirm("チャット履歴は削除され、アクセスできなくなります。")) {
+      authClient.signOut({
+        fetchOptions: {
+          onSuccess: () => window.location.reload(),
+        },
+      });
+    }
+  };
 
   if (isPending) {
     return <div className="w-10 h-10 skeleton rounded-full"></div>;
@@ -40,7 +65,7 @@ export function AccountMenu() {
           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>
+            <a onClick={signout}>ログアウト</a>
           </li>
         </ul>
       </div>
@@ -73,18 +98,38 @@ export function AccountMenu() {
         </li>
         <li>
           <button
-            onClick={() => authClient.signIn.social({ provider: "github" })}
+            onClick={() =>
+              authClient.signIn.social({
+                provider: "github",
+                callbackURL: pathname,
+              })
+            }
           >
             GitHub でログイン
           </button>
         </li>
         <li>
           <button
-            onClick={() => authClient.signIn.social({ provider: "google" })}
+            onClick={() =>
+              authClient.signIn.social({
+                provider: "google",
+                callbackURL: pathname,
+              })
+            }
           >
             Google でログイン
           </button>
         </li>
+        {session?.user && (
+          <>
+            <div className="divider my-0" />
+            <li>
+              <button onClick={signoutFromAnonymous}>
+                この端末上のデータを削除
+              </button>
+            </li>
+          </>
+        )}
       </ul>
     </div>
   );