Authy Demo

Let's build a simple auth system called Authy to see how Next.js handles authentication. We'll use next-auth which is rebranded to Auth.js to handle all the auth stuff, but more importantly, you'll learn about:

• Protected routes
• Middleware
• How layouts work with auth
• Route protection
• OAuth setup

Interactive Demo

Here's the authentication system you'll be building:

Try admin/admin credentials to log in.

Github Repo 🔗

You can find the Github repo for all the lessons here . The repo is divided into different commits for each lesson. As you follow along, you can check out the repo to see the final code for each lesson or if you get stuck.

App Requirements

1. Create a basic authentication system with the following routes:

   • / - Public home page
   • /login - Login page
   • /dashboard - Protected dashboard page
   • /dashboard/settings - Protected settings page
   • /dashboard/profile - Protected profile page

2. Implement route protection using middleware

3. Create different layouts for authenticated and non-authenticated pages

4. Add dynamic navigation based on auth state

5. Handle "not found" and error pages

Want to see how it all works? Check out the demo:

The app has a simple header with navigation links that change based on whether you're logged in or not. There's also a handy auth panel that shows your current path and login status - super useful for debugging!

For this demo, we're keeping it simple with admin/admin credentials (I know, I know - but hey, it's just for learning!). Once you log in, you'll see:

• New nav options (Dashboard & Logout)
• Your auth status changes to "authenticated"
• Protected routes actually work!

Try accessing /dashboard without logging in - you'll get bounced right back to the login page. That's route protection in action!