In this user authentication setup guide, we will delve into how we can add user logins to Webflow website using Vault Vision authentication service.
After adding our auth capability, linking with services like Stripe and Airtable is simple and the best part is we can do it all with NoCode. We’ve simplified adding user-driven Airtable entries, allowing for Micro-SaaSes or web apps without coding, using Webflow.
There are seven steps to the process:
- Go to the ‘Made in Webflow’ page and find the Vault Vision template and clone it into a Webflow site.
- After creating the site, we will name the site ‘fast-auth-noww’ to start with and let Webflow start building it.
- After Webflow has generated the site, we create the auth tenant in Vault Vision using the same name as in the ‘NoCode Quickstart‘. We begin with fast-auth-noww.webflow.io.
- After the tenant has been set up, we copy-paste the script tag back into the ‘Custom Code’ tab in Webflow’s project settings and then wait for publication.
- The new website that’s generated will have the ‘Log In’ and ‘Sign Up’ buttons where we can sign up as a new user.
- To create an account, we click the ‘sign in’ and add users in the ‘sign in’ page. We start by feeding our email in the email slot. In addition to password, our auth service also offers passkey login, which is a secure login method that uses our device’s hardware-backed token. We can log in with our pin without using our password.
- Email validation option is also available, which sends email verification code to the email used to register. We input the code that we receive on our email and verify our account. Although this option is not necessary, it helps to keep spammy users away.
And there you have it. The new user has been added and, as you can see, user context such as ‘username’, ‘name’, ‘access my profile’ are available in the application.
We can now integrate with other products such as Airtable or Stripe using this user context and can also utilize some of our other plug-ins to obtain a NoCode solution.
