Launch a Vercel Project with Secure Auth in Just a Few Clicks

Launching a new NextJS app on Vercel with secure authentication has never been faster. In this guide, I'll walk you through the steps to deploying a new Vercel project equipped with the Userfront Vercel integration. The process is straightforward, allowing you to start a new project quickly.

Clone and Deploy the Repository

This process uses Vercel to clone Userfront’s Next.js Sample App repository. When you're done, you will have a fresh Next.js project with ready to use, customizable authentication forms wired up for signup, login, and password reset.

Here’s how it’s done:

1. Click Deploy with Vercel
   • Clicking this button will direct you to Vercel, where you’ll be asked to select a git provider.
2. Create Git Repository
   • Next up, add your new repository name and click “Create”

3. Add Userfront Integration
   • After creating your repository, go down to the “Add Integrations” section and click “Add”

4. Select Your Workspace
   • Clicking “Add” will open a new window. In the new window, you’ll be asked to sign in to Userfront (if you aren’t signed in already) and select a workspace. Pick your workspace and click “Complete Setup”

5. Wait for the Project to Deploy
   • You can now return to the Vercel page to check the status of your deployment. When it’s complete, you’ll see this screen:

At this point, you have successfully deployed a new Vercel project that is fully integrated with Userfront. Here’s what a completed setup looks like: https://userfront-vercel-example.vercel.app/

What’s Next?

The completed project contains a homepage, plus pages with your login, signup, and reset password components. These components are ready to use and can be customized in the Userfront dashboard.

If you’re using the Userfront Toolkit, as soon as you update a form on the Userfront dashboard, it will be updated on your Vercel project. No code changes necessary.

For further customization and advanced features, refer to the Userfront documentation.