Anonymous

1"use client"
2 
3import { authMutationKeys } from "@better-auth-ui/core"
4import {
5  type AnonymousAuthClient,
6  useAuth,
7  useAuthPlugin,
8  useSignInAnonymous
9} from "@better-auth-ui/react"
10import { useIsMutating } from "@tanstack/react-query"
11import { UserRound } from "lucide-react"
12 
13import { Button } from "@/components/ui/button"
14import { Spinner } from "@/components/ui/spinner"
15import { anonymousPlugin } from "@/lib/auth/anonymous-plugin"
16import { cn } from "@/lib/utils"
17 
18/** Sign in with a temporary anonymous account. */
19export function AnonymousButton() {
20  const { authClient, navigate, redirectTo } = useAuth()
21  const { localization } = useAuthPlugin(anonymousPlugin)
22  const { mutate: signInAnonymous, isPending: anonymousPending } =
23    useSignInAnonymous(authClient as AnonymousAuthClient, {
24      onSuccess: () => navigate({ to: redirectTo })
25    })
26 
27  const signInMutating = useIsMutating({
28    mutationKey: authMutationKeys.signIn.all
29  })
30  const signUpMutating = useIsMutating({
31    mutationKey: authMutationKeys.signUp.all
32  })
33  const isPending = signInMutating + signUpMutating > 0
34 
35  return (
36    <Button
37      type="button"
38      variant="outline"
39      disabled={isPending}
40      className={cn("w-full", isPending && "pointer-events-none")}
41      onClick={() => signInAnonymous()}
42    >
43      {anonymousPending ? (
44        <Spinner data-icon="inline-start" />
45      ) : (
46        <UserRound data-icon="inline-start" />
47      )}
48      {localization.continueAsGuest}
49    </Button>
50  )
51}