Thursday, July 17, 2025

πŸš€ Upgrading My Java Spring Boot + React ToDo App: Day 1 – Email Verification on Sign Up

 Yesterday, I began working on the Email Verification feature for my Java Spring Boot + React ToDo app. At first, I thought it would be a quick and easy task—but it turned out to be more complex and insightful than expected. Behind a simple idea like “email verification” lies a good amount of planning, coding, and debugging.


✅ Project Goals for Email Verification:

  1. Send a verification email after a user signs up.

  2. Prevent login access until the user has verified their email.

  3. Track email verification status in the backend securely.

  4. Expire the verification token after a certain time (default: 24 hours).


πŸ”¨ What I’ve Done So Far:

Backend (Spring Boot)

  1. Configured SMTP settings in application.properties to send emails.

  2. Updated pom.xml to include necessary dependencies (Java Mail Sender, etc.).

  3. Created AppConstants.java in the config folder to define token expiration (e.g., 2 minutes for testing).

  4. Modified AuthController.java to:

    • Enhance the signup and login logic

    • Add a new /verify endpoint to process verification links

  5. Extended the User entity to include an emailVerified boolean field.

  6. Created VerificationToken.java in the model layer to represent token info.

  7. Created VerificationTokenRepository.java and updated UserRepository.java.

  8. Implemented EmailService.java for sending out emails.

  9. Updated UserService.java to manage token generation, expiration, and verification flow.

Frontend (React)

  1. Modified signup.js to include email input and send it to the backend.

  2. Enhanced login.js to block users who haven’t verified their email yet.

  3. Planned:

    • A dedicated /verify page that will be opened from the email link and call the backend to confirm the token.

    • A resend verification button in case the user missed or the token expired.

Even though those last two tasks weren’t initially requested, I realized they’re essential for a smoother user experience—so I plan to include them as part of this upgrade.


πŸ’‘ Key Takeaways

This task may sound simple in theory, but in practice, it required modifying almost every core layer of the app—model, controller, service, config, repository, and even the build files. It was a full-stack challenge that deepened my understanding of secure user registration.

No comments:

Post a Comment

🧠 Basic ReactJS Programming Language Tutorial: Getting Started with Modern Web Development

 ReactJS is one of the most popular JavaScript libraries for building modern, interactive user interfaces — especially for single-page appli...