Integrate Nile Auth with React applications
@niledatbase/react
contains components and hooks for using the API. It handles sessions, cookies, fetching data, and comes with built-in components to be used as either templates or directly in your application to handle common user tasks. It is designed to be used with @niledatabase/server
, which handles API calls itself or forwards them to the regional API for your database.
@niledatabase/react
comes with two providers, <SignedIn />
and <SignedOut />
which wrap a central <SessionProvider />
. By default, they will fetch a session.
<SignedIn />
will only render children if the user is logged in. Conversely, <SignedOut />
will always render its children unless signed in.
POST
request to the sign in endpoint. Expects a provider, and optional params for callbackUrl
. For the cases of credentials
(email + password) and email
, you can opt out of redirection by passing redirect: false
in the options
POST
request to the sign out endpoint, with an optional params for callbackUrl
to redirect the user, and redirect
to leave the user on the page, but delete the session and notify the session providers the user has been logged out.
useSession()
. This must be called within a <SignedIn />
or <SignedOut />
provider.
useTenantId
hook manages the current tenant ID, persisting it in cookies and refetching tenant data when necessary. A tenant id is accessible via document.cookie
with the name nile.tenant_id
. This cookie is used by the server side SDK to make requests to the auth service.
Value | Type | Description |
---|---|---|
tenantId | string | undefined | The current tenant ID. |
setTenantId | (tenant: string) => void | Function to update the tenant ID. |
Name | Type | Default | Description |
---|---|---|---|
params | HookProps & { tenant: Tenant } | undefined | Initial tenant data. |
client | QueryClient | undefined | React Query client instance. |
params.tenant.id
, if provided.nile.tenant_id
).setTenantId(tenantId)
updates both state and cookie.useTenants
hook fetches a list of tenants from an API endpoint using React Query. It supports optional preloaded data and can be disabled to prevent automatic queries.
useQuery
, which includes:
Property | Type | Description |
---|---|---|
data | Tenant[] | undefined | List of tenants. |
isLoading | boolean | true while fetching data. |
error | Error | null | Fetch error, if any. |
refetch | () => void | Function to manually refetch tenants. |
Name | Type | Default | Description |
---|---|---|---|
params | HookProps & { disableQuery?: boolean } | undefined | Hook configuration options. |
client | QueryClient | undefined | Optional React Query client instance. |
disableQuery
is true
, the query is disabled.tenants
is provided and not empty (in the event of hydration), the query is also disabled.${baseUrl}/api/tenants
using fetch
.useEmailSignIn
hook provides a mutation for signing in a user using nile auth. It allows customizing the request with callbacks and options for redirection.
Name | Type | Default | Description |
---|---|---|---|
onSuccess | (data: Response) => void | undefined | Callback after a successful sign-in. |
onError | (error: Error) => void | undefined | Callback if sign-in fails. |
beforeMutate | (data: any) => any | undefined | Function to modify data before mutation. |
callbackUrl | string | undefined | URL to redirect after login. |
redirect | boolean | false | Whether to redirect after login. |
signIn('email', data)
with optional modifications via beforeMutate
.redirect
is true
.useMe
is a React hook that fetches and returns the current authenticated user. It allows preloading a user via props or fetching from an API endpoint if no user is provided.
Name | Type | Default | Description |
---|---|---|---|
fetchUrl | string | /api/me | API endpoint to fetch the user data. |
user | User | undefined | null | undefined | Initial user data, avoids fetching if provided. |
user
is passed in props, it is set immediately.user
is not provided, the hook fetches from fetchUrl
and updates the state.useResetPassword
hook provides a way to handle password reset functionality. It sends reset requests to an authentication API and supports optional callbacks and preprocessing of request data.
Name | Type | Default | Description |
---|---|---|---|
params | Params | undefined | Hook configuration options. |
${baseUrl}/api/auth/reset-password
(or a custom fetchUrl
).onSuccess
or onError
based on the request outcome.beforeMutate
.useSignUp
hook provides a way to handle user sign-up requests. It supports tenant creation, API customization, and session updates after successful registration.
Name | Type | Default | Description |
---|---|---|---|
params | Props | undefined | Hook configuration options. |
client | QueryClient (optional) | undefined | React Query client instance. |
POST
request to /api/signup
(or a custom fetchUrl
).createTenant
is true
, assigns newTenantName
as the user’s email.createTenant
is a string, it is used as the tenant name.callbackUrl
if provided, otherwise reloads the page.useSignIn
hook provides a simple way to authenticate users. It supports pre-processing login data before submission and handles authentication via credentials.
Name | Type | Default | Description |
---|---|---|---|
params | Props | undefined | Hook configuration options. |
signIn('credentials', data)
.beforeMutate
is provided, it modifies the login data before the request.onSuccess
if login succeeds.onError
if login fails.