@userfront/react
v2.0.0
Published
Transform your React application with Userfront authentication
Downloads
784
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/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>
);
}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.