W poprzednich wpisach poznaliśmy React Query i zaawansowane wzorce pobierania danych. Ale każda prawdziwa aplikacja potrzebuje autentykacji (uwierzytelniania – weryfikacji tożsamości użytkownika) i autoryzacji (nadawania uprawnień – sprawdzania czy użytkownik ma dostęp do zasobu).

W tym wpisie zbudujemy kompletny system autentykacji od zera! Nauczymy się jak działają JWT tokens (tokeny JSON Web Token – zaszyfrowane dane użytkownika), jak zaimplementować login i rejestrację, gdzie przechowywać tokeny (localStorage vs cookies vs httpOnly), jak chronić protected routes (chronione ścieżki – strony dostępne tylko dla zalogowanych), jak działa refresh token mechanism (mechanizm odświeżania tokenów – automatyczne przedłużanie sesji), Axios interceptors (przechwytywacze żądań – automatyczne dodawanie tokenów do requestów) i wylogowanie.

To będzie bardzo praktyczny wpis z pełnym działającym kodem! Po nim będziesz potrafił zaimplementować bezpieczną autentykację w każdej aplikacji React.

Czym jest JWT?

JWT (JSON Web Token) to zakodowany string zawierający informacje o użytkowniku. Token składa się z trzech części oddzielonych kropkami:

header.payload.signature

Przykład tokenu:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEyMywibmFtZSI6IkphbiIsImV4cCI6MTY5MDAwMDAwMH0.abc123xyz

Części tokenu:

1. Header (nagłówek) – algorytm szyfrowania

{
  "alg": "HS256",
  "typ": "JWT"
}

2. Payload (dane) – informacje o użytkowniku

{
  "userId": 123,
  "email": "jan@example.com",
  "role": "admin",
  "exp": 1690000000  // Czas wygaśnięcia tokenu
}

3. Signature (podpis) – weryfikacja autentyczności

HMACSHA256(
  base64UrlEncode(header) + "." + base64UrlEncode(payload),
  secret
)

Jak to działa w praktyce?

1. Użytkownik loguje się → wysyła email + hasło
2. Serwer weryfikuje → sprawdza czy dane są poprawne
3. Serwer tworzy JWT → pakuje dane użytkownika w token
4. Zwraca token → frontend zapisuje token
5. Każdy request → frontend wysyła token w nagłówku Authorization: Bearer <token>
6. Serwer weryfikuje token → sprawdza podpis i czy nie wygasł
7. Zwraca dane → jeśli token OK, użytkownik dostaje dostęp

// Token:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEyMywibmFtZSI6IkphbiJ9.abc123

// Dekoduj w konsoli:
const payload = JSON.parse(atob("eyJ1c2VySWQiOjEyMywibmFtZSI6IkphbiJ9"));
console.log(payload);
// { userId: 123, name: "Jan" }

// Albo na https://jwt.io
// Wklej token → widać payload!

// ⚠️ WAŻNE:
// - JWT NIE jest tajny! Każdy może go zdekodować!
// - NIE przechowuj haseł, kart kredytowych w JWT!
// - PODPIS chroni przed MODYFIKACJĄ, nie przed ODCZYTANIEM!

Access Token vs Refresh Token

Access Token (krótki):
- Czas życia: 15 minut
- Używany: przy każdym request
- Przechowywany: pamięć / localStorage (mniej bezpieczne OK)
- Jeśli ukradną: szkoda tylko 15 min ✅

Refresh Token (długi):
- Czas życia: 7 dni
- Używany: tylko do odświeżenia Access Token
- Przechowywany: httpOnly cookie (bardzo bezpieczne!)
- Jeśli ukradną: trudniej, bo httpOnly

• Access Token – krótkotrwały (15 min), używany do każdego requesta
• Refresh Token – długotrwały (7 dni), używany do odświeżenia Access Token

Dlaczego dwa tokeny?

• Jeśli ktoś ukradnie Access Token, szkoda jest minimalna (wygasa za 15 min)
• Refresh Token jest przechowywany bezpieczniej (httpOnly cookie)
• Refresh Token pozwala użytkownikowi pozostać zalogowanym bez ciągłego logowania

Opcja 1: localStorage (NIE zalecane dla produkcji!)

// Scenariusz ataku:
// 1. Hacker wstrzykuje złośliwy skrypt na stronę


// 4. Hacker ma Twój token!
// 5. Może wysyłać requesty jako Ty! 💀

