Sign Up

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.

Preview
Component

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.

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

Preview
Component

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

Frameworks

Email + password

Error handling

​Email + password

​Error handling

​Custom sign up form

​Related Components

Email + password

Error handling

Custom sign up form

Related Components