Out Master Class: NextAuth.js (Version 5) Setup and Configuration

Introduction

Welcome to the Out Master Class where we're learning about Out, the new name for NextAuth.js Version 5. In this course, we'll cover setting up Out with both credential and social providers (like Google and GitHub), setting up email verification, forgot password functionality, two-factor authentication, and managing different user roles like admin and user.

Key Topics

• Setting up credential and social providers
• Implementing forgot password and email verification
• Two-Factor Authentication
• Handling user roles
• Building reusable components, hooks, and utilities
• Utilizing Next.js Middleware with Out
• Customizing Out sessions, callbacks, and events

Course Outline

1. Next.js Setup and Installation

   • System requirements: Node.js 18.17 or later
   • Project setup commands
   • Adding ShadcnUI for reusable components

2. Implementing Out

   • Configuring NextAuth.js (Out version 5)
   • Setting up credential and social providers
   • Managing forgot password and email verification
   • Two-Factor Authentication setup
   • Implementing user role management

3. Developing Reusable Components

   • Creating Card Wrapper, Social, and Back Button Components
   • Implementing Login and Register Forms
   • Validating forms with Zod and React Hook Form

4. Handling Routing in Next.js

   • Understanding folder-based routing
   • Creating layouts and nested routes
   • Implementing protected and public routes
   • Using Next.js Middleware for authentication

5. Server Actions with Next.js

   • Setting up and using server actions
   • Handling login and registration server-side
   • Validating fields both client-side and server-side

6. Session Management and Callbacks

   • Extending session data
   • Using callbacks for custom session handling
   • Handling events with Out

7. Role-based Access Control

   • Implementing Roll-based rendering components
   • Securing API Routes and Server Actions based on roles

8. UI Enhancements

   • Using TailwindCSS for styling
   • Creating responsive and interactive components
   • Utilizing ShadcnUI for common UI elements

9. Settings Management

   • Updating user information
   • Email and password change with verification
   • Two-Factor Authentication toggling

10. Deployment

    • Setting up environment variables
    • Configuring for production
    • Handling deployment issues

Conclusion

• Summary of key learnings
• Additional resources for further exploration
• Final remarks on best practices and tips

Additional Notes

• Tools & Libraries Used: Next.js, NextAuth.js (Out), TailwindCSS, ShadcnUI, React Hook Form, Zod, Prisma, Resend (email service provider)
• Frequently Asked Questions: Why accounts are not linked automatically, Edge compatibility, and more.

---

Screenshots and Links

• NextAuth.js Documentation
• Next.js Documentation
• ShadcnUI Documentation
• Prisma Documentation
• React Hook Form
• Zod Documentation
• Resend - Email Service Provider

Attach images and gifs demonstrating the setup and key functionalities.