Part 3 --- Protected Routes & Authorization (Frontend)

Frontend route protection is the user-facing gatekeeper of your application, ensuring unauthorized visitors cannot manually type URLs to access restricted dashboards or admin panels. The pattern involves creating a wrapper component, conventionally named ProtectedRoute, that checks the global authentication state—usually sourced from a Context or Zustand store that synchronizes with localStorage. While the authentication status is being verified (for instance, if the token exists but we haven't fetched the user's profile yet), the wrapper renders a loading spinner to avoid the visual flicker of redirecting from a login page. If the user is authenticated, the wrapper renders its child components (typically using Outlet in React Router v6 for nested routes). If not, it imperatively navigates the user back to the login screen using useNavigate, creating a seamless and secure browsing experience.

Creating an Auth Context (Global User State)

We need a global state to hold the current user and loading status. We'll use the Context API (or Zustand) so that the Navbar, ProtectedRoute, and any component can access the authentication status instantly.

// context/AuthContext.jsx
import { createContext, useContext, useState, useEffect } from "react";
import { getProfile } from "../services/authService";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Check if a token exists on app mount
    const token = localStorage.getItem("accessToken");
    if (token) {
      // Verify the token by fetching the user profile
      getProfile()
        .then((userData) => setUser(userData))
        .catch(() => {
          // If token is invalid, clear it
          localStorage.removeItem("accessToken");
          localStorage.removeItem("user");
          setUser(null);
        })
        .finally(() => setLoading(false));
    } else {
      setLoading(false);
    }
  }, []);

  const login = (userData, token) => {
    localStorage.setItem("accessToken", token);
    localStorage.setItem("user", JSON.stringify(userData));
    setUser(userData);
  };

  const logout = () => {
    localStorage.removeItem("accessToken");
    localStorage.removeItem("user");
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

Implementing the ProtectedRoute Component

This component uses the useAuth hook to determine if the user is authenticated. If loading is true, we show a spinner. If user is null, we redirect to /login. Otherwise, we render the child routes.

// components/ProtectedRoute.jsx
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../context/AuthContext";

const ProtectedRoute = () => {
  const { user, loading } = useAuth();

  if (loading) {
    return <div className="spinner">Loading your session...</div>;
  }

  return user ? <Outlet /> : <Navigate to="/login" replace />;
};

export default ProtectedRoute;

Using in App.jsx

We structure our routes so that all private pages are nested inside the <ProtectedRoute> component.

// App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AuthProvider } from "./context/AuthContext";
import ProtectedRoute from "./components/ProtectedRoute";
import Login from "./pages/Login";
import Dashboard from "./pages/Dashboard";
import Profile from "./pages/Profile";

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route element={<ProtectedRoute />}>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/profile" element={<Profile />} />
          </Route>
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}

Network topologies

Part 4 --- Building the Full-Stack MERN Structure

Connecting the frontend and backend into a cohesive MERN application requires careful coordination of ports, CORS policies, and environment variables. The React development server typically runs on port 5173, while the Express server runs on port 5000, necessitating a proxy configuration or explicit CORS middleware to allow cross-origin requests. To make API endpoints maintainable, developers define a centralized API client that points to the base URL of the backend, ensuring that if your server IP changes, you only update one file. This full-stack structure brings a new level of organization, often separating concerns into frontend components, frontend state stores, backend routes, backend controllers, and database models. With this architecture, your application becomes highly modular, easily extensible, and ready for deployment to platforms like Render or Vercel.

Typical Project Folder Structure

my-mern-app/
├── client/                    # React Frontend (Vite)
│   ├── src/
│   │   ├── components/        # Reusable UI pieces
│   │   ├── pages/             # Route-level screens
│   │   ├── context/           # AuthContext, ThemeContext
│   │   ├── services/          # API service files (authService, productService)
│   │   ├── utils/             # axiosInstance.js, helpers
│   │   └── App.jsx
│   └── package.json
│
└── server/                    # Express Backend
    ├── models/                # Mongoose models (User, Product)
    ├── routes/                # Express route handlers
    ├── controllers/           # Business logic
    ├── middleware/            # auth.js (verifyToken), errorHandler.js
    ├── config/                # Database connection
    └── server.js
Connecting Client to Server with CORS

On the backend, ensure CORS is enabled to accept requests from your React origin.

// server/server.js
const cors = require("cors");
app.use(cors({ origin: "http://localhost:5173", credentials: true }));

