React SDK

The Userfront React SDK is a fast and easy way to use Userfront in your JavaScript or TypeScript React application.

For Node.js support on the server, see @userfront/node.

For Next.js support on the server and client, see @userfront/next.

Requirements

React v18 or later

Installation

npm install @userfront/react
# or
yarn add @userfront/react
# or
pnpm add @userfront/react

Add the UserfrontProvider with your desired tenantId to the root layout of your application.

import { UserfrontProvider } from "@userfront/react";

function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <UserfrontProvider tenantId="...">
          {children}
        </UserfrontProvider>
      </body>
    </html>
  );
}

Provider Options

Option	Default	Description
`tenantId`	string	The tenant identifier, this can be found in workspace Tenants on the Userfront dashboard.
`loginUrl`	string	Redirect URL for unauthenticated visitors that need to login, the default is `/login`.
`loginRedirect`	string	Redirect URL after login, `false` to disable. When `undefined`, uses the path configured to the workspace paths & routing settings.
`signupRedirect`	string	Redirect URL after signup, `false` to disable. When `undefined`, uses the path configured to the workspace paths & routing settings.
`logoutRedirect`	string	Redirect URL after logout, `false` to disable. When `undefined`, uses the path configured to the workspace paths & routing settings.
`requireAuth`	boolean	When `true`, unauthenticated visitors will be redirected to the `loginUrl`.

Usage

Hook

Use the useUserfront() hook to access Userfront core and the current client auth state.

import { useUserfront } from "@userfront/react";

export default function Component() {
  const { user, isLoading } = useUserfront();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <div>Hello, {user.email}</div>;
}

In addition to core and the UserfrontProvider properties, these are also available for use:

Property	Type	Description
`isAuthenticated`	boolean	Whether or not the current visitor is signed into a valid user account.
`isLoading`	boolean	Whether or not Userfront has loaded and initialized.

Toolkit

Userfront toolkit components are included in this package. Import and use them without any necessary additional props:

import { LoginForm } from "@userfront/react";

export default function Component() {
  return <LoginForm />;
}

The available components are LoginForm, SignupForm, PasswordResetForm and LogoutButton.