example: Use authjs signOut server action (#43)

Author: CrawlerCode

examples/basic/src/app/(app)/_components/SignOutButton.tsx

@@ -1,26 +1,14 @@
-"use client";
+import { signOut } from "@/auth";
 
-import type { CollectionSlug } from "payload";
-
-export function SignOutButton({
-  userCollectionSlug = "users",
-}: {
-  userCollectionSlug?: CollectionSlug;
-}) {
+export function SignOutButton() {
   return (
-    <button
-      type="button"
-      onClick={async () => {
-        await fetch(`/api/${userCollectionSlug}/logout`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        window.location.reload();
+    <form
+      action={async () => {
+        "use server";
+        await signOut();
       }}
     >
-      Sign Out
-    </button>
+      <button type="submit">Sign Out</button>
+    </form>
   );
 }

examples/multiple-auth-collections/src/app/(app)/_components/SignOutButton.tsx

@@ -1,20 +1,14 @@
-"use client";
+import { signOut } from "@/auth.customers";
 
 export function SignOutButton() {
   return (
-    <button
-      type="button"
-      onClick={async () => {
-        await fetch(`/api/customers/logout`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        window.location.reload();
+    <form
+      action={async () => {
+        "use server";
+        await signOut();
       }}
     >
-      Sign Out (Customer)
-    </button>
+      <button type="submit">Sign Out (Customer)</button>
+    </form>
   );
 }

examples/with-payload-local-strategy/src/app/(app)/_components/SignOutButton.tsx

@@ -1,26 +1,14 @@
-"use client";
+import { signOut } from "@/auth";
 
-import type { CollectionSlug } from "payload";
-
-export function SignOutButton({
-  userCollectionSlug = "users",
-}: {
-  userCollectionSlug?: CollectionSlug;
-}) {
+export function SignOutButton() {
   return (
-    <button
-      type="button"
-      onClick={async () => {
-        await fetch(`/api/${userCollectionSlug}/logout`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        window.location.reload();
+    <form
+      action={async () => {
+        "use server";
+        await signOut();
       }}
     >
-      Sign Out
-    </button>
+      <button type="submit">Sign Out</button>
+    </form>
   );
 }