Why not using signOut?

[engin-can]

I was wondering why you are not using signOut from @auth here. Is there something wrong with it?

"use client";

import type { CollectionSlug } from "payload";

export function SignOutButton({
  userCollectionSlug = "users",
}: {
  userCollectionSlug?: CollectionSlug;
}) {
  return (
    <button
      type="button"
      onClick={async () => {
        await fetch(`/api/${userCollectionSlug}/logout`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
        });
        window.location.reload();
      }}
    >
      Sign Out
    </button>
  );
}

https://github.com/CrawlerCode/payload-authjs/blob/c064b334161d942efadcd4e96f484bcfe6343ac0/examples/basic/src/app/(app)/_components/SignOutButton.tsx#L13C7-L22C6

[CrawlerCode]

No, nothing is wrong. You have several options for sign out. This depends on your use case.

See Examples

Auth.js (client)

"use client";

import { signOut } from "next-auth/react";

export function AuthjsSignOutButtonClient() {
  return (
    <button onClick={() => signOut()}>
      Sign Out (client)
    </button>
  );
}

Auth.js (server action)

import { signOut } from "@/auth";

export function AuthjsSignOutButtonServerAction() {
  return (
    <form
      action={async () => {
        "use server";
        await signOut();
      }}
    >
      <button type="submit">
        Sign Out (server action)
      </button>
    </form>
  );
}

Payload CMS (server action)

import payloadConfig from "@payload-config";
import { logout } from "@payloadcms/next/auth";
import { redirect } from "next/navigation";

export function PayloadSignOutButtonServerAction() {
  return (
    <form
      action={async () => {
        "use server";
        await logout({ config: payloadConfig, });
        redirect("/");
      }}
    >
      <button type="submit">
        Sign Out (server action)
      </button>
    </form>
  );
}

Payload CMS (client)

"use client";

export function PayloadSignOutButtonClient() {
  return (
    <button
      onClick={async () => {
        await fetch("/api/users/logout", { method: "POST", });
        window.location.reload();
      }}
    >
      Sign Out (client)
    </button>
  );
}

See more in my dev project.

For the default use, it is fine to sign out with Auth.js. I have corrected this in the examples (e69bfbe).

However, if you combine this plugin with the local strategy, you can use Payload CMS to sign out. This will destroy your session regardless of the strategy.