Sign Up - Nile Documentation

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.

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.

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
        }}
      />
  )
}

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>
  );
}

Nile Auth

​Email + password

​Error handling

​Custom sign up form

​Related Components

Email + password

Error handling

Custom sign up form

Related Components