Course Content
Next.js 14 Mastery for Building Modern Web Apps
Next.js 14 Mastery for Building Modern Web Apps
1. Introduction to Next.js
2. Setting Up a Next.js Project
Setting Up the Next.js Project Understanding the Project File and Folder StructureStyling Approaches in Next.jsAdding the Global CSS FileUsing Tailwind CSS for StylingWorking with CSS ModulesApplying Styles ConditionallyAdding Custom Google FontsChallenge: Implementing a Custom Google FontHandling Images in Next.js
3. Building Pages and Layouts in Next.js
4. Deploying a Next.js App and Setting Up a Database
5. Fetching and Displaying Data in Next.js
6. Advanced Next.js Features and Optimizations
7. Implementing Authentication in Next.js
Understanding AuthenticationSetting Up the Login RouteUsing NextAuth.js for AuthenticationConfiguring Authentication and Protecting RoutesHashing Passwords and Managing CredentialsImplementing Sign-In FunctionalityConnecting the UI with Authentication LogicImplementing Logout FunctionalityFinal Thoughts and Next Steps
Implementing Sign-In Functionality
We focus on the sign-in functionality.
Back to the Project
1. Handling Authentication Logic
In the auth.ts file, use the authorize function to manage the authentication logic. Validate the email and password using zod before checking if the user exists in the database.
2. Fetching User from Database
After validating credentials, create a getUser function that queries the user from the database using Postgres.
3. Checking Passwords Match
Call bcrypt.compare to check if the entered password matches the one stored in the database.
In Practice
Everything was clear?
Thanks for your feedback!
Section 7. Chapter 6
