Docs
Docs / Toolkit /
/
/

Build a login form with Vue

#Before you begin

  • Sign up for a Userfront account
  • In your Userfront Dashboard, note your workspace ID: this appears under the workspace name on your Overview page, and looks something like 123abc4d

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

#Example: custom login form with Vue.js

You can clone the example login 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.

#CDN

#NPM

Then import the library into your file(s):

#Set up the form

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

In this case, we've added:

  • emailOrUsername - the user's email address or username
  • password - required for login with password

#Login form Vue code

#<form> element

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

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

#loginWithPassword()

When the form is submitted, this function calls Userfront.login() with the current emailOrUsername and password.

#SSO <button> element

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

#loginWithSSO()

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

#Email or username field

For login, you can use the emailOrUsername field, which will accept both email and username.

If you want email only, or username only, you can use the email or username attributes instead of emailOrUsername.

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

Whenever the Userfront.login() 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.

#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 login with Google.

Ultimately, we need to call Userfront.login({ 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 login().


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

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