# Profile form

> A form that updates the caller's display name through a server action and shows field errors.

- Block: [profiles](https://bettersupabase.com/blocks/profiles.md)
- Kind: component
- Data: loaded on the server through the block's client
- Page: https://bettersupabase.com/recipes/profile-form

## Install the block

```bash
npx better-supabase add profiles
```

## Web (Next.js)

Add the shadcn components:

```bash
npx shadcn add button field input
```

From `apps/examples/nextjs/src/features/user/components/profile-form.tsx` (https://github.com/ScaleDockHQ/better-supabase/blob/main/apps/examples/nextjs/src/features/user/components/profile-form.tsx):

```tsx
"use client";

import { useActionForm } from "better-supabase/react";
import { useExtracted } from "next-intl";
import { useId } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { useErrorMessage } from "@/lib/use-error-message";

import { updateProfile } from "../user-actions";

export function ProfileForm({
  fullName,
  email,
}: {
  fullName: string | null;
  email: string | null;
}) {
  const t = useExtracted("user");
  const fieldId = useId();
  const errorMessage = useErrorMessage();

  const form = useActionForm(updateProfile, {
    resetOnSuccess: false,
    onSuccess: () => {
      toast.success(t("Profile saved"));
    },
  });

  const error = form.error === undefined ? null : errorMessage(form.error);

  return (
    <form {...form.formProps} className="space-y-6">
      <FieldGroup>
        <Field data-invalid={error ? true : undefined}>
          <FieldLabel htmlFor={`${fieldId}-profile-name`}>
            {t("Full name")}
          </FieldLabel>
          <Input
            id={`${fieldId}-profile-name`}
            name="fullName"
            defaultValue={fullName ?? ""}
            autoComplete="name"
            required
            maxLength={120}
          />
          {error ? <FieldError>{error}</FieldError> : null}
        </Field>
        <Field>
          <FieldLabel htmlFor={`${fieldId}-profile-email`}>
            {t("Email")}
          </FieldLabel>
          <Input
            id={`${fieldId}-profile-email`}
            value={email ?? ""}
            disabled
            readOnly
          />
          <FieldDescription>
            {t("Your sign-in address. It comes from Supabase Auth.")}
          </FieldDescription>
        </Field>
      </FieldGroup>
      <Button type="submit" disabled={form.pending}>
        {t("Save")}
      </Button>
    </form>
  );
}
```

## Prompt

Paste this into a coding agent to build the recipe in your app.

### Web

```text
Build "Profile form" in a React web app that uses shadcn/ui components. A form that updates the caller's display name through a server action and shows field errors.

It uses the better-supabase `profiles` block (Profiles). It loads its data on the server through the block's client.

Steps:

1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add profiles` and apply the migration.
2. Add the shadcn components the recipe uses: `npx shadcn add button field input`.
3. The recipe needs no glue: it calls the block's client on the server.
4. Write the component. Load the data on the server with the block's client, starting from the recipe's snippet (`apps/examples/nextjs/src/features/user/components/profile-form.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is.
5. Check the result against the recipe and the block's docs: it typechecks, it reads the same block data, and it handles the loading and empty states the snippet handles.

Read the full code first:

- Recipe: https://bettersupabase.com/recipes/profile-form.md
- Block docs: https://bettersupabase.com/docs/blocks/profiles
```