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/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>
);
}
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
.