> ## 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.

> [tab] Preview
>
> [https://storybook.thenile.dev/iframe.html?globals=\&args=\&id=sign-up-form--sign-up-form](https://storybook.thenile.dev/iframe.html?globals=\&args=\&id=sign-up-form--sign-up-form)

> [tab] Component
>
> ```jsx theme={null}
> import { SignUpForm } from "@niledatabase/react";
>
> export default function SignUpPage() {
>   return <SignUpForm callbackUrl="/dashboard" />
> }
> ```

#### 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

> [tab] Preview
>
> [https://storybook.thenile.dev/iframe.html?globals=\&args=\&id=sign-up-form--custom-sign-up-form](https://storybook.thenile.dev/iframe.html?globals=\&args=\&id=sign-up-form--custom-sign-up-form)

> [tab] 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>
> );
> }
>
> ```

## Related Components

* [Sign In](https://thenile.dev/docs/auth/components/signin.md)
* [Sign Out](https://thenile.dev/docs/auth/components/signout.md)
* [User Profile](https://thenile.dev/docs/auth/components/user.md)

```
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.