How-To
October 1, 2024

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.

For this guide, we assume you have already signed up for Userfront and created a workspace.

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”
  1. Add Userfront Integration
    • After creating your repository, go down to the “Add Integrations” section and click “Add”
  1. 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”
  1. 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.

Related

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

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.
October 1, 2024
By 
Darin Evangelista
How-To

Security-charging Your NextJS 14 App with Userfront Authentication

Whether you're new to authentication in NextJS or looking to migrate to a modern identity and authentication management system, this guide provides you with the knowledge to build a robust, secure authentication system using Userfront in your NextJS 14 application.
July 24, 2024
By 
Userfront DevEx Team
How-To

Plug-and-play auth with Userfront’s Toolkit

With Userfront’s Toolkit, adding things like a signup form or a login form to your own applications is a breeze. Ready to give it a whirl? Let’s go!
September 12, 2023
By 
Sara Safavi
How-To