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
Secured by Userfront#Example: Vue.js login form
#Install the Userfront Vue library
To add the form to your Vue project, first install @userfront/toolkit with npm (or yarn).
#Render the login form in Vue
See a demo on CodeSandbox
First, initialize the Userfront Toolkit for Vue with your workspace ID using Userfront.init().
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.
Import the LoginForm Vue component from @userfront/toolkit/vue and register it as a component.
Then you can use the <login-form /> component in your <template> tag.
#Test mode
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.
#Redirection
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 workspace:
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.
#Single Sign-on
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.
#Login link
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.
