AuthShield

Description

AuthShield is a hobby and learning-oriented authentication project built using Spring Boot for the backend, React.js for the frontend, and MySQL as the database. It implements features such as signup/login, JWT authentication, email verification, and password reset. It can be useful for students and learners who want a basic authentication setup so they can focus on building core application features without spending too much time on security implementation.

Tech Stack

• Frontend: HTML, CSS, React.js
• Backend: Spring Boot, Spring Security
• Database: MySQL

Preview

Frontend & Backend Integration Notes

• The frontend UI is developed using React
• For deployment, the React application is built and served by the Spring Boot backend as static files
• The React production build files are placed inside the backend’s static directory

Static & Template Files

• The static folder contains the React production build files
• The templates folder inside static is used to store email templates
  • Used for email verification and password reset

How to Run the Project Locally

1. Clone the Repository

git clone https://github.com/Mohamed-Imran-12/AuthShield.git

2. Open Project in IDE

Open the project in IntelliJ IDEA / Eclipse

Open pom.xml and allow Maven to download dependencies

3. Configure Credentials (application.properties)

Database (ONLY MySQL)

spring.datasource.url=your_DB_URL
spring.datasource.username=your_DB_USERNAME
spring.datasource.password=your_DB_PASSWORD

Mail Service (ONLY Brevo)

apiKey=your_BREVO_MAIL_API

4. Run Backend

Run AuthShieldApplication.java

5. Open in Browser

http://localhost:8080/

Important Notes (Must Read)

• Email functionality works only with Brevo API.
  To use another mail provider, update mail-related code in mailServices.java.

• The ADMIN role is manually assigned directly in the database. This is intentional to maintain higher security and prevent unauthorized users from registering as admins.

Modifying the Frontend UI

Do not edit files inside the backend static folder directly.

1. Run Frontend Separately (Development Mode)

cd "frontend src"
npm install
npm run dev

This starts the React development server for UI changes.

2. Build Frontend for Backend Deployment

cd "frontend src"
npm run build

Backend Static Structure

static/
├── assets/
│   ├── *.css
│   ├── *.js
├── index.html

Steps:

• Delete old index.html and files inside assets
• Copy new build files from dist
• Paste them into backend static directory