Menambahkan Logout dan Proteksi Halaman di React

Halo teman-teman ruanginformatika! 👋 Sekarang aplikasimu sudah bisa login, daftar, dan menampilkan todo sesuai user. Tapi… user yang belum login masih bisa buka halaman utama loh 😱. Yuk kita perbaiki dengan menambahkan fitur logout dan proteksi halaman (route protection).

🧠 Kenapa Perlu Proteksi?

Tanpa proteksi, siapa pun bisa akses halaman todo hanya dengan buka link. Ini bisa membahayakan data. Kita akan buat sistem agar hanya user yang sudah login yang bisa masuk ke halaman tertentu.

1️⃣ Buat AuthContext

Kita akan menyimpan token dan status login di context React supaya bisa diakses dari mana saja.

File: src/context/AuthContext.jsx

import { createContext, useState } from 'react';

export const AuthContext = createContext();

export function 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);
  };

  const isAuthenticated = !!token;

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

2️⃣ Bungkus App dengan AuthProvider

File: src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { AuthProvider } from './context/AuthContext';

ReactDOM.createRoot(document.getElementById('root')).render(
  <AuthProvider>
    <App />
  </AuthProvider>
);
  

3️⃣ Buat Komponen Proteksi Route

File: src/components/PrivateRoute.jsx

import { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from '../context/AuthContext';

export default function PrivateRoute({ children }) {
  const { isAuthenticated } = useContext(AuthContext);
  return isAuthenticated ? children : <Navigate to="/login" />;
}
  

4️⃣ Gunakan PrivateRoute di Routing

File: src/App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Register from './pages/Register';
import Home from './pages/Home';
import PrivateRoute from './components/PrivateRoute';

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

5️⃣ Tambahkan Tombol Logout

Di halaman Home (atau navbar), tambahkan tombol untuk keluar:

import { useContext } from 'react';
import { AuthContext } from '../context/AuthContext';

export default function Home() {
  const { logout } = useContext(AuthContext);

  return (
    <div>
      <h1>Todo Saya</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}
  

🎉 Hasil Akhir

• User yang belum login akan otomatis diarahkan ke halaman login jika coba buka /
• Setelah login, user bisa akses halaman todo
• Logout menghapus token dan kembali ke login

🚀 Apa Selanjutnya?

Fitur berikutnya yang bisa kamu tambahkan:

• Auto redirect setelah login/register
• Halaman profil user
• Refresh token agar tidak login ulang tiap kali buka halaman

Sampai jumpa di seri artikel berikutnya ya! 😉

Ditulis oleh ruanginformatika.com