Magic Link

1"use client"
2 
3import { authMutationKeys } from "@better-auth-ui/core"
4import {
5  type MagicLinkAuthClient,
6  useAuth,
7  useAuthPlugin,
8  useSignInMagicLink
9} from "@better-auth-ui/react"
10import { useIsMutating } from "@tanstack/react-query"
11import { type SyntheticEvent, useState } from "react"
12 
13import { Button } from "@/components/ui/button"
14import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
15import {
16  Field,
17  FieldDescription,
18  FieldError,
19  FieldGroup,
20  FieldLabel,
21  FieldSeparator
22} from "@/components/ui/field"
23import { Input } from "@/components/ui/input"
24import { Spinner } from "@/components/ui/spinner"
25import { magicLinkPlugin } from "@/lib/auth/magic-link-plugin"
26import { cn } from "@/lib/utils"
27import { MAGIC_LINK_SENT_STORAGE_KEY } from "./magic-link-sent"
28import { ProviderButtons, type SocialLayout } from "./provider-buttons"
29 
30export type MagicLinkProps = {
31  className?: string
32  socialLayout?: SocialLayout
33  socialPosition?: "top" | "bottom"
34}
35 
36/**
37 * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
38 *
39 * @param className - Additional CSS class names applied to the card container
40 * @param socialLayout - Layout style for social provider buttons
41 * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
42 * @returns The magic-link sign-in UI as a JSX element
43 */
44export function MagicLink({
45  className,
46  socialLayout,
47  socialPosition = "bottom"
48}: MagicLinkProps) {
49  const {
50    authClient,
51    basePaths,
52    baseURL,
53    emailAndPassword,
54    localization,
55    navigate,
56    plugins,
57    redirectTo,
58    socialProviders,
59    viewPaths,
60    Link
61  } = useAuth()
62  const { localization: magicLinkLocalization, viewPaths: magicLinkViewPaths } =
63    useAuthPlugin(magicLinkPlugin)
64 
65  const [email, setEmail] = useState("")
66 
67  const { mutate: signInMagicLink, isPending: signInMagicLinkPending } =
68    useSignInMagicLink(authClient as MagicLinkAuthClient, {
69      onSuccess: (_data, variables) => {
70        sessionStorage.setItem(MAGIC_LINK_SENT_STORAGE_KEY, variables.email)
71        navigate({
72          to: `${basePaths.auth}/${magicLinkViewPaths.auth.magicLinkSent}`
73        })
74      }
75    })
76 
77  const signInMutating = useIsMutating({
78    mutationKey: authMutationKeys.signIn.all
79  })
80  const signUpMutating = useIsMutating({
81    mutationKey: authMutationKeys.signUp.all
82  })
83// … truncated