Ready-to-use login form with Vue
In this section, we add an automatic login form that can do the following:
- Log in a user with email or username
- Redirect to a URL of your choice upon login
- Single Sign-on (SSO) with Google & others
- Send a login link
- Send a password reset email
#Example: Vue.js login form
#Install the Userfront Vue library
To add the form to your Vue project, first install
@userfront/vue with npm (or yarn).
#Render the login form in Vue
See a demo on CodeSandbox(opens new window)
First, initialize the Userfront Vue library with your account ID using
You can do this in the main file (as shown here) or in a component file. If you do this in the main file, you only need to do it once.
LoginForm component from
@userfront/vue and register it as a component.
Then you can use the
<login-form /> component in your
<template> tag. You can find your
tool-id in the Toolkit section of the Userfront dashboard.
By default, your form is in test mode. This allows you to experiment and develop locally without affecting your live data.
Test mode is used automatically for any domains that are not secured with
https:// or that are not added to your list of live domains.
#Log in a user
Add your login form to any page where you want a user to be able to login.
The user is able to log in with either their email address or their username, if applicable.
In order for the login form to work properly, it should be located at the same domain as your "logged in" pages.
When a user logs in, they are redirected to the path of your choice.
The default is
/dashboard, but you can change it in your account:
Settings > After-login path
Upon logging in, the user will be redirected to whatever domain the form is on, plus the After-login path.
For example, if the login form is at
https://example.com/login, then the user will be redirected to
https://example.com/dashboard upon login.
To configure Single sign-on (SSO) with Google or other providers, visit the SSO tab in the Userfront dashboard.
From there, you can add the credentials for the providers you want to use.
Once you have done this, the corresponding button(s) will show up on your form automatically.
The automatic form can send login links (sometimes called "magic links") to a user.
When the user submits their email address, Userfront sends them an email with a link to log in. This link allows the user to log in without entering their password.
Login links are valid for 1 hour and can only be used once.
#Password reset link
The automatic form can send password reset links to a user.
When the user submits their email address, Userfront sends them an email with a link to reset their password. This link directs the user to your Password reset path, which is where you should add your password reset form.
Password reset links are valid for 1 hour and can only be used once.