
Set up the front end for a react spring boot authentication project with vite, outline the two-app folder structure (client auth app and server auth app), and install dependencies.
Learn how to install and set up Tailwind CSS in a React app, update global CSS and Vite config, and verify with sample Tailwind utility classes.
Configure and install the shard CDN in a React app with tailwind, update tsconfig and paths, install types node, and test components like button and input before building authentication forms.
Learn to build authentication UI with React Router Dom by creating register, login, forgot password, reset password, verify email pages, and wiring public and private routes.
Center a register form user interface on a white background with a card layout, including name, email, and password, and a login link, validated with react hook form and z.
Copy the register form to build the login interface, keep only email and password, remove the name field, and update the title and navigation to show login and registration prompts.
Create the forgot password page by adapting the login form to include only an email field, and add a send password reset link and a login link.
Adapt the login form into a reset password UI with password and confirm password fields, remove email, and link to login, emphasizing front-end authentication basics with React and Spring Boot.
Create a spring boot app for a full stack authentication project using spring boot initializer with Java 21 and the web dependency, then run the server at localhost 8080.
Spring Boot architecture presents controllers, services, and repositories where controllers manage API routes and request bodies, services handle the business logic, and repositories perform database operations using annotations.
The lecture shows building spring boot controllers and services, exposing get and post endpoints, using dependency injection, and reading request bodies with @RequestBody to return structured responses.
Connect a Spring Boot app to Neon cloud PostgreSQL, configure url, username, password, and host in application.properties, and add Spring Data JPA and PostgreSQL dependencies.
Create users table in the supabase database with id, name, email (unique), password, and verified, then map a Spring Boot entity to it with id, username, name, password, and verified.
Inserting a new user record into a Postgres database using Spring Boot, with an updated user entity including email and auto generated id, saved via a JPA repository.
Create a from-scratch user registration API by building entities, repositories, services, and controllers, wire the /api/users endpoint, and prepare a standardized response for front-end integration.
Implement the register user api by checking for an existing email, hashing the password with bcrypt via Spring Security Crypto, and saving the user with Spring Data JPA, using /api/users/register.
Optimize API responses in Spring Boot by introducing a reusable response body with status code and a static API utils, then apply to user registration with negative and positive scenarios.
Learn to integrate a user registration API in a React app using Axios and react-hot-toast, manage loading and errors, and navigate to login after successful signup.
Explore the login API and its integration in a full stack app, implementing backend validation, password checks, and the initial JWT token generation with front-end integration.
Construct and send a JWT token by encrypting the user email in the login API and delivering it to the front end; then store it in local storage.
Discover how Spring Security adds a filter chain to protect private APIs with JWT validation, while public routes stay accessible, and follow five steps to implement this security.
Add the spring security starter to a spring boot project, then configure public routes to permit all while securing all other endpoints with a security filter chain.
Secure private routes with a JWT authentication filter in Spring Boot, validating tokens from the Authorization header and returning the decoded email for the logged-in user.
Fetch the logged in user data from the private route using the stored token and display ID, name, email, and verified status, with loading state and a logout flow.
Learn to implement dynamic email verification after user registration using spring boot starter email, configure application properties and Gmail app passwords, and integrate sending verification emails in the register flow.
Develop a reusable email service with Spring dependency injection of JavaMailSender and a simple mail message to send verification emails after user registration.
Send a dynamic verification email with a jwt token in the link to the front-end verify email route and verify it via the backend api.
implement backend email verification by extracting the email from a jwt token, validating it, updating the user’s verify flag, and returning proper api responses.
Build password reset flow with a forgot password page, two APIs—send password reset email and reset password via token—and a verification step using a jwt token in the reset link.
Implement a password reset flow with a reset endpoint and service, validate the jwt token, hash the new password, and save the updated user via the api.
Analyze and fix a bug in email verification and password reset flows by ensuring one-time use tokens invalidate after first use, preventing multiple operations.
Deploy the frontend react app to vercel, move environment variables to .env, configure vercel.json, and update the backend URL after backend deployment.
Deploy the backend by adding spring env dependency, reading variables from dot env into application properties, enabling cors for the front end, and containerizing with docker for render deployment.
Welcome to the React & Spring Boot Masterclass: Full-Stack Authentication Application! In this course, you’ll learn how to build a complete authentication system from scratch, using React for the front end and Spring Boot for the back end. Along the way, we’ll style our app using Tailwind CSS and build modern, reusable components with ShadCN, ensuring a professional and responsive UI.
Curriculum Overview
Here’s what we’ll cover in detail:
Setting up a React application from scratch.
Using Tailwind CSS for styling and ShadCN for creating reusable UI components.
Designing authentication screens – registration, login, forgot password, and reset password.
Introduction to Spring Boot fundamentals and project setup.
Connecting Spring Boot with a database.
Understanding controllers and services in Spring Boot.
Building user registration API with database integration.
Implementing user login API with JWT tokens for secure sessions.
Adding Spring Security to protect private routes and allow public routes.
Implementing email verification after registration.
Password reset feature with email integration.
Deploying both React and Spring Boot applications to cloud platforms.
By the end of this course, you’ll have a solid understanding of how full-stack authentication works in modern applications. Thank you for choosing this course — I’m excited to guide you on your journey to becoming a skilled full-stack developer!