Ready-to-use signup form with Vue
In this section, we add an automatic signup form that can do the following:
- Register a user
- Redirect to a URL of your choice
- Send a welcome email
- Send a webhook with user information
- Single Sign-on (SSO) with Google & others
Secured by Userfront#Example: Vue.js signup form
#Install the Userfront Vue library
To add the form to your Vue project, first install @userfront/toolkit with npm (or yarn).
#Render the signup form in Vue
See a demo on CodeSandbox
First, initialize the Userfront Vue library 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 SignupForm component from @userfront/toolkit/vue and register it as a component.
Then you can use the <signup-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.
#Register a user
Add your signup form to any page where you want a user to sign up.
For example, you may want your signup form directly on your home page and also on a page at /signup. You can also add it to your marketing pages if desired.
In order for the signup form to work properly, it should be located at the same domain as your "logged in" pages.
#Redirection
When a user signs up, they are redirected to the URL of your choice.
The default is /dashboard, but you can change it on the Paths & routing page in the dashboard.
Upon signing up, the user will be redirected to whatever domain the form is on, plus the After-signup path.
For example, if the signup form is at https://example.com/features, then the user will be redirected to https://example.com/dashboard upon sign up.
#Welcome email
When a user signs up with their email and password, Userfront sends them a welcome email.
This email says that they have signed up for your project and asks the user to verify their email address by clicking on a link.
When the user clicks on the link, their email address is verified, and they are redirected to your After-login path.
#Signup webhook
If you want to be notified when a new user is created, you can add a URL to the User Created Webhook in your workspace settings.
Userfront will send a JSON POST request to your Webhook URL whenever a user is created. This request will have your workspace's Webhook API key in the header, which you can use to verify the request in your application.
For more information about webhooks, see the Webhook reference.
#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.