// ❌ Podatne na ataki XSS (Cross-Site Scripting)
localStorage.setItem('accessToken', token);
const token = localStorage.getItem('accessToken');

Wady:

• Dostępne dla JavaScript → podatne na XSS
• Jeśli hacker wstrzyknie złośliwy kod, może ukraść token
• Nie zalecane dla wrażliwych danych

Kiedy można użyć:

• Aplikacje demo/nauka
• Mniej wrażliwe dane
• Projekty wewnętrzne

Opcja 2: httpOnly cookies (ZALECANE!)

// Serwer ustawia cookie:
Set-Cookie: refreshToken=abc123; HttpOnly; Secure; SameSite=Strict

// W przeglądarce cookie ISTNIEJE, ale:
document.cookie  // ← NIE WIDAĆ refreshToken!

// Próba kradzieży:
const token = document.cookie;  // ← refreshToken NIEWIDOCZNY!

// Cookie jest automatycznie wysyłany przy każdym request:
fetch('/api/refresh')  // ← Cookie idzie automatycznie!
// Ale JavaScript nie może go odczytać = BEZPIECZNE! 🛡️

// ✅ Serwer ustawia cookie w odpowiedzi HTTP
Set-Cookie: refreshToken=abc123; HttpOnly; Secure; SameSite=Strict

Stwórzmy context do zarządzania autentykacją w całej aplikacji.

// contexts/AuthContext.tsx
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import { apiClient } from '../api/client';

interface User {
  id: number;
  email: string;
  name: string;
  role: string;
}