Environment Variables (.env)

Never hardcode secrets! Use environment variables for the API URL and JWT secret.

# client/.env
VITE_API_URL=http://localhost:5000/api

# server/.env
PORT=5000
MONGODB_URI=mongodb://localhost:27017/myapp
JWT_SECRET=your_super_secret_key_here
---

Part 5 --- Logout & Token Expiry Gracefully

Handling the end of a user's session gracefully is just as important as logging them in. When a user intentionally clicks logout, the application must immediately clear the stored token from localStorage and reset the global state to null, instantly reflecting the unauthenticated state across every component. However, sessions can also end unexpectedly when a JWT expires—modern tokens often include an exp claim that the server checks, returning a 401 HTTP status code if the time has passed. Our Axios response interceptor detects this specific 401 code, clears the stale token, and redirects the user to the login page, often displaying a friendly notification that their session has timed out. This proactive approach prevents dreaded "broken UI" scenarios where components try to fetch data with invalid credentials, ensuring the user is always met with a clear path back to regaining access.

The Logout Function (in AuthContext)

// context/AuthContext.jsx (inside the provider)
const logout = () => {
  localStorage.removeItem("accessToken");
  localStorage.removeItem("user");
  setUser(null);
  // Optionally navigate using useNavigate if called inside a component
};

Handling Expiry with a Notification

We can enhance our Axios response interceptor to show a toast notification before redirecting, using a library like react-hot-toast.

// utils/axiosInstance.js
import toast from "react-hot-toast";

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      toast.error("Your session has expired. Please login again.");
      localStorage.removeItem("accessToken");
      localStorage.removeItem("user");
      // Dispatch a custom event to let React Router know to redirect
      window.dispatchEvent(new CustomEvent("unauthorized"));
    }
    return Promise.reject(error);
  }
);

Then, in your App.jsx, you listen for this event and navigate programmatically:

// App.jsx (inside the component)
useEffect(() => {
  const handleUnauthorized = () => {
    navigate("/login", { replace: true });
  };
  window.addEventListener("unauthorized", handleUnauthorized);
  return () => window.removeEventListener("unauthorized", handleUnauthorized);
}, [navigate]);

Our Bot is backkk after being down for some time

Big shout out to @EthioDeploy 🫡🫡

Mawlid Mubarak 🤗🤗

A Simple Guide to SEO & Social Sharing in Next.js (2026)
Learn how to make your Next.js app easy to find on Google, AI tools, and social media platforms.


Modern SEO in Next.js
Search engines and AI crawlers can only read content that is already present when the page first loads. If your app waits to load data on the user’s browser (for example, using common data-fetching hooks without a starting value), crawlers will see an empty page.

The fix is to load your data on the server first and provide it to the browser as a starting point. This way, search engines receive a fully built page, while your users still enjoy fast, interactive features.


Key SEO Concepts to Set Up:

1. Central Page Information – Create a main hub for all your page details, like titles, descriptions, and keywords. This is also where you define special tags for social media (such as Open Graph and Twitter cards) so your links look great when shared.

2. Crawler Rules – Set up a guide for search engine bots that tells them which parts of your site they are allowed to scan. Make your public content open for indexing, but block private areas (like user dashboards or admin panels) to save your site's resources.

3. Site Map – Build a dynamic map of your entire website that lists every public page. This map pulls information from your database and helps search engines discover all of your content easily.

4. Social Preview Images – Set up an automatic image generator that creates a custom preview picture (for example, a 1200×630 pixel image) whenever someone shares a link on platforms like WhatsApp, X (Twitter), or Facebook. This ensures every shared link looks polished and matches your brand.

5. Smart Data Fetching – Always load your main page data on the server first and hand it off to the browser as a starting value. This pattern gives search engines the full content they need to index your page, while still allowing users to interact with filters, search, and pagination instantly.

My project has been selected for voting in the Nexus New Year Challenge 🎉, and the next step is the public vote!

The top 3 winners (by votes) will receive their first Upwork contract 🌟, so your support really means a lot to me.

Please click the link below and join the Nexus Telegram channel first, then vote (👍🏾) on my project using the link below.
NB: Reactions from accounts that haven’t joined the channel are not counted, so please make sure you click the “Join Channel” button before reacting.

Also, make sure you react to the project post on the official Nexus channel, not to this forwarded message.
Thank you so much for your support! 

Here is the link: https://t.me/nexus_tutorial/359