Upgrading the Spring Boot & ReactJS App with Email Verification and User Profiles

 

✨ Introduction

In a real-world scenario, imagine a client approaches you with a request to enhance their existing web application—a simple ToDo List app built with Java Spring Boot for the backend, PostgreSQL as the database, and ReactJS on the frontend, all deployed on Railway.

They want to upgrade the app with features commonly found in production-ready systems:
✅ Email verification upon signup
✅ User profile management (with profile picture upload)
✅ "Forgot Password" functionality with email recovery

This enhancement transforms a basic CRUD app into a more secure and user-friendly system, bringing it closer to the standards of modern web applications.

This is a great learning opportunity for aspiring full-stack developers, especially those who already know Java and are looking to gain practical experience building full authentication and profile systems. By working through this upgrade, you’ll get hands-on experience in:

• Managing authentication and email flows in Spring Boot

• Handling file uploads and user profile data

• Building dynamic forms and secure access in ReactJS

• Integrating email services and password recovery flows

Let’s walk through how to implement these features step-by-step and turn a simple ToDo app into a more complete web solution.

This is the high level specification:

Project Enhancement Request:

I have an existing full-stack ToDo List web application built with:

• Backend: Java Spring Boot

• Database: PostgreSQL

• Frontend: ReactJS

• Deployment: Railway

I would like to enhance the application with the following user account management features:

---

🔐 Email Verification on Sign Up

• After a user signs up, an email containing a verification link or code should be sent to their registered email.

• Users cannot log in until they have verified their email.

• The backend should securely store an email verification status (e.g., a verified boolean field) and update it upon verification.

• Token or link should expire after a certain duration (e.g., 24 hours).

---

👤 User Profile Page

• Once logged in, users should have access to a Profile page where they can:

  • Upload and update a profile picture

  • Edit their first name, last name, address, and other personal information

• Profile picture storage can use:

  • Railway's storage (if available), or

  • Cloud storage (e.g., Cloudinary, S3) with URL saved in the database

• Ensure that updates are reflected immediately on the UI after saving.

---

🔑 Login Screen with "Forgot Password" Feature

• Add a "Forgot Password" link to the login screen.

• Users can input their registered email, and the system will:

  • Send a password reset link or one-time code

  • Allow the user to reset their password securely via a new page or form

• Expire password reset tokens after a short time (e.g., 15–30 minutes)

---

📝 Notes

• All features must be fully integrated with the existing PostgreSQL user table schema, possibly adding new columns:

  • email_verified, verification_token, reset_password_token, profile_picture_url, first_name, last_name, address

• Use Spring Security and JWT (if already in use) to manage secure access.

• For sending emails, integrate a service like SendGrid, Mailgun, or SMTP (e.g., Gmail SMTP for testing).

Here is the breakdown of the Implementation Plan:

✅ Feature Set

1. Email Verification on Signup

2. User Profile Page

3. Forgot Password Functionality

---

🔧 Backend (Spring Boot + PostgreSQL)

1. User Entity Enhancements

Update the User model:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

@Entity public class User { @Id @GeneratedValue private Long id; private String email; private String password; private boolean emailVerified = false; private String firstName; private String lastName; private String address; private String profileImageUrl; private String verificationToken; private String resetPasswordToken; private LocalDateTime tokenExpiry; // getters, setters }

2. Signup + Email Verification Flow

• On signup:

  • Generate a UUID verification token

  • Send a verification email with a link:
    https://your-app.com/verify?token=...

  • Save token and expiry in DB

Controller logic:

1 2 3 4 5

@PostMapping("/signup") public ResponseEntity<?> register(@RequestBody SignupDTO dto) { // Save user with emailVerified = false // Generate token, send email using MailService }

Verification endpoint:

1
2
3
4
5
@GetMapping("/verify")
public ResponseEntity<?> verify(@RequestParam String token) {
    // Find user by token, validate expiry
    // Set emailVerified = true, clear token
}

3. Login Blocking for Unverified Accounts
In the login logic:

1
2
3
if (!user.isEmailVerified()) {
    throw new UnauthorizedException("Please verify your email before logging in.");
}

4. Forgot Password Flow


User requests password reset by email
Generate token, save with expiry
Email link: https://your-app.com/reset-password?token=...
User submits new password via form


5. Profile Update API
Authenticated PUT /user/profile to update fields
Accept multipart/form-data if uploading image
Store image URL in DB, upload to Cloudinary or local


🎨 Frontend (ReactJS)
1. Signup Page
Include email input
Show message: "Please check your inbox to verify your email"

2. Email Verification
Route: /verify?token=...
On mount, send token to backend and show success/error message

3. Login Page
Show "email not verified" error if applicable
Add "Forgot Password" link

4. Forgot Password Flow
Page: input email → send request to /forgot-password
Route: /reset-password?token=... to set new password

5. Profile Page
Form fields: First Name, Last Name, Address, Upload Profile Picture
Show current profile data and update on save


🛠 Tools & Libraries
Backend:
Spring Boot
Spring Security
JavaMailSender / Mailgun API
Lombok
Cloudinary SDK (optional for image upload)

Frontend:
React + Axios
React Router
Form libraries (Formik or React Hook Form)
Toast notifications (e.g., react-toastify)