Ready-to-use signup form with Vue

In this section, we add an automatic signup form that can do the following:

#Example: Vue.js signup form

#Install the Userfront Vue library

To add the form to your Vue project, first install @userfront/vue with npm (or yarn).

#Render the signup form in Vue

See a demo on CodeSandbox(opens new window)

First, initialize the Userfront Vue library with your account 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/vue and register it as a component.

Then you can use the <signup-form /> component in your <template> tag. You can find your tool-id in the Toolkit section of the Userfront dashboard.

#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 in your account:

Settings > After-signup path

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 account settings.

Userfront will send a JSON POST request to your Webhook URL whenever a user is created. This request will have your account'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.

Single sign-on with Google