​
Overview

The SignOutButton component provides an interactive button for signing users out of your application. It supports optional redirect behavior, a custom callback URL, and configurable button text.

​
Installation

npm install @niledatabase/react @niledatabase/client

​
Usage

​
SignOutButton Props

NameTypeDefaultDescription
redirectbooleantrueDetermines whether the user should be redirected after signing out.
callbackUrlstringwindow.location.hrefThe URL to redirect to after signing out.
buttonTextstring'Sign out'Custom text for the sign-out button.

​
Example with No Redirect

<SignOutButton redirect={false} buttonText="Log Out" />

​
Internal Functionality

The SignOutButton component utilizes the signOut function to trigger a sign-out request. 
signOut({ callbackUrl: '/sign-in' }); // Redirects user to the sign-in page
signOut({ redirect: false }); // Logs out without redirecting

​
signOut Function

The signOut function makes a POST request to the sign-out endpoint, optionally taking:
  • callbackUrl: A URL to redirect the user after logging out.
  • redirect: A boolean indicating whether to reload the page post-logout.

​
Theming

The component is styled using tailwind. It can be customized using the className and buttonText props, or using Tailwind CSS theme variables. You can find more details and full examples in the customization doc. In addition, the hooks documented for each component can be used if you’d like to use Nile Auth with your own components. If needed, you can peek at the source code of the component and use it as a template to create your own component for maximum customization.