How do you integrate authentication with React-Router

Question

With the help of code tell me How do you integrate authentication with React-Router?

Answer 1

To integrate authentication with React Router, follow these precise steps:

1. Install Dependencies

Ensure you have React Router installed:

npm install react-router-dom

2. Create Authentication Context (auth.js)

Manage authentication state using React Context:

import { createContext, useContext, useState } from "react";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {

  const [user, setUser] = useState(null);

  const login = (userData) => setUser(userData);

  const logout = () => setUser(null);

  return (

    <AuthContext.Provider value={{ user, login, logout }}>

      {children}

    </AuthContext.Provider>

  );

};

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

3. Create Protected Route Component

Restrict access to authenticated users:

import { Navigate } from "react-router-dom";

import { useAuth } from "./auth";

const ProtectedRoute = ({ children }) => {

  const { user } = useAuth();

  return user ? children : <Navigate to="/login" />;

};

export default ProtectedRoute;

4. Define Routes in App.js

Use React Router with authentication logic:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import { AuthProvider } from "./auth";

import ProtectedRoute from "./ProtectedRoute";

import Home from "./Home";

import Login from "./Login";

import Dashboard from "./Dashboard";

const App = () => (

  <AuthProvider>

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/login" element={<Login />} />

        <Route 

          path="/dashboard" 

          element={<ProtectedRoute><Dashboard /></ProtectedRoute>} 

        />

      </Routes>

    </Router>

  </AuthProvider>

);

export default App;

5. Handle Login and Logout (Login.js)

Simulate login authentication:

import { useAuth } from "./auth";

import { useNavigate } from "react-router-dom";

const Login = () => {

  const { login } = useAuth();

  const navigate = useNavigate();

  const handleLogin = () => {

    login({ name: "User" }); 

    navigate("/dashboard"); 

  };

  return <button onClick={handleLogin}>Login</button>;

};

export default Login;