Frontend Hire
Frontend
Back to frontend track

General Courses

Login Register Flow

Learn how to build a login and register flow with E2E tests and Supabase.

OverviewSetup a Next.js ProjectSetup a Supabase Project for Local DevelopmentBuilding Landing PageBuilding Login PageE2E Testing Login FlowBuilding Register PageE2E Testing Register FlowBonus: Saving Auth StateSummary

Setup a Next.js Project

To keep the course focused on the main topic, we will use an already setup Next.js project. You can clone the project from the GitHub repository and follow along with the course.

This initial code was generated through the Next.js CLI. We just cleaned up the project structure and added Prettier, Husky, Lint-Staged, and the Tailwind CSS class sorter plugin. Clone the repository and install the dependencies:

Note: Just make sure that you start on the branch 0-init, though it is the default branch.

git clone https://github.com/yaralahruthik/login-register-flow-e2e-supabase.git
cd login-register-flow-e2e-supabase
npm install
npm run dev

That is it for the setup. Let's move on to the next chapter, where we'll setup the Supabase project for local development.