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.
- React v18 or later
npm install @userfront/react
# or
yarn add @userfront/react
# or
pnpm add @userfront/reactAdd 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>
);
}| 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. |
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. |
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.