interface AuthContextType {
  user: User | null;
  accessToken: string | null;
  login: (email: string, password: string) => Promise<void>;
  register: (name: string, email: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
  isAuthenticated: boolean;
  isLoading: boolean;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [accessToken, setAccessToken] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // Sprawdź czy użytkownik jest zalogowany przy montowaniu
  useEffect(() => {
    checkAuth();
  }, []);

  async function checkAuth() {
    try {
      // Spróbuj odświeżyć token (używa refresh token z httpOnly cookie)
      const response = await apiClient.post('/auth/refresh');
      const { accessToken, user } = response.data;
      
      setAccessToken(accessToken);
      setUser(user);
    } catch (error) {
      // Brak ważnego refresh token - użytkownik niezalogowany
      setAccessToken(null);
      setUser(null);
    } finally {
      setIsLoading(false);
    }
  }

  async function login(email: string, password: string) {
    const response = await apiClient.post('/auth/login', { email, password });
    const { accessToken, user } = response.data;
    
    // refreshToken jest ustawiony automatycznie w httpOnly cookie przez serwer
    setAccessToken(accessToken);
    setUser(user);
  }

  async function register(name: string, email: string, password: string) {
    const response = await apiClient.post('/auth/register', { name, email, password });
    const { accessToken, user } = response.data;
    
    setAccessToken(accessToken);
    setUser(user);
  }

  async function logout() {
    try {
      // Wyloguj na serwerze (usuń refresh token)
      await apiClient.post('/auth/logout');
    } finally {
      // Wyczyść stan lokalny (nawet jeśli request się nie powiódł)
      setAccessToken(null);
      setUser(null);
    }
  }

  const value = {
    user,
    accessToken,
    login,
    register,
    logout,
    isAuthenticated: !!user,
    isLoading,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

// Hook do używania AuthContext
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

Setup w App

// main.tsx
import { AuthProvider } from './contexts/AuthContext';

ReactDOM.createRoot(document.getElementById('root')!).render(
            <React.StrictMode>
            <QueryClientProvider client={queryClient}>
            <AuthProvider>
            <App />
      </AuthProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

Interceptors (przechwytywacze) automatycznie modyfikują każdy request/response.

// Każdy request przechodzi przez interceptor:
fetch('/api/users')
  ↓
Request Interceptor
  ↓ Dodaje: Authorization: Bearer abc123
  ↓
Wysyłka do API

API zwraca 401 Unauthorized
  ↓
Response Interceptor
  ↓ Sprawdza: czy 401?
  ↓ Tak! Wywołuje /refresh
  ↓ Dostaje nowy token
  ↓ Ponawia oryginalny request
  ↓
Zwraca dane (użytkownik nie zauważył problemu!)

// api/client.ts
import axios from 'axios';

export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:5000/api',
  withCredentials: true, // Wysyłaj cookies (refresh token)
});

let accessToken: string | null = null;

// Funkcja do ustawiania tokenu (wywoływana z AuthContext)
export function setAccessToken(token: string | null) {
  accessToken = token;
}

// Request Interceptor - dodaj token do każdego requesta
apiClient.interceptors.request.use(
  (config) => {
    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Response Interceptor - obsługa błędów i refresh token
apiClient.interceptors.response.use(
  (response) => response, // Jeśli OK, zwróć response
  async (error) => {
    const originalRequest = error.config;

    // Jeśli 401 (Unauthorized) i to nie retry (powtórka)
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true; // Oznacz jako retry

      try {
        // Spróbuj odświeżyć token
        const response = await axios.post(
          `${apiClient.defaults.baseURL}/auth/refresh`,
          {},
          { withCredentials: true } // Wyślij refresh token z cookie
        );

        const newAccessToken = response.data.accessToken;
        setAccessToken(newAccessToken);

        // Ponów oryginalny request z nowym tokenem
        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
        return apiClient(originalRequest);
      } catch (refreshError) {
        // Refresh się nie powiódł - wyloguj użytkownika
        setAccessToken(null);
        window.location.href = '/login';
        return Promise.reject(refreshError);
      }
    }

    return Promise.reject(error);
  }
);

// Użytkownik: GET /api/users (Access Token wygasł!)

1. Request idzie do API
   ↓
2. API zwraca 401 Unauthorized (token wygasł)
   ↓
3. Response Interceptor łapie błąd
   ↓ Sprawdza: error.status === 401?
   ↓ Tak!
   ↓ Sprawdza: _retry flag?
   ↓ Nie ma → to pierwsze podejście
   ↓
4. Ustawia originalRequest._retry = true
   ↓
5. POST /auth/refresh (wysyła Refresh Token z cookie)
   ↓
6. Serwer zwraca nowy Access Token
   ↓
7. setAccessToken(newToken)
   ↓
8. Ponawia oryginalny request:
   apiClient(originalRequest) ← ale teraz z nowym tokenem!
   ↓
9. Tym razem 200 OK!
   ↓
10. Zwraca dane do użytkownika

// Użytkownik NIE ZAUWAŻYŁ że token wygasł! ✨
// Wszystko działa płynnie!

Co tu się dzieje?

1. Request interceptor – dodaje Authorization: Bearer <token> do każdego requesta
2. Response interceptor – gdy dostanie 401:
   • Próbuje odświeżyć token używając refresh token
   • Jeśli refresh OK → ponawia oryginalny request z nowym tokenem
   • Jeśli refresh fail → wylogowuje użytkownika

Połączenie z AuthContext

// contexts/AuthContext.tsx
import { setAccessToken } from '../api/client';

export function AuthProvider({ children }: { children: ReactNode }) {
  const [accessToken, setAccessTokenState] = useState(null);

  // Helper do ustawiania tokenu w obu miejscach
  function updateAccessToken(token: string | null) {
    setAccessTokenState(token);
    setAccessToken(token); // Ustaw też w Axios
  }

  async function login(email: string, password: string) {
    const response = await apiClient.post('/auth/login', { email, password });
    const { accessToken, user } = response.data;
    
    updateAccessToken(accessToken); // Używamy helper
    setUser(user);
  }

  async function logout() {
    try {
      await apiClient.post('/auth/logout');
    } finally {
      updateAccessToken(null);
      setUser(null);
    }
  }

  // ... reszta kodu
}

Login Form

// pages/LoginPage.tsx
import { useAuth } from '../contexts/AuthContext';
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';

function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

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

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    try {
      await login(email, password);
      navigate('/dashboard'); // Przekieruj po zalogowaniu
    } catch (err: any) {
      setError(err.response?.data?.message || 'Błąd logowania');
    } finally {
      setIsLoading(false);
    }
  }

  return (
            <div className="login-page">
            <div className="login-card">
            <h1>Logowanie</h1>

        {error && (
            <div className="error-message">
            {error}
          </div>
        )}

            <form onSubmit={handleSubmit}>
            <div className="form-group">
            <label htmlFor="email">Email</label>
            <input id="email"
                   type="email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
            />
          </div>

            <div className="form-group">
            <label htmlFor="password">Hasło</label>
            <input id="password"
                   type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
              required
              autoComplete="current-password"
            />
          </div>

            <button type="submit" disabled={isLoading}>
            {isLoading ? 'Logowanie...' : 'Zaloguj się'}
          </button>
        </form>

            <p className="signup-link">
          Nie masz konta? <Link to="/register">Zarejestruj się</Link>
        </p>
      </div>
    </div>
  );
}

export default LoginPage;

Register Form

// pages/RegisterPage.tsx (cd.)
            <div className="form-group">
            <label htmlFor="password">Hasło</label>
            <input id="password"
                   name="password"
                   type="password"
                   value={formData.password}
                   onChange={handleChange}
                   required
                   autoComplete="new-password"
                   minLength={6} />
          </div>

