NUHMAN.com

🔐 React Authentication with Token (Protected Routes using AuthProvider)

📦 Tech Stack:

React, JWT, React Router (v5 or v6), Context API

🧩 1. AuthProvider.js – Authentication Context

jsx

import React, { createContext, useState, useContext, useEffect } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [token, setToken] = useState(() => localStorage.getItem('token'));

  const login = (newToken) => {
    localStorage.setItem('token', newToken);
    setToken(newToken);
  };

  const logout = () => {
    localStorage.removeItem('token');
    setToken(null);
  };

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

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

🔐 2. PrivateRoute.js – Protecting Routes

✅ React Router v5

jsx

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useAuth } from './AuthProvider';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { token } = useAuth();

  return (
    <Route
      {...rest}
      render={(props) =>
        token ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

export default PrivateRoute;

✅ React Router v6

jsx

import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAuth } from './AuthProvider';

const PrivateRoute = ({ children }) => {
  const { token } = useAuth();
  return token ? children : <Navigate to="/login" />;
};

export default PrivateRoute;

🏠 3. App.js – Routing Setup

jsx

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { AuthProvider } from './AuthProvider';
import Login from './Login';
import Home from './Home';
import PrivateRoute from './PrivateRoute';

function App() {
  return (
    <Router>
      <AuthProvider>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route
            path="/"
            element={
              <PrivateRoute>
                <Home />
              </PrivateRoute>
            }
          />
        </Routes>
      </AuthProvider>
    </Router>
  );
}

export default App;

🔑 4. Login.js – Simulating Token Login

jsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from './AuthProvider';

const Login = () => {
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleLogin = () => {
    // Normally you'd call your backend for a token
    const fakeToken = 'abc123token';
    login(fakeToken);
    navigate('/');
  };

  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

✅ 5. Home.js – Protected Component

jsx

import React from 'react';
import { useAuth } from './AuthProvider';

const Home = () => {
  const { logout } = useAuth();

  return (
    <div>
      <h2>Welcome to the Home Page!</h2>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

export default Home;

💡 Bonus Tips:

• ✅ You can enhance this by checking token expiry and decoding JWT.
• 🔐 For role-based protection, store roles inside the token or context.
• 🔁 Add a refresh token mechanism for better UX.