UserAuthForm() — ui Function Reference

Architecture documentation for the UserAuthForm() function in user-auth-form.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ UserAuthForm() — ui Function Reference

Dependency Diagram

graph TD
  b94b344a_4bd0_44be_1909_acb3d8a78634["UserAuthForm()"]
  15088849_46d5_fdf2_d36e_f9d9117ec340["user-auth-form.tsx"]
  b94b344a_4bd0_44be_1909_acb3d8a78634 -->|defined in| 15088849_46d5_fdf2_d36e_f9d9117ec340
  style b94b344a_4bd0_44be_1909_acb3d8a78634 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx lines 17–65

export function UserAuthForm({
  className,
  ...props
}: React.ComponentProps<"div">) {
  const [isLoading, setIsLoading] = React.useState<boolean>(false)

  async function onSubmit(event: React.SyntheticEvent) {
    event.preventDefault()
    setIsLoading(true)

    setTimeout(() => {
      setIsLoading(false)
    }, 3000)
  }

  return (
    <div className={cn("grid gap-6", className)} {...props}>
      <form onSubmit={onSubmit}>
        <FieldGroup>
          <Field>
            <FieldLabel className="sr-only" htmlFor="email">
              Email
            </FieldLabel>
            <Input
              id="email"
              placeholder="name@example.com"
              type="email"
              autoCapitalize="none"
              autoComplete="email"
              autoCorrect="off"
              disabled={isLoading}
            />
          </Field>
          <Field>
            <Button disabled={isLoading}>
              {isLoading && <Spinner />}
              Sign In with Email
            </Button>
          </Field>
        </FieldGroup>
      </form>
      <FieldSeparator>Or continue with</FieldSeparator>
      <Button variant="outline" type="button" disabled={isLoading}>
        {isLoading ? <Spinner /> : <Icons.gitHub className="mr-2 h-4 w-4" />}{" "}
        GitHub
      </Button>
    </div>
  )
}