DashboardDocs
Log in
Guest mode

Custom HTML forms

Additional resources

Example on GitHub@userfront/core on npmHTML example docsHTML quickstart guideUI Toolkit prebuilt HTML forms
Signup formLogin formPassword reset formLogout button

In this section, we create a custom signup form with email and password that includes:

#Example: custom signup form

You can clone the example signup form on CodePen and make edits, or follow along below.


The example form has the Userfront Core JS library added to the document, as described in the next section.

#Add the Userfront Core JS library

You can add the Userfront Core JS library by CDN or using npm.

You only need to do one of these.

#CDN

html
<script src="https://cdn.userfront.com/core.js"></script>

#NPM

shell
npm install @userfront/core

Then import the library into your file(s)

js
import Userfront from "@userfront/core";

#Set up the form

Create your signup form with the elements you want to use.

In this case, we've added:

  • email - required for signup
  • account-name - example of a custom field
  • password - required for signup with password
  • password-verify - optional, for checking the password before registering the user
html
<form id="signup-form">
  <div id="alert"></div>


  <label for="email">Email address</label>
  <input type="email" id="email" />


  <label for="account-name">Account name (custom field)</label>
  <input type="text" id="account-name" />


  <label for="password">Password</label>
  <input type="password" id="password" />


  <label for="password-verify">Verify password</label>
  <input type="password" id="password-verify" />


  <button type="submit">Sign up</button>
</form>
css
button,
input {
  display: block;
  margin-bottom: 10px;
}


#alert {
  display: none;
  color: red;
  margin-bottom: 10px;
}

#Pass form data to Userfront.signup()

The signup() method allows you to pass in data to sign up a user.

Our JavaScript needs to pass our form data into this method.

Userfront then does the following:

  1. Creates a user record
  2. Adds the user's access token as a cookie named access.demo1234
  3. Redirects the page to the After-signup path
js
// Sample: how to use Userfront.signup()
Userfront.init("demo1234");
Userfront.signup({
  method: "password",
  email: "jane@example.com",
  password: "testmodepassword",
  data: {
    customData: "Some custom information",
  },
});

#Example JavaScript

In the example code here, we do the following:

  1. Reference all the elements on the page
  2. Define a custom formSignup() method that calls Userfront.signup() with the form values
  3. Add an event listener to call formSignup() when the form is submitted
js
// Initialize Userfront
Userfront.init("demo1234");


// 1. Reference the elements on the page
var signupFormEl = document.getElementById("signup-form");
var alertEl = document.getElementById("alert");
var emailEl = document.getElementById("email");
var accountNameEl = document.getElementById("account-name");
var passwordEl = document.getElementById("password");
var passwordVerifyEl = document.getElementById("password-verify");
var googleButtonEl = document.getElementById("signup-google");


// 2. Signup with a username/email and password
function formSignup(e) {
  // Prevent the form's default behavior
  e.preventDefault();
  // Reset the alert to empty
  setAlert();
  // Verify that the passwords match
  var password = passwordEl.value;
  var passwordVerify = passwordVerifyEl.value;
  if (password !== passwordVerify) {
    return setAlert("Password verification must match.");
  }
  // Call Userfront.signup()
  Userfront.signup({
    method: "password",
    email: emailEl.value,
    password: password,
    data: {
      accountName: accountNameEl.value,
    },
  }).catch(function(error) {
    setAlert(error.message);
  });
}


// Set the alert element to show the message
function setAlert(message) {
  alertEl.innerText = message;
  alertEl.style.display = message ? "block" : "none";
}


// 3. Add an event listener for the signup for submit
signupFormEl.addEventListener("submit", formSignup);

#Custom fields

The form has a field for Account Name, which is a custom field.

When we pass this to the Userfront.signup() method under the data object, it is saved to the user's record as user.data.accountName.

js
Userfront.signup({
  // ...
  data: {
    accountName: accountNameEl.value,
  },
});

#Password verification

Userfront will verify that the password is the correct length and format, and we can additionally verify that the user has typed what they intended by having them type it twice.

This "passwords match" verification is performed before sending the information to Userfront.

js
var password = passwordEl.value;
var passwordVerify = passwordVerifyEl.value;
if (password !== passwordVerify) {
  return setAlert("Password verification must match.");
}

#Error handling

Whenever the Userfront.signup() method fails, we can catch its error in the promise chain.

This error contains a message property with what went wrong.

In this example, we use the setAlert() method to display the error message inside of our alert element.

js
// Catch the error
Userfront.signup(...)
.catch(function(error) {
  setAlert(error.message);
});


// Add the error message to the alert element
function setAlert(message) {
  alertEl.innerText = message;
  alertEl.style.display = message ? "block" : "none";
}

#Single sign-on

To configure Single sign-on (SSO), first add the provider you want to use in the Userfront dashboard in the SSO tab.

The SSO flow is as follows:

  1. The user clicks the SSO button ("Sign up with Google"), which triggers Userfront.signup()
  2. The browser redirects to the provider (Google), where the user authorizes your application
  3. Upon success, the browser redirects back to your login page (your After-logout path) with uuid and token login credentials in the URL
  4. Your application calls Userfront.login() to log in the user with the uuid and token

#Sign up with Google button

Add an event listener to call

Userfront.signup({ method: "google" })

when the Google button is clicked. You can style the button however you like.

Other provider options like GitHub, LinkedIn, and Facebook are in the docs for signup().

js
Userfront.init("demo1234");
var googleButtonEl = document.getElementById("signup-google");


// 4. Add an event listener for the google button click
googleButtonEl.addEventListener("click", function() {
  Userfront.signup({ method: "google" });
});

#Login after redirect

Once the browser is redirected back to your login page after SSO approval, your application should call

Userfront.login({ method: "link" }).

You can set up your JS to call this method automatically by checking whether the URL contains the token and uuid parameters.

If your original SSO signup call contained a redirect parameter, it will be included in the URL and followed automatically.

js
// On your login page:


Userfront.init("demo1234");


// If the URL contains token & uuid params, log in
if (
  document.location.search.includes("token=") &&
  document.location.search.includes("uuid=")
) {
  Userfront.login({ method: "link" });
}