Sign Out

1"use client"
2 
3import { useAuth, useSignOut } from "@better-auth-ui/react"
4import { useEffect, useRef } from "react"
5import { Spinner } from "@/components/ui/spinner"
6import { cn } from "@/lib/utils"
7 
8export type SignOutProps = {
9  className?: string
10}
11 
12/**
13 * Signs the current user out on mount and renders a centered spinner while the operation completes.
14 *
15 * @param className - Optional additional class names appended to the root element
16 * @returns The spinner shown during sign-out
17 */
18export function SignOut({ className }: SignOutProps) {
19  const { authClient, basePaths, navigate, viewPaths } = useAuth()
20 
21  const { mutate: signOut } = useSignOut(authClient, {
22    onError: () => {
23      navigate({
24        to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
25        replace: true
26      })
27    },
28    onSuccess: () =>
29      navigate({
30        to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
31        replace: true
32      })
33  })
34 
35  const hasSignedOut = useRef(false)
36 
37  useEffect(() => {
38    if (hasSignedOut.current) return
39    hasSignedOut.current = true
40 
41    signOut()
42  }, [signOut])
43 
44  return <Spinner className={cn("mx-auto my-auto", className)} />
45}