            <div className="form-group">
            <label htmlFor="confirmPassword">Potwierdź hasło</label>
            <input id="confirmPassword"
                   name="confirmPassword"
                   type="password"
                   value={formData.confirmPassword}
                   onChange={handleChange}
                   required
                   autoComplete="new-password" />
          </div>

            <button type="submit" disabled={isLoading}>
            {isLoading ? 'Rejestracja...' : 'Zarejestruj się'}
          </button>
        </form>

            <p className="login-link">
          Masz już konto? <Link to="/login">Zaloguj się</Link>
        </p>
    </div>
</div>
  );
}

export default RegisterPage;

ProtectedRoute Component

// Scenariusz 1: Użytkownik NIEZALOGOWANY
<ProtectedRoute>
        <Dashboard />
</ProtectedRoute>

1. isAuthenticated = false
2. ProtectedRoute: "Nie wolno!"
3. <Navigate to="/login" />
4. Użytkownik ląduje na /login

// Scenariusz 2: Użytkownik ZALOGOWANY
<ProtectedRoute>
        <Dashboard />
</ProtectedRoute>

1. isAuthenticated = true
2. ProtectedRoute: "OK, wejdź"
3. return <>{children}</>
4. Dashboard się renderuje! ✅

// Scenariusz 3: ADMIN route, ale USER
<ProtectedRoute requiredRole="admin">
        <AdminPanel />
</ProtectedRoute>

1. isAuthenticated = true
2. user.role = "user" (nie "admin")
3. ProtectedRoute: "Brak uprawnień!"
4. Pokazuje "Access Denied" 🚫

// components/ProtectedRoute.tsx
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

interface ProtectedRouteProps {
  children: React.ReactNode;
  requiredRole?: string; // Opcjonalnie: wymagana rola
}

