> ## Documentation Index
> Fetch the complete documentation index at: https://thenile.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Sign Up

> Learn how to use the Nile Auth Sign Up component

## Email + password

The `<SignUpForm />` will create a new user in your database and create a session for them. Uses simple `<Email />` and `<Password />` fields, along with the `useSignUp()` hook. In most cases, you want to supply a `callbackUrl`, which is where the user will be redirected upon successful sign up and sign in.

<Tabs>
  <Tab title="Preview">
    <iframe src="https://storybook.thenile.dev/iframe.html?globals=&args=&id=sign-up-form--sign-up-form" width="100%" height="400px" className="rounded-xl" />
  </Tab>

  <Tab title="Component">
    ```jsx theme={null}
    import { SignUpForm } from "@niledatabase/react";

    export default function SignUpPage() {
      return <SignUpForm callbackUrl="/dashboard" />
    }
    ```
  </Tab>
</Tabs>

#### Error handling

In the case of errors from the API, or you want to do something more custom with the response, you can use the `onError` and `onSuccess` callbacks.
Note that `redirect` is set to the current page by default, so you may want to set it to `false` if you want
to handle the redirect yourself - especially if you want to display a custom error message.

```jsx theme={null}
export default function SignUpPage() {
  const [error, setError] = error('')
  return (
    {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {error}
          </div>
    )}
      <SignUpForm
        redirect={false}
        onError={(e) => {
          setError(e.message);
        }}
        onSuccess={(data) => {
          console.log(data); // do something with the data
          router.push("/"); // redirect to a new page
        }}
      />
  )
}
```

#### Custom sign up form

<Tabs>
  <Tab title="Preview">
    <iframe src="https://storybook.thenile.dev/iframe.html?globals=&args=&id=sign-up-form--custom-sign-up-form" width="100%" height="400px" className="rounded-xl" />
  </Tab>

  <Tab title="Component">
    ```jsx theme={null}
    import React from 'react';
    import { useForm } from 'react-hook-form';
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

    import { Button } from '../../components/ui/button';
    import { Input } from '../../components/ui/input';
    import {
      Email,
      Form,
      FormControl,
      FormDescription,
      FormField,
      FormItem,
      FormLabel,
      FormMessage,
      Password,
    } from '../../components/ui/form';

    import { useSignUp } from '@niledatabase/react';

    function SignUpCustom() {
    const signUp = useSignUp({
    onSuccess: () => {
    // nothing to do here
    },
    });
    const form = useForm({
    defaultValues: {
    givenName: '',
    name: '',
    familyName: '',
    picture: '',
    email: '',
    password: '',
    newTenantName: '',
    },
    });
    return (

    <Form {...form}>
    <form
    onSubmit={form.handleSubmit((formData) => signUp(formData))}
    className="space-y-8" >
    <Email />
    <Password />
    <FormField
    control={form.control}
    name="name"
    render={({ field }) => {
    return (
    <FormItem>
    <FormLabel>New tenant name</FormLabel>
    <FormControl>
    <Input placeholder="Name" {...field} />
    </FormControl>
    <FormDescription>The name of the user</FormDescription>
    <FormMessage />
    </FormItem>
    );
    }}
    />
    <FormField
    control={form.control}
    name="familyName"
    render={({ field }) => {
    return (
    <FormItem>
    <FormLabel>Family name</FormLabel>
    <FormControl>
    <Input placeholder="Family name" {...field} />
    </FormControl>
    <FormDescription>The family name of the user</FormDescription>
    <FormMessage />
    </FormItem>
    );
    }}
    />
    <FormField
    control={form.control}
    name="givenName"
    render={({ field }) => {
    return (
    <FormItem>
    <FormLabel>Given name</FormLabel>
    <FormControl>
    <Input placeholder="Given name" {...field} />
    </FormControl>
    <FormDescription>The given name of the user</FormDescription>
    <FormMessage />
    </FormItem>
    );
    }}
    />
    <FormField
    control={form.control}
    name="picture"
    render={({ field }) => {
    return (
    <FormItem>
    <FormLabel>Picture</FormLabel>
    <FormControl>
    <Input placeholder="Picture" {...field} />
    </FormControl>
    <FormDescription>A picture of the user</FormDescription>
    <FormMessage />
    </FormItem>
    );
    }}
    />
    <FormField
    control={form.control}
    name="newTenantName"
    render={({ field }) => {
    return (
    <FormItem>
    <FormLabel>New tenant name</FormLabel>
    <FormControl>
    <Input placeholder="Tenant name" {...field} />
    </FormControl>
    <FormDescription>
    The name of the tenant for the user to join
    </FormDescription>
    <FormMessage />
    </FormItem>
    );
    }}
    />
    <Button>Sign up</Button>
    </form>
    </Form>
    );
    }
    const queryClient = new QueryClient();
    export function CustomSignUpForm() {
    return (
    <QueryClientProvider client={queryClient}>
    <SignUpCustom />
    </QueryClientProvider>
    );
    }

    ```
  </Tab>
</Tabs>

## Related Components

* [Sign In](/auth/components/signin)
* [Sign Out](/auth/components/signout)
* [User Profile](/auth/components/user)

```
```