React Uygulamalarında Token Tabanlı Kimlik Doğrulama Kurulumu

React uygulamanıza kullanıcı girişi (login authentication) ekleyerek özel sayfaları koruyabilir, kullanıcı oturumlarını kalıcı hale getirebilirsiniz.
Bu rehberde, sessionStorage ve localStorage kullanarak token tabanlı kimlik doğrulama sistemini adım adım öğreneceksiniz.

---

📘 Bu Rehberde Ne Öğreneceksiniz

Bu kılavuzda React projenize token tabanlı giriş doğrulaması eklemeyi öğreneceksiniz.
Kullanıcı giriş yapmadığında sayfa yönlendirmesi olmadan giriş arayüzünü gösterecek, oturumu tarayıcı verisiyle koruyacaksınız.

---

⚙️ Ön Gereksinimler

• Node.js ve npm kurulu olmalı
• create-react-app ile oluşturulmuş boş bir React projesi
• Temel düzeyde JavaScript, HTML ve CSS bilgisi
• React’te form yönetimi ve API çağrısı temelleri

---

1️⃣ Giriş Sayfası Bileşenlerini Kurma

A. React Router Yükleme

npm install react-router-dom

Bu komut, tarayıcı yönlendirmeleri için gerekli react-router-dom kütüphanesini kurar.

B. Dashboard ve Preferences Oluşturma

mkdir src/components/Dashboard
mkdir src/components/Preferences

Dashboard.js

import React from 'react';
export default function Dashboard() {
  return <h2>Yönetim Paneli</h2>;
}

Preferences.js

import React from 'react';
export default function Preferences() {
  return <h2>Ayarlar</h2>;
}

Bu iki bileşen giriş yapılmadan erişilemeyecek özel sayfalardır.

C. App.js İçinde Rotaları Tanımlama

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Dashboard from '../Dashboard/Dashboard';
import Preferences from '../Preferences/Preferences';
import './App.css';

function App() {
  return (
    <div className="uygulama-sarmalayici">
      <h1>Rabisu Uygulaması</h1>
      <BrowserRouter>
        <Switch>
          <Route path="/dashboard" component={Dashboard}/>
          <Route path="/preferences" component={Preferences}/>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

---

2️⃣ Giriş (Login) Bileşeni ve Token Kontrolü

Login.js

import React from 'react';
import './Login.css';

export default function Login({ setToken }) {
  return (
    <div className="login-wrapper">
      <h1>Lütfen Giriş Yapın</h1>
      <form>
        <label>
          <p>Kullanıcı Adı</p>
          <input type="text" />
        </label>
        <label>
          <p>Şifre</p>
          <input type="password" />
        </label>
        <div><button type="submit">Giriş Yap</button></div>
      </form>
    </div>
  );
}

Login.css

.login-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Form sayfayı ortalar, minimalist bir görünüm sağlar.

---

3️⃣ Token Sağlayan Sahte API (Node.js / Express)

Sunucu kurulumu:

npm install --save-dev express cors

server.js

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

app.post('/login', (req, res) => {
  res.send({ token: 'rabisu-guvenli-token-12345' });
});

app.listen(8080, () =>
  console.log('API çalışıyor: http://localhost:8080/login')
);

Bu API, kullanıcıdan gelen POST isteğine test token’ı döner.

---

4️⃣ API’yi Login Sayfasına Bağlama

async function loginUser(credentials) {
  return fetch('http://localhost:8080/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(credentials)
  }).then(res => res.json());
}

const handleSubmit = async (e) => {
  e.preventDefault();
  const token = await loginUser({ username, password });
  setToken(token);
};

Bu fonksiyonlar form verisini API’ye gönderir ve dönen token’ı saklar.

---

5️⃣ Token Kalıcılığı – useToken Hook

useToken.js

import { useState } from 'react';

export default function useToken() {
  const getToken = () => {
    const tokenString = sessionStorage.getItem('token');
    const userToken = JSON.parse(tokenString);
    return userToken?.token;
  };

  const [token, setToken] = useState(getToken());

  const saveToken = (userToken) => {
    sessionStorage.setItem('token', JSON.stringify(userToken));
    setToken(userToken.token);
  };

  return { token, setToken: saveToken };
}

Bu özel Hook, token’ı saklar ve React state ile senkron tutar.

sessionStorage yerine localStorage kullanırsan oturum tarayıcı kapansa bile kalır.

---

🙋‍♀️ Sıkça Sorulan Sorular (SSS)

1. sessionStorage ile localStorage farkı nedir?

SessionStorage sekme bazlıdır; localStorage kalıcıdır ve sekmeler arası paylaşılır.

2. Neden HTTP-Only Cookie daha güvenli?

Çünkü JavaScript erişemez; XSS saldırılarına karşı koruma sağlar.

3. React Router v6 kullanıyorsam ne değişir?

Switch yerine Routes, component yerine element prop’u kullanılır.

4. Token süresi dolarsa ne olur?

API istekleri hata verir; kullanıcı yeniden giriş yapmalıdır.

5. Bu sistem güvenli mi?

Eğitim ve demo amaçlıdır. Üretim ortamında HTTP-Only cookie veya JWT ile sunucu tarafı kontrol önerilir.

---

🎯 Sonuç

Artık React uygulamana token tabanlı kimlik doğrulaması eklemeyi biliyorsun. Giriş yapılmadığında kullanıcıya login arayüzü gösterip, token saklama stratejilerini yönetebiliyorsun.

💡 Rabisu Bulut altyapısında bu yapıyı dakikalar içinde test edebilir, React projeni anında yayına alabilirsin.