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