Package Exports

@userfront/react
@userfront/react/dist/index.js
@userfront/react/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@userfront/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.