React JS UI Page

What is React.js?

React.js is a JavaScript library for building user interfaces, primarily for Single Page Applications (SPA). It allows you to create reusable UI components and manage dynamic data.

React uses:

1. Components - Reusable UI blocks.

2. State & Props - Manage dynamic data.

3. Virtual DOM - Efficient updates without reloading the page.

4. React Router - Navigation without refreshing the browser.

Project Setup:

npx create-react-app react-auth
cd react-auth
npm install
npm start

Install Required Packages:

npm install react-router-dom axios

• react-router-dom → Enables navigation between pages.

• axios → Used for API requests.

Step 1: App.js (Main Entry Point)

src/App.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Register from "./components/Register";
import Login from "./components/Login";
import Dashboard from "./components/Dashboard";

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Register />} />
                <Route path="/register" element={<Register />} />
                <Route path="/login" element={<Login />} />
                <Route path="/dashboard" element={<Dashboard />} />
            </Routes>
        </Router>
    );
};

export default App;

Explanation

1. Imports React and React Router for navigation.

2. Defines routes (Routes & Route):

   • /register → Shows Register page.

   • /login → Shows Login page.

   • /dashboard → Shows Dashboard page.

3. Wraps everything inside <Router> to manage navigation.

Step 2: Register Component

src/components/Register.js

import React, { useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import "../styles/auth.css";

const Register = () => {
    const [user, setUser] = useState({ name: "", email: "", password: "" });
    const [message, setMessage] = useState("");

    const handleChange = (e) => {
        setUser({ ...user, [e.target.name]: e.target.value });
    };

    const handleRegister = async (e) => {
        e.preventDefault();
        try {
            const res = await axios.post("http://127.0.0.1:8000/register", user);
            setMessage(res.data.message);
        } catch (err) {
            setMessage(err.response?.data?.detail || "Registration failed");
        }
    };

    return (
        <div className="auth-container">
            <h2>Register</h2>
            <form className="auth-form" onSubmit={handleRegister}>
                <input type="text" name="name" placeholder="Name" onChange={handleChange} required />
                <input type="email" name="email" placeholder="Email" onChange={handleChange} required />
                <input type="password" name="password" placeholder="Password" onChange={handleChange} required />
                <button type="submit">Register</button>
            </form>
            {message && <p>{message}</p>}
            {message === "User registered successfully" && <Link to="/login" className="auth-link">Go to Login</Link>}
        </div>
    );
};

export default Register;

Explanation

1. useState() → Manages form data.

2. handleChange() → Updates state when user types.

3. handleRegister() → Sends form data to FastAPI backend.

4. Displays success/error message.

5. If registration is successful, shows "Go to Login" link.

Step 3: Login Component

src/components/Login.js

import React, { useState } from "react";
import axios from "axios";
import { useNavigate, Link } from "react-router-dom";
import "../styles/auth.css";

const Login = () => {
    const [user, setUser] = useState({ email: "", password: "" });
    const [message, setMessage] = useState("");
    const navigate = useNavigate();

    const handleChange = (e) => {
        setUser({ ...user, [e.target.name]: e.target.value });
    };

    const handleLogin = async (e) => {
        e.preventDefault();
        try {
            const res = await axios.post("http://127.0.0.1:8000/login", user);
            setMessage(res.data.message);
            if (res.data.message === "Login successful") {
                navigate("/dashboard");  // Redirect to Dashboard
            }
        } catch (err) {
            setMessage(err.response?.data?.detail || "Login failed");
        }
    };

    return (
        <div className="auth-container">
            <h2>Login</h2>
            <form className="auth-form" onSubmit={handleLogin}>
                <input type="email" name="email" placeholder="Email" onChange={handleChange} required />
                <input type="password" name="password" placeholder="Password" onChange={handleChange} required />
                <button type="submit">Login</button>
            </form>
            {message && <p>{message}</p>}
            <Link to="/register" className="auth-link">Go to Register</Link>
        </div>
    );
};

export default Login;

Explanation

1. useState() → Stores email/password.

2. useNavigate() → Redirects user after login.

3. handleLogin() → Sends credentials to the backend.

4. Redirects user to /dashboard if login is successful.

Step 4: Dashboard Component

src/components/Dashboard.js

import React from "react";

const Dashboard = () => {
    return (
        <div className="auth-container">
            <h2>Welcome to the Dashboard</h2>
            <p>You have successfully logged in!</p>
        </div>
    );
};

export default Dashboard;

Explanation

1. Simple UI to show success message.

2. Only accessible after login.

Step 5: Add CSS Styling

src/styles/auth.css

.auth-container {
    width: 100%;
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.auth-form input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.auth-form button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

Step 1 : Setting Up the Backend (FastAPI + MongoDB)

1. Install Dependencies

First, create a virtual environment and install dependencies:

mkdir fastapi-auth
cd fastapi-auth
pip install fastapi uvicorn pymongo python-dotenv 'passlib[bcrypt]' 'pydantic[email]'

Explanation:

• fastapi → API framework

• uvicorn → Server to run FastAPI

• pymongo → Connects FastAPI to MongoDB

• passlib[bcrypt] → Hash passwords securely

• python-dotenv → Load environment variables

• pydantic[email] → Email validation

2. Connect FastAPI to MongoDB

Create a .env file to store MongoDB credentials:

MONGO_URI=mongodb://localhost:27017
DB_NAME=auth_db

3. Create FastAPI App

Create a file main.py:

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel, EmailStr
from pymongo import MongoClient
from passlib.context import CryptContext
from dotenv import load_dotenv
import os

# Load environment variables
load_dotenv()
MONGO_URI = os.getenv("MONGO_URI", "mongodb://localhost:27017")  # Default to local MongoDB
DB_NAME = os.getenv("DB_NAME", "auth_db")

# Database Connection
client = MongoClient(MONGO_URI)
db = client[DB_NAME]
users_collection = db["users"]

# Password Hashing
pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")

# FastAPI App Initialization
app = FastAPI()

# Enable CORS for frontend communication
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # React frontend URL
    allow_credentials=True,
    allow_methods=["*"],  # Allow all HTTP methods
    allow_headers=["*"],  # Allow all headers
)

# Request Models
class RegisterUser(BaseModel):
    name: str
    email: EmailStr
    password: str

class LoginUser(BaseModel):
    email: EmailStr
    password: str

# User Registration Route
@app.post("/register")
async def register(user: RegisterUser):
    existing_user = users_collection.find_one({"email": user.email})
    if existing_user:
        raise HTTPException(status_code=400, detail="Email already registered")

    hashed_password = pwd_context.hash(user.password)
    users_collection.insert_one({
        "name": user.name,
        "email": user.email,
        "password": hashed_password
    })
    return {"message": "User registered successfully"}

# User Login Route
@app.post("/login")
async def login(user: LoginUser):
    existing_user = users_collection.find_one({"email": user.email})
    if not existing_user or not pwd_context.verify(user.password, existing_user["password"]):
        raise HTTPException(status_code=400, detail="Invalid email or password")

    return {"message": "Login successful"}

Final Steps

1. Start backend API:

   uvicorn main:app --reload

2. Start frontend:

   npm start