# Build a signup form with Vue

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

# Example: custom signup form with Vue.js

You can clone the example signup form on CodePen (opens new window) and make edits, or follow along below.

NOTE

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

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

# NPM

npm install @userfront/core

Then import the library into your file(s)

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 (obviously)
  • password verify - optional, for checking the password before registering the user

# Signup form Vue code

# <form> element

In the <form> element, we bind our variables email, accountName, password, and passwordVerify to the inputs using v-model.

We also set the form to call signupWithPassword() when it is submitted.

# signupWithPassword()

When the form is submitted, this function calls Userfront.signup() with the current email, accountName, and password.

# SSO <button> element

We set the SSO <button> element to call signupWithSSO() when it is clicked.

# signupWithSSO()

When the SSO button is clicked, this function calls Userfront.signup() with "google" as the signup method.

<template>
  <div id="app">
    <div id="alert" v-if="alert">{{ alert }}</div>

    <form @submit.prevent="signupWithPassword">
      <label>
        Email address
        <input type="email" v-model="email" />
      </label>
      <label>
        Account name (custom field)
        <input type="text" v-model="accountName" />
      </label>
      <label>
        Password
        <input type="password" v-model="password" />
      </label>
      <label>
        Verify password
        <input type="password" v-model="passwordVerify" />
      </label>
      <button type="submit">Sign up</button>
    </form>

    <p>or</p>

    <button @click.prevent="signupWithSSO">Sign up with Google</button>
  </div>
</template>

<script>
  // Initialize Userfront
  Userfront.init("demo1234");

  export default {
    data() {
      return {
        email: "",
        accountName: "",
        password: "",
        passwordVerify: "",
        alert: "",
      };
    },
    methods: {
      // Sign up with the form's email and password
      signupWithPassword() {
        // Reset the alert to empty
        this.alert = "";
        // Verify that the passwords match
        if (this.password !== this.passwordVerify) {
          this.alert = "Passwords must match";
          return;
        }
        // Call Userfront.signup()
        Userfront.signup({
          method: "password",
          email: this.email,
          password: this.password,
          data: {
            accountName: this.accountName,
          },
        }).catch((error) => {
          this.alert = error.message;
        });
      },
      // Sign up with SSO (google)
      signupWithSSO() {
        Userfront.signup({ method: "google" });
      },
    },
  };
</script>

<style scoped>
  button,
  input {
    display: block;
    margin-bottom: 10px;
  }

  #alert {
    color: red;
    margin-bottom: 10px;
  }
</style>

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





 
 
 


Userfront.signup({
  method: "password",
  email: this.email,
  password: this.password,
  data: {
    accountName: this.accountName,
  },
});

# Error handling

In this example, we use a <div>{{ alert }}</div> element to display the alert message.

We first clear the alert message whenever the form is submitted.

If the passwords do not match, we set the alert message and return without submitting the signup.

Whenever the Userfront.signup() method fails, we catch its error in the promise chain. This error contains a message property with what went wrong, and we set that as the alert message.


 


 







 



signupWithPassword() {
  this.alert = "";
  // Verify that the passwords match
  if (this.password !== this.passwordVerify) {
    this.alert = "Passwords must match";
    return;
  }

  Userfront.signup({
    // ...
  })
  .catch((error) => {
    this.alert = error.message;
  });
}

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




 
 
 
 
 








signupWithPassword() {
  // Reset the alert to empty
  this.alert = "";
  // Verify that the passwords match
  if (this.password !== this.passwordVerify) {
    this.alert = "Passwords must match";
    return;
  }
  // Call Userfront.signup()
  Userfront.signup({
    // ...
  }).catch((error) => {
    this.alert = error.message;
  });
}

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

In this example, we add an SSO <button> to allow signup with Google.

Ultimately, we need to call Userfront.signup({ method: "google" }) whenever the button is clicked. You can style the button however you like.

You can find more provider options like GitHub, LinkedIn, and Facebook in the docs for signup().

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

We added an SSO <button> element to call signupWithSSO() when clicked.

<button @click.prevent="signupWithSSO">
  Sign up with Google
</button>
Last Updated: 7/8/2021, 4:09:09 PM