function ProtectedRoute({ children, requiredRole }: ProtectedRouteProps) {
  const { isAuthenticated, isLoading, user } = useAuth();
  const location = useLocation();

  // Podczas ładowania pokaż loader
  if (isLoading) {
    return (
    <div className="loading-screen">
    <div className="spinner">Sprawdzanie autoryzacji...</div>
      </div>
    );
  }

  // Jeśli niezalogowany, przekieruj do login
  if (!isAuthenticated) {
    // Zapisz gdzie użytkownik chciał iść (dla przekierowania po loginie)
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  // Jeśli wymagana rola i użytkownik jej nie ma
  if (requiredRole && user?.role !== requiredRole) {
    return (
    <div className="access-denied">
    <h1>Brak dostępu</h1>
    <p>Nie masz uprawnień do tej strony.</p>
      </div>
    );
  }

  // Wszystko OK - pokaż chronioną stronę
  return <>{children}</>;
}

export default ProtectedRoute;

// Użytkownik próbuje wejść na /profile
→ Niezalogowany → redirect /login
→ Loguje się
→ Przekierowanie do... /dashboard (domyślnie)
// Ale chciał na /profile! 😕

// Użytkownik próbuje wejść na /profile
→ Niezalogowany → 
→ Loguje się
→ LoginPage czyta: location.state?.from?.pathname
→ navigate(from) → ląduje na /profile! ✅
// Dokładnie tam gdzie chciał!

Użycie w routingu

// App.tsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './contexts/AuthContext';
import ProtectedRoute from './components/ProtectedRoute';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import Dashboard from './pages/Dashboard';
import AdminPanel from './pages/AdminPanel';
import ProfilePage from './pages/ProfilePage';

function App() {
  const { isAuthenticated } = useAuth();

  return (
    <BrowserRouter>
    <Routes>
        {/* Publiczne routes */}
    <Route path="/login"
           element={
           isAuthenticated ? <Navigate to="/dashboard" /> : <LoginPage />
          }
        />
        <Route
          path="/register"
          element={
            isAuthenticated ? <Navigate to="/dashboard" /> : <RegisterPage />
          }
        />

        {/* Chronione routes */}
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          }
        />

        <Route
          path="/profile"
          element={
            <ProtectedRoute>
              <ProfilePage />
            </ProtectedRoute>
          }
        />

        {/* Route tylko dla admina */}
        <Route
          path="/admin"
          element={
            <ProtectedRoute requiredRole="admin">
              <AdminPanel />
            </ProtectedRoute>
          }
        />

        {/* Domyślne przekierowanie */}
        <Route
          path="/"
          element={
            <Navigate to={isAuthenticated ? "/dashboard" : "/login"} />
          }
        />

        {/* 404 */}
        <Route path="*" element={<div>Strona nie znaleziona</div>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Zapisz gdzie użytkownik chciał iść przed logowaniem i przekieruj tam po zalogowaniu.

// Scenariusz bez przekierowania (ZŁY UX):
1. Użytkownik klika link do /profile
2. Nie zalogowany → /login
3. Loguje się
4. Ląduje na /dashboard
5. "Gdzie mój profil?" 😕
6. Musi ręcznie przejść do /profile

// Scenariusz z przekierowaniem (DOBRY UX):
1. Użytkownik klika link do /profile
2. Nie zalogowany → /login (z state: { from: '/profile' })
3. Loguje się
4. Automatycznie ląduje na /profile! ✅
5. "Wow, to działa!" 🎉

// pages/LoginPage.tsx (poprawiona wersja)
import { useLocation } from 'react-router-dom';

function LoginPage() {
  const navigate = useNavigate();
  const location = useLocation();
  
  // Pobierz gdzie użytkownik chciał iść (z state przekierowania)
  const from = location.state?.from?.pathname || '/dashboard';

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setIsLoading(true);

    try {
      await login(email, password);
      navigate(from, { replace: true }); // Przekieruj gdzie chciał iść
    } catch (err: any) {
      setError(err.response?.data?.message || 'Błąd logowania');
    } finally {
      setIsLoading(false);
    }
  }

  // ... reszta kodu
}

Scenariusz:

1. Użytkownik próbuje wejść na /profile
2. Nie jest zalogowany → przekierowanie do /login z state: { from: '/profile' }
3. Loguje się
4. Automatyczne przekierowanie do /profile (tam gdzie chciał!)

// components/Navbar.tsx
import { Link } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

function Navbar() {
  const { user, isAuthenticated, logout } = useAuth();

  async function handleLogout() {
    try {
      await logout();
    } catch (error) {
      console.error('Błąd wylogowania:', error);
    }
  }

  return (
    <nav className="navbar">
    <div className="navbar-brand">
    <Link to="/">MyApp</Link>
      </div>

    <div className="navbar-menu">
        {isAuthenticated ? (
          <>
    <Link to="/dashboard">Dashboard</Link>
    <Link to="/profile">Profil</Link>
            
            {/* Pokaż tylko adminowi */}
            {user?.role === 'admin' && (
    <Link to="/admin">Panel admina</Link>
            )}

    <div className="user-info">
    <img src={user?.avatar} alt={user?.name} />
    <span>{user?.name}</span>
            </div>

    <button onClick={handleLogout}>Wyloguj</button>
          </>
        ) : (
          <>
    <Link to="/login">Zaloguj się</Link>
    <Link to="/register">Zarejestruj się</Link>
          </>
        )}
      </div>
    </nav>
  );
}

export default Navbar;

Hook do sprawdzania uprawnień

// ❌ Duplikacja logiki
{user?.role === 'admin' && }
{user?.role === 'admin' && }
{user?.role === 'admin' || user?.role === 'moderator' && ...}

// ✅ Jeden hook, czytelna logika
const { isAdmin, isModerator, hasPermission } = usePermissions();

{isAdmin && }
{(isAdmin || isModerator) && }
{hasPermission('users.edit') && }

// hooks/usePermissions.ts
import { useAuth } from '../contexts/AuthContext';

export function usePermissions() {
  const { user } = useAuth();

  function hasRole(role: string): boolean {
    return user?.role === role;
  }

  function hasAnyRole(roles: string[]): boolean {
    return roles.some(role => user?.role === role);
  }

  function hasPermission(permission: string): boolean {
    // Jeśli backend wysyła listę permissions w user
    return user?.permissions?.includes(permission) || false;
  }

  return {
    hasRole,
    hasAnyRole,
    hasPermission,
    isAdmin: user?.role === 'admin',
    isModerator: user?.role === 'moderator',
    isUser: user?.role === 'user',
  };
}

Conditional rendering based on role

function Dashboard() {
  const { isAdmin, isModerator, isUser } = usePermissions();

  return (
        <div>
        <h1>Dashboard</h1>

      {/* Wszyscy widzą */}
        <section>
        <h2>Twoje statystyki</h2>
        <StatsWidget />
      </section>

      {/* Tylko moderatorzy i admini */}
      {(isModerator || isAdmin) && (
        <section>
        <h2>Zgłoszenia użytkowników</h2>
        <ReportsPanel />
        </section>
      )}

      {/* Tylko admini */}
      {isAdmin && (
        <section>
        <h2>Panel administracyjny</h2>
        <AdminControls />
        <button onClick={handleDeleteAllUsers}>
            Usuń wszystkich użytkowników
          </button>
        </section>
      )}

      {/* Tylko zwykli użytkownicy (nie admini) */}
      {isUser && !isAdmin && (
        <section>
        <h2>Reklamy</h2>
        <AdsPanel />
        </section>
      )}
    </div>
  );
}

// components/AdminButton.tsx
import { usePermissions } from '../hooks/usePermissions';

function Dashboard() {
  const { isAdmin, hasPermission } = usePermissions();

  return (
    <div>
    <h1>Dashboard</h1>

      {/* Pokaż tylko adminowi */}
      {isAdmin && (
    <button onClick={handleDeleteAllUsers}>
          Usuń wszystkich użytkowników
        </button>
      )}

      {/* Pokaż gdy ma permission */}
      {hasPermission('users.edit') && (
    <button onClick={handleEditUser}>
          Edytuj użytkownika
        </button>
      )}

      {/* Pokaż wszystkim */}
    <button onClick={handleSave}>Zapisz</button>
    </div>
  );
}

1. HTTPS only

// ✅ Zawsze używaj HTTPS w produkcji
const apiClient = axios.create({
  baseURL: 'https://api.example.com', // HTTPS!
  withCredentials: true,
});

2. HttpOnly cookies dla refresh token

// ✅ Serwer ustawia httpOnly
Response.Cookies.Append("refreshToken", token, new CookieOptions
{
    HttpOnly = true,      // JavaScript nie ma dostępu
    Secure = true,        // Tylko przez HTTPS
    SameSite = SameSiteMode.Strict, // Ochrona przed CSRF
    Expires = DateTimeOffset.UtcNow.AddDays(7)
});

3. Access token w memory, NIE w localStorage

// ✅ Token w pamięci (zmiennej)
let accessToken: string | null = null;

// ❌ NIE robić tego w produkcji
localStorage.setItem('accessToken', token);

4. Krótki czas życia access token

// ✅ Access token wygasa szybko (15 min)
var accessToken = new JwtSecurityToken(
    expires: DateTime.UtcNow.AddMinutes(15),
    // ...
);

// Refresh token żyje dłużej (7 dni)
var refreshToken = GenerateRefreshToken(user, expiresInDays: 7);

5. Token rotation

// ✅ Nowy refresh token przy każdym odświeżeniu
[HttpPost("refresh")]
public async Task RefreshToken()
{
    var oldRefreshToken = Request.Cookies["refreshToken"];
    
    // Invalidate stary token
    await _authService.RevokeRefreshToken(oldRefreshToken);
    
    // Wygeneruj NOWY refresh token
    var newRefreshToken = _authService.GenerateRefreshToken(user);
    
    Response.Cookies.Append("refreshToken", newRefreshToken, ...);
    
    return Ok(new { accessToken = newAccessToken });
}

🏁 START - użytkownik otwiera aplikację

1. AuthProvider montuje się
   → useEffect wywołuje checkAuth()
   → POST /auth/refresh (próba odświeżenia)
   
   Scenariusz A: Ma ważny Refresh Token
   → Serwer: zwraca Access Token + user
   → setState: accessToken, user
   → Użytkownik ZALOGOWANY! ✅
   
   Scenariusz B: Brak/nieważny Refresh Token
   → Serwer: 401
   → setState: null, null
   → Użytkownik NIEZALOGOWANY ❌

2. Routing sprawdza isAuthenticated
   → Zalogowany? → /dashboard
   → Niezalogowany? → /login

3. Użytkownik loguje się
   → POST /auth/login { email, password }
   → Serwer: Access Token + Refresh Token (cookie)
   → setState: accessToken, user
   → navigate('/dashboard')

4. Użytkownik klika "Pokaż zamówienia"
   → GET /api/orders
   → Interceptor: dodaje "Authorization: Bearer ..."
   → Serwer: 200 OK + dane
   → Pokazuje zamówienia

5. 15 minut później... Access Token wygasł
   → GET /api/orders
   → Serwer: 401 Unauthorized
   → Response Interceptor:
      → POST /auth/refresh (Refresh Token w cookie)
      → Serwer: nowy Access Token
      → Ponawia GET /api/orders
      → 200 OK + dane
   → Użytkownik NIC nie zauważył! ✨

6. Użytkownik klika "Wyloguj"
   → POST /auth/logout
   → Serwer: usuwa Refresh Token
   → setState: null, null
   → navigate('/login')

🏁 KONIEC

1. Użytkownik otwiera aplikację

// AuthProvider sprawdza czy jest zalogowany
useEffect(() => {
  checkAuth(); // Próbuje odświeżyć token
}, []);

2. Login

Frontend: POST /auth/login { email, password }
Backend: 
  - Weryfikuje dane
  - Generuje accessToken (15 min)
  - Generuje refreshToken (7 dni)
  - Ustawia refreshToken w httpOnly cookie
  - Zwraca { accessToken, user }
Frontend: 
  - Zapisuje accessToken w memory
  - Zapisuje user w state
  - Przekierowuje do /dashboard

3. Request do chronionego endpoint

Frontend: GET /api/orders
Axios interceptor: Dodaje header "Authorization: Bearer "
Backend: Weryfikuje token, zwraca dane
Frontend: Wyświetla dane

4. Access token wygasa (po 15 min)

Frontend: GET /api/orders
Backend: 401 Unauthorized (token wygasł)
Axios interceptor:
  - Przechwytuje 401
  - POST /auth/refresh (z refreshToken w cookie)
  Backend:
    - Sprawdza refreshToken
    - Generuje nowy accessToken
    - (Opcjonalnie) Nowy refreshToken
    - Zwraca { accessToken }
  - Zapisuje nowy accessToken
  - Ponawia oryginalny request GET /api/orders
Backend: Zwraca dane
Frontend: Wyświetla dane (użytkownik NIC nie zauważył!)

5. Wylogowanie

Frontend: POST /auth/logout
Backend: 
  - Invalidate refreshToken
  - Usuwa cookie
Frontend:
  - Czyści accessToken (null)
  - Czyści user (null)
  - Przekierowuje do /login

Zbudowaliśmy kompletny system autentykacji! Nauczyliśmy się:

• ✅ JWT Tokens – jak działają, access vs refresh
• ✅ Przechowywanie tokenów – memory + httpOnly cookies (hybrid)
• ✅ AuthContext – zarządzanie stanem autentykacji
• ✅ Axios Interceptors – automatyczne dodawanie tokenów
• ✅ Login i Rejestracja – formularze z walidacją
• ✅ Protected Routes – ochrona stron przed niezalogowanymi
• ✅ Role-based access – różne uprawnienia dla ról
• ✅ Refresh Token Mechanism – automatyczne odświeżanie
• ✅ Security best practices – 5 zasad bezpieczeństwa
• ✅ Kompletny flow – cały proces krok po kroku

Twoja aplikacja jest teraz bezpieczna! Użytkownicy mogą się logować, pozostawać zalogowani, a tokeny są automatycznie odświeżane w tle.

W kolejnym wpisie (ostatnim w serii!) zbudujemy kompletną Full Stack aplikację łączącą wszystko czego się nauczyliśmy – React + TypeScript frontend z .NET Core API backend, CRUD operations, autentykacja, React Query, deployed na żywo!

Zadanie dla Ciebie

Zaimplementuj autentykację w swojej aplikacji:

1. Stwórz AuthContext z login/register/logout
2. Dodaj Axios interceptors z automatycznym refresh
3. Zbuduj strony Login i Register z walidacją
4. Dodaj ProtectedRoute dla chronionych stron
5. Zaimplementuj navbar z informacją o użytkowniku
6. (Bonus) Dodaj role-based access control
7. (Bonus) Zaimplementuj idle timer (session timeout)