\n\n# React SDK\n\nThe Userfront React SDK is a fast and easy way to use Userfront in your JavaScript or TypeScript React application.\n\nFor Node.js support on the server, see [@userfront/node](https://www.npmjs.com/package/@userfront/node).\n\nFor Next.js support on the server and client, see [@userfront/next](https://www.npmjs.com/package/@userfront/next).\n\n## Requirements\n\n- React v18 or later\n\n## Installation\n\n```sh\nnpm install @userfront/react\n# or\nyarn add @userfront/react\n# or\npnpm add @userfront/react\n```\n\nAdd the `UserfrontProvider` with your desired `tenantId` to the root layout of your application.\n\n```javascript\nimport { UserfrontProvider } from \"@userfront/react\";\n\nfunction Layout({ children }) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n```\n\n### Provider Options\n\n| Option | Default | Description |\n| ---------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `tenantId` | string | The tenant identifier, this can be found in workspace [Tenants](https://userfront.com/dashboard/tenants) on the Userfront dashboard. |\n| `loginUrl` | string | Redirect URL for unauthenticated visitors that need to login, the default is `/login`. |\n| `loginRedirect` | string | Redirect URL after login, `false` to disable. When `undefined`, uses the path configured to the workspace [paths & routing settings](https://userfront.com/dashboard/paths). |\n| `signupRedirect` | string | Redirect URL after signup, `false` to disable. When `undefined`, uses the path configured to the workspace [paths & routing settings](https://userfront.com/dashboard/paths). |\n| `logoutRedirect` | string | Redirect URL after logout, `false` to disable. When `undefined`, uses the path configured to the workspace [paths & routing settings](https://userfront.com/dashboard/paths). |\n| `requireAuth` | boolean | When `true`, unauthenticated visitors will be redirected to the `loginUrl`. |\n\n## Usage\n\n### Hook\n\nUse the `useUserfront()` hook to access [Userfront core](https://www.npmjs.com/package/@userfront/core) and the current client auth state.\n\n```javascript\nimport { useUserfront } from \"@userfront/react\";\n\nexport default function Component() {\n const { user, isLoading } = useUserfront();\n\n if (isLoading) {\n return
Loading...
;\n }\n\n return
Hello, {user.email}
;\n}\n```\n\nIn addition to core and the `UserfrontProvider` properties, these are also available for use:\n\n| Property | Type | Description |\n| ----------------- | ------- | ----------------------------------------------------------------------- |\n| `isAuthenticated` | boolean | Whether or not the current visitor is signed into a valid user account. |\n| `isLoading` | boolean | Whether or not Userfront has loaded and initialized. |\n\n### Toolkit\n\n[Userfront toolkit](https://www.npmjs.com/package/@userfront/toolkit) components are included in this package. Import and use them without any necessary additional props:\n\n```javascript\nimport { LoginForm } from \"@userfront/react\";\n\nexport default function Component() {\n return ;\n}\n```\n\nThe available components are `LoginForm`, `SignupForm`, `PasswordResetForm` and `LogoutButton`.\n","readmeFilename":"README.md"}
![](\"https://raw.githubusercontent.com/userfront/userfront/main/logo.png\"){kind=logo}
\n \n