Prebuilt HTML forms

Additional resources

Example on GitHub@userfront/toolkit on npmHTML example docsHTML quickstart guideCustom HTML forms

#Setup

Each toolkit form has 2 parts:

#1. Script snippet

The <script> snippet should be added to the <head> of any page that has a Userfront toolkit form.

The script snippet only needs to be added once per page.

#2. Form tag

Add the form tag (e.g. <login-form>) wherever you want your form to show. The form tag must have the tenant-id attribute provided.

You can add it more than once per page if you want to have multiple forms on the same page.

#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 CodePen

#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.