Sign Out a User

To sign out a user call the signOut function from a client component. This will end the user's session and clear all auth-next cookies.

app/components/SignOutButton.tsx

"use client";

import { signOut } from "@reflowhq/auth-next/client";

export default function SignOutButton() {
  return (
    <button
      onClick={() =>
        signOut({ onSuccess: () => console.log("User signed out!") })
      }
    >
      Sign-out
    </button>
  );
}

Like all other client methods, we need to import signOut from the @reflowhq/auth-next/client module.

After the user has signed-out, the onSuccess callback will be called. You can use it to display a success message, rerender the page or redirect.

This component can then be added to any page on the server:

app/page.tsx

import getAuth from "@/auth";
import SignInButton from "./components/SignInButton";
import SignOutButton from "./components/SignOutButton";

export default async function Page() {
  const auth = getAuth();
  const user = await auth.user();

  if (user) {
    return (
      <>
        <p>Hello, {user.name}.</p>
        <SignOutButton />
      </>
    );
  }

  return <SignInButton />;
}