Prebuilt React forms

Additional resources

Example on GitHub@userfront/react on npmReact example docsReact quickstart guideCustom React forms

#Setup

Before installing any forms complete the following steps:

#1. Install the Userfront React library

To add the form to your React project, first install @userfront/react with npm.

#2. Add the UserfrontProvider

Initialize the Userfront UI Toolkit for React with your workspace ID using the UserfrontProvider.

You should wrap your root layout with this so that forms can be placed anywhere in your application.

#Form locations

You can add as many forms as you would like across your application.

To have a working application ensure you have the following forms at their associated paths:

Form nameRedirect path name
Login formAfter-logout path
Password reset formPassword reset path


Preview

#Signup form

The signup form will:

Install by copying the code below and pasting it in your application.

See a demo on CodeSandbox

#Login form

The login form will:

  • Log in a user
  • Provide the user with access and id tokens
  • Redirect to your After-login path
  • Update the user's lastActiveAt attribute

To handle login links correctly put a login form at your After-logout path.


Install by copying the code below and pasting it in your application.

#Password reset form

The password reset form will:

  • Send a password reset link to the user's email
  • Reset a password

To handle password resets correctly put a password reset form at your Password reset path.


Install by copying the code below and pasting it in your application.

#Logout button

The logout button will:

  • Show a disabled state when not logged in
  • Clear the user's tokens
  • Redirect after logout to your After-logout path

Install by copying the code below and pasting it in your application.