React Uygulamalar\u0131na Giri\u015f Kimlik Do\u011frulamas\u0131 Nas\u0131l Eklenir?<\/title><br \/>\n<body><\/p>\n<p>Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 olan kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (authentication), verilerinizi ve kullan\u0131c\u0131 deneyimini g\u00fcvence alt\u0131na alman\u0131n temelidir. React uygulamalar\u0131n\u0131zda g\u00fcvenli bir giri\u015f sistemi kurmak, hassas bilgileri koruman\u0131n ve ki\u015fiselle\u015ftirilmi\u015f hizmetler sunman\u0131n ilk ad\u0131m\u0131d\u0131r. Bu kapsaml\u0131 rehberde, React projelerinize ad\u0131m ad\u0131m nas\u0131l g\u00fcvenli ve etkili bir kimlik do\u011frulama mekanizmas\u0131 ekleyece\u011finizi ke\u015ffedeceksiniz.<\/p>\n<h2>Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?<\/h2>\n<p>React uygulamalar\u0131n\u0131za bir giri\u015f sistemi entegre etmeden \u00f6nce, kimlik do\u011frulama (authentication) ve yetkilendirme (authorization) aras\u0131ndaki temel fark\u0131 anlamak kritik \u00f6neme sahiptir. Kimlik do\u011frulama, “Sen kimsin?” sorusuna yan\u0131t verir; yani bir kullan\u0131c\u0131n\u0131n iddia etti\u011fi ki\u015fi olup olmad\u0131\u011f\u0131n\u0131 do\u011frular. Bu genellikle kullan\u0131c\u0131 ad\u0131 ve parola gibi bilgilerle yap\u0131l\u0131r. Yetkilendirme ise, “Neye eri\u015febilirsin?” sorusunu yan\u0131tlar; yani kimli\u011fi do\u011frulanm\u0131\u015f bir kullan\u0131c\u0131n\u0131n belirli bir kayna\u011fa veya i\u015fleme eri\u015fim izni olup olmad\u0131\u011f\u0131n\u0131 belirler. \u00d6rne\u011fin, bir y\u00f6netici kullan\u0131c\u0131s\u0131 bir veritaban\u0131ndaki t\u00fcm verileri g\u00f6rebilirken, s\u0131radan bir kullan\u0131c\u0131 sadece kendi profiline eri\u015febilir.<\/p>\n<p>Bu iki kavram\u0131 birbirinden ay\u0131rmak, uygulaman\u0131z\u0131n g\u00fcvenlik mimarisini do\u011fru bir \u015fekilde tasarlaman\u0131z i\u00e7in elzemdir. Yanl\u0131\u015f yap\u0131land\u0131r\u0131lm\u0131\u015f bir sistem, yetkisiz eri\u015fime veya veri s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7abilir. Genellikle, kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 ba\u015far\u0131l\u0131 oldu\u011funda, sunucu kullan\u0131c\u0131ya bir belirte\u00e7 (token) veya oturum (session) bilgisi g\u00f6nderir. Bu belirte\u00e7, kullan\u0131c\u0131n\u0131n sonraki isteklerinde kimli\u011fini do\u011frulamak ve yetkilendirme kararlar\u0131 almak i\u00e7in kullan\u0131l\u0131r. G\u00fcn\u00fcm\u00fczde en yayg\u0131n kullan\u0131lan belirte\u00e7 formatlar\u0131ndan biri JSON Web Token (JWT)’d\u0131r. JWT’ler, kullan\u0131c\u0131n\u0131n kimlik bilgilerini ve yetkilerini g\u00fcvenli bir \u015fekilde depolayan, dijital olarak imzalanm\u0131\u015f JSON nesneleridir. Sunucu, bu belirteci imzalayarak b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc garanti ederken, istemci (React uygulamam\u0131z) bu belirteci her API iste\u011fiyle birlikte g\u00f6nderir.<\/p>\n<p>Oturum y\u00f6netimi ise, sunucu taraf\u0131nda kullan\u0131c\u0131 oturum bilgilerini tutma prensibine dayan\u0131r. Kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, sunucu bir oturum kimli\u011fi (session ID) olu\u015fturur ve bunu \u00e7erez (cookie) olarak istemciye g\u00f6nderir. \u0130stemci, sonraki isteklerinde bu \u00e7erezi sunucuya geri g\u00f6nderir ve sunucu bu kimli\u011fi kullanarak kullan\u0131c\u0131n\u0131n oturumunu tan\u0131r. Ancak, da\u011f\u0131t\u0131k sistemlerde veya API tabanl\u0131 uygulamalarda JWT gibi belirte\u00e7 tabanl\u0131 yakla\u015f\u0131mlar daha esnek ve \u00f6l\u00e7eklenebilir olabilir. React uygulamalar\u0131nda genellikle JWT veya OAuth\/OpenID Connect gibi standartlar tercih edilir \u00e7\u00fcnk\u00fc bunlar sunucu taraf\u0131nda oturum durumu tutma ihtiyac\u0131n\u0131 azalt\u0131r ve mobil uygulamalarla veya di\u011fer istemcilerle daha kolay entegrasyon sa\u011flar.<\/p>\n<p>G\u00fcvenli bir kimlik do\u011frulama sistemi kurmak sadece teknik bir zorunluluk de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 g\u00fcvenini kazanman\u0131n ve yasal d\u00fczenlemelere (\u00f6rne\u011fin GDPR, KVKK) uyum sa\u011flaman\u0131n da bir par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131 verilerinin korunmas\u0131, modern yaz\u0131l\u0131m geli\u015ftirmenin en temel prensiplerinden biridir. Bu nedenle, kimlik do\u011frulama ve yetkilendirme mekanizmalar\u0131n\u0131z\u0131 tasarlarken en iyi g\u00fcvenlik uygulamalar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z, olas\u0131 g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 minimize etmeniz gerekmektedir. \u015eimdi, bu temel bilgilerin \u0131\u015f\u0131\u011f\u0131nda React uygulamalar\u0131nda kimlik do\u011frulama mimarilerine bir g\u00f6z atal\u0131m.<\/p>\n<h2>React Uygulamalar\u0131nda Kimlik Do\u011frulama Mimarileri Nelerdir?<\/h2>\n<p>React, tek sayfa uygulama (SPA) mimarisinin pop\u00fcler bir temsilcisi oldu\u011fundan, kimlik do\u011frulama s\u00fcrecini y\u00f6netmek geleneksel sunucu tabanl\u0131 uygulamalardan biraz farkl\u0131l\u0131k g\u00f6sterir. React uygulamalar\u0131nda kimlik do\u011frulama, genellikle bir arka u\u00e7 (backend) API’si ile etkile\u015fim kurularak ger\u00e7ekle\u015ftirilir. Bu etkile\u015fimde, kullan\u0131c\u0131 bilgileri genellikle bir JWT (JSON Web Token) \u015feklinde istemci taraf\u0131nda depolan\u0131r ve her korumal\u0131 API iste\u011fiyle birlikte sunucuya g\u00f6nderilir. Peki, React uygulamalar\u0131nda bu s\u00fcreci y\u00f6netmek i\u00e7in hangi mimarileri ve yakla\u015f\u0131mlar\u0131 kullanabiliriz?<\/p>\n<p>En yayg\u0131n yakla\u015f\u0131m, React uygulamas\u0131n\u0131n bir API ile ileti\u015fim kurdu\u011fu ve bu API’nin kimlik do\u011frulama ve yetkilendirme i\u015flemlerini y\u00f6netti\u011fi bir “SPA + API” modelidir. Bu modelde, React uygulamas\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) olu\u015fturur ve kullan\u0131c\u0131 giri\u015fini y\u00f6netir. Kullan\u0131c\u0131 kimlik bilgilerini (kullan\u0131c\u0131 ad\u0131, parola) bir HTTP POST iste\u011fi ile arka u\u00e7 API’sine g\u00f6nderir. API, bu bilgileri do\u011frulad\u0131ktan sonra, genellikle bir JWT i\u00e7eren bir yan\u0131t d\u00f6nd\u00fcr\u00fcr. Bu JWT, React uygulamas\u0131 taraf\u0131ndan al\u0131n\u0131r ve genellikle taray\u0131c\u0131n\u0131n yerel depolama alan\u0131nda (localStorage) veya daha g\u00fcvenli bir \u015fekilde HTTP Only \u00e7erezlerinde saklan\u0131r. Sonraki her korumal\u0131 istekte, bu token iste\u011fin ba\u015fl\u0131k k\u0131sm\u0131na (Authorization header) eklenerek sunucuya g\u00f6nderilir. Sunucu, gelen token’\u0131 do\u011frulayarak kullan\u0131c\u0131n\u0131n kimli\u011fini ve yetkilerini kontrol eder.<\/p>\n<p>Bu mimariyi React i\u00e7inde uygulaman\u0131n farkl\u0131 yollar\u0131 vard\u0131r. Birincisi, React’\u0131n Context API’sini kullanarak global bir kimlik do\u011frulama durumu olu\u015fturmakt\u0131r. Bu yakla\u015f\u0131m, uygulaman\u0131z\u0131n farkl\u0131 bile\u015fenlerinin kullan\u0131c\u0131 oturum durumuna kolayca eri\u015fmesini sa\u011flar. \u00d6rne\u011fin, bir <code>AuthContext<\/code> olu\u015fturarak kullan\u0131c\u0131 giri\u015f durumunu (<code>isAuthenticated<\/code>), kullan\u0131c\u0131 bilgilerini (<code>user<\/code>) ve giri\u015f\/\u00e7\u0131k\u0131\u015f fonksiyonlar\u0131n\u0131 sa\u011flayabilirsiniz. Bu sayede, uygulaman\u0131n herhangi bir yerinden <code>useContext<\/code> hook’unu kullanarak bu bilgilere eri\u015febilir ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc buna g\u00f6re g\u00fcncelleyebilirsiniz. Redux veya Recoil gibi durum y\u00f6netim k\u00fct\u00fcphaneleri de benzer \u015fekilde global kimlik do\u011frulama durumunu y\u00f6netmek i\u00e7in kullan\u0131labilir ve daha b\u00fcy\u00fck uygulamalarda daha \u00f6l\u00e7eklenebilir \u00e7\u00f6z\u00fcmler sunabilir.<\/p>\n<p>Di\u011fer bir mimari ise, Auth0, Firebase Authentication veya AWS Cognito gibi \u00fc\u00e7\u00fcnc\u00fc taraf kimlik do\u011frulama hizmetlerini kullanmakt\u0131r. Bu hizmetler, kimlik do\u011frulama s\u00fcrecinin karma\u015f\u0131k y\u00f6nlerini (kullan\u0131c\u0131 kayd\u0131, parola s\u0131f\u0131rlama, \u00e7ok fakt\u00f6rl\u00fc kimlik do\u011frulama vb.) sizin i\u00e7in y\u00f6netir. Bu servisler genellikle SDK’lar veya API’ler arac\u0131l\u0131\u011f\u0131yla React uygulamalar\u0131na kolayca entegre edilebilir. \u00dc\u00e7\u00fcnc\u00fc taraf hizmetler kullanmak, geli\u015ftirme s\u00fcresini k\u0131salt\u0131r ve g\u00fcvenlik endi\u015felerini profesyonel sa\u011flay\u0131c\u0131lara devretmenizi sa\u011flar, ancak bu da uygulaman\u0131z\u0131 belirli bir sa\u011flay\u0131c\u0131ya ba\u011f\u0131ml\u0131 hale getirebilir. \u00d6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projeler i\u00e7in h\u0131zl\u0131 ve g\u00fcvenli bir ba\u015flang\u0131\u00e7 noktas\u0131 sunarlar. Hangi mimariyi se\u00e7erseniz se\u00e7in, kullan\u0131c\u0131 deneyimi, g\u00fcvenlik ve \u00f6l\u00e7eklenebilirlik fakt\u00f6rlerini dikkatlice de\u011ferlendirmeniz gerekmektedir. \u015eimdi gelin, JWT tabanl\u0131 bir kimlik do\u011frulama sistemini ad\u0131m ad\u0131m nas\u0131l kuraca\u011f\u0131m\u0131za bakal\u0131m.<\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: Mimari se\u00e7iminizi yaparken uygulaman\u0131z\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fcn\u00fc, g\u00fcvenlik gereksinimlerini ve geli\u015ftirme ekibinizin deneyimini g\u00f6z \u00f6n\u00fcnde bulundurun. Basit bir proje i\u00e7in Context API yeterli olabilirken, karma\u015f\u0131k bir kurumsal uygulama i\u00e7in Redux veya \u00fc\u00e7\u00fcnc\u00fc taraf bir \u00e7\u00f6z\u00fcm daha uygun olabilir.\n<\/div>\n<h2>Ad\u0131m Ad\u0131m Uygulama: JWT Tabanl\u0131 Kimlik Do\u011frulama Nas\u0131l Kurulur?<\/h2>\n<p>React uygulaman\u0131za JWT tabanl\u0131 bir kimlik do\u011frulama sistemi entegre etmek, genellikle birka\u00e7 ana ad\u0131mdan olu\u015fur: bir arka u\u00e7 API’si haz\u0131rlamak, React uygulamas\u0131n\u0131 kurmak, giri\u015f formunu olu\u015fturmak ve son olarak kullan\u0131c\u0131 durumunu y\u00f6netmek ve korumal\u0131 rotalar\u0131 yap\u0131land\u0131rmak. Bu b\u00f6l\u00fcmde, bu ad\u0131mlar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz ve her ad\u0131m i\u00e7in gerekli kod \u00f6rneklerini sunaca\u011f\u0131z.<\/p>\n<h3>Backend Haz\u0131rl\u0131\u011f\u0131: API Kimlik Do\u011frulama U\u00e7 Noktalar\u0131<\/h3>\n<p>React uygulamam\u0131z\u0131n kimlik do\u011frulama yapabilmesi i\u00e7in bir arka u\u00e7 API’sine ihtiyac\u0131 vard\u0131r. Bu API, kullan\u0131c\u0131 kay\u0131t (register) ve giri\u015f (login) i\u015flemlerini y\u00f6netecek, parolalar\u0131 g\u00fcvenli bir \u015fekilde saklayacak ve ba\u015far\u0131l\u0131 giri\u015flerde JWT \u00fcretecektir. Basit bir Node.js (Express.js) tabanl\u0131 backend \u00f6rne\u011fi \u00fczerinden konsepti a\u00e7\u0131klayal\u0131m. Bu \u00f6rnekte, kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda bir JWT d\u00f6necek ve bu token, React uygulamam\u0131z taraf\u0131ndan kullan\u0131lacakt\u0131r. Arka u\u00e7 taraf\u0131nda, kullan\u0131c\u0131 parolalar\u0131n\u0131n hashlenerek sakland\u0131\u011f\u0131ndan ve JWT’lerin do\u011fru bir \u015fekilde imzaland\u0131\u011f\u0131ndan emin olmal\u0131y\u0131z.<\/p>\n<pre><code>\n\/\/ Basit bir Express.js backend \u00f6rne\u011fi (konsept ama\u00e7l\u0131)\nconst express = require('express');\nconst jwt = require('jsonwebtoken');\nconst bcrypt = require('bcryptjs');\nconst cors = require('cors');\n\nconst app = express();\napp.use(express.json());\napp.use(cors()); \/\/ React uygulamam\u0131z\u0131n farkl\u0131 bir porttan istek atabilmesi i\u00e7in\n\nconst users = []; \/\/ Ger\u00e7ek uygulamada bu bir veritaban\u0131 olmal\u0131\nconst JWT_SECRET = 'cok_gizli_anahtar'; \/\/ Ger\u00e7ek uygulamada ortam de\u011fi\u015fkeni olmal\u0131\n\n\/\/ Kay\u0131t u\u00e7 noktas\u0131\napp.post('\/api\/register', async (req, res) => {\n const { username, password } = req.body;\n const hashedPassword = await bcrypt.hash(password, 10);\n users.push({ username, password: hashedPassword });\n res.status(201).send('Kullan\u0131c\u0131 ba\u015far\u0131yla kaydedildi.');\n});\n\n\/\/ Giri\u015f u\u00e7 noktas\u0131\napp.post('\/api\/login', async (req, res) => {\n const { username, password } = req.body;\n const user = users.find(u => u.username === username);\n if (!user) {\n return res.status(400).send('Kullan\u0131c\u0131 ad\u0131 veya parola hatal\u0131.');\n }\n\n const isMatch = await bcrypt.compare(password, user.password);\n if (!isMatch) {\n return res.status(400).send('Kullan\u0131c\u0131 ad\u0131 veya parola hatal\u0131.');\n }\n\n const token = jwt.sign({ username: user.username }, JWT_SECRET, { expiresIn: '1h' });\n res.json({ token });\n});\n\n\/\/ Korumal\u0131 bir rota \u00f6rne\u011fi\nconst authenticateToken = (req, res, next) => {\n const authHeader = req.headers['authorization'];\n const token = authHeader && authHeader.split(' ')[1];\n\n if (token == null) return res.sendStatus(401);\n\n jwt.verify(token, JWT_SECRET, (err, user) => {\n if (err) return res.sendStatus(403);\n req.user = user;\n next();\n });\n};\n\napp.get('\/api\/protected', authenticateToken, (req, res) => {\n res.json({ message: <code class=\"language-\">Ho\u015f geldiniz, ${req.user.username}! Bu korumal\u0131 bir i\u00e7eriktir.<\/code> });\n});\n\napp.listen(5000, () => console.log('Backend 5000 portunda \u00e7al\u0131\u015f\u0131yor.'));\n<\/code><\/pre>\n<h3>React Uygulamas\u0131 Kurulumu ve Gerekli Paketler<\/h3>\n<p>Yeni bir React projesi olu\u015fturarak ba\u015flayabiliriz. Ard\u0131ndan, API istekleri yapmak i\u00e7in <code>axios<\/code> ve y\u00f6nlendirme (routing) i\u00e7in <code>react-router-dom<\/code> paketlerini kuraca\u011f\u0131z.<\/p>\n<pre><code>\nnpx create-react-app react-auth-app\ncd react-auth-app\nnpm install axios react-router-dom\n<\/code><\/pre>\n<p>Projemizi olu\u015fturduktan ve gerekli paketleri kurduktan sonra, React uygulamas\u0131n\u0131n temel yap\u0131s\u0131n\u0131 olu\u015fturmaya ba\u015flayabiliriz. Bu yap\u0131n\u0131n i\u00e7inde, kullan\u0131c\u0131 giri\u015fini y\u00f6netecek bir bile\u015fen, global kimlik do\u011frulama durumunu y\u00f6netecek bir Context API sa\u011flay\u0131c\u0131s\u0131 ve korumal\u0131 rotalar\u0131 y\u00f6netecek bir bile\u015fen yer alacakt\u0131r. Bu ad\u0131mlar, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin kimlik do\u011frulama durumuna tutarl\u0131 bir \u015fekilde eri\u015fmesini ve kullan\u0131c\u0131n\u0131n oturum durumuna g\u00f6re farkl\u0131 aray\u00fczler sunmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n<h3>Giri\u015f Formu Olu\u015fturma ve API Entegrasyonu<\/h3>\n<p>\u015eimdi, kullan\u0131c\u0131lardan kullan\u0131c\u0131 ad\u0131 ve parola alacak bir giri\u015f formu olu\u015ftural\u0131m ve bu formu arka u\u00e7 API’m\u0131zla entegre edelim. Token’\u0131 <code>localStorage<\/code>‘a kaydedece\u011fiz. Ancak, g\u00fcvenlik i\u00e7in <code>HttpOnly<\/code> \u00e7erezleri genellikle daha g\u00fcvenli bir se\u00e7enek olarak kabul edilir \u00e7\u00fcnk\u00fc JavaScript eri\u015fimine kapal\u0131d\u0131rlar ve XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 daha diren\u00e7lidirler. Bu senaryoda <code>localStorage<\/code> kullanaca\u011f\u0131z ama en iyi prati\u011fin <code>HttpOnly<\/code> \u00e7erezleri oldu\u011funu unutmay\u0131n.<\/p>\n<pre><code>\n\/\/ src\/components\/Login.js\nimport React, { useState } from 'react';\nimport axios from 'axios';\nimport { useNavigate } from 'react-router-dom';\n\nfunction Login() {\n const [username, setUsername] = useState('');\n const [password, setPassword] = useState('');\n const [error, setError] = useState('');\n const navigate = useNavigate();\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError('');\n try {\n const response = await axios.post('http:\/\/localhost:5000\/api\/login', {\n username,\n password,\n });\n localStorage.setItem('token', response.data.token);\n navigate('\/dashboard'); \/\/ Ba\u015far\u0131l\u0131 giri\u015fte dashboard sayfas\u0131na y\u00f6nlendir\n } catch (err) {\n setError('Giri\u015f ba\u015far\u0131s\u0131z. L\u00fctfen kullan\u0131c\u0131 ad\u0131n\u0131z\u0131 ve parolan\u0131z\u0131 kontrol edin.');\n console.error(err);\n }\n };\n\n return (\n <div style={{ padding: '20px', maxWidth: '400px', margin: '50px auto', border: '1px solid #ccc', borderRadius: '8px' }}>\n <h2>Giri\u015f Yap<\/h2>\n {error && <p style={{ color: 'red' }}>{error}<\/p>}\n <form onSubmit={handleSubmit}>\n <div style={{ marginBottom: '15px' }}>\n <label htmlFor=\"username\" style={{ display: 'block', marginBottom: '5px' }}>Kullan\u0131c\u0131 Ad\u0131:<\/label>\n <input\n type=\"text\"\n id=\"username\"\n value={username}\n onChange={(e) => setUsername(e.target.value)}\n required\n style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}\n \/>\n <\/div>\n <div style={{ marginBottom: '15px' }}>\n <label htmlFor=\"password\" style={{ display: 'block', marginBottom: '5px' }}>Parola:<\/label>\n <input\n type=\"password\"\n id=\"password\"\n value={password}\n onChange={(e) => setPassword(e.target.value)}\n required\n style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}\n \/>\n <\/div>\n <button type=\"submit\" style={{ width: '100%', padding: '10px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>Giri\u015f Yap<\/button>\n <\/form>\n <\/div>\n );\n}\n\nexport default Login;\n<\/code><\/pre>\n<h3>Kullan\u0131c\u0131 Durumunu Y\u00f6netme ve \u00d6zel Rotalar (Protected Routes)<\/h3>\n<p>Kullan\u0131c\u0131n\u0131n giri\u015f durumunu t\u00fcm uygulamada y\u00f6netmek i\u00e7in React Context API’sini kullanaca\u011f\u0131z. Ayr\u0131ca, sadece giri\u015f yapm\u0131\u015f kullan\u0131c\u0131lar\u0131n eri\u015febilece\u011fi korumal\u0131 rotalar olu\u015fturaca\u011f\u0131z.<\/p>\n<pre><code>\n\/\/ src\/context\/AuthContext.js\nimport React, { createContext, useState, useEffect, useContext } from 'react';\nimport axios from 'axios';\nimport { useNavigate } from 'react-router-dom';\n\nconst AuthContext = createContext(null);\n\nexport const AuthProvider = ({ children }) => {\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [user, setUser] = useState(null);\n const navigate = useNavigate();\n\n useEffect(() => {\n const token = localStorage.getItem('token');\n if (token) {\n \/\/ Token'\u0131 do\u011frulamak i\u00e7in bir API iste\u011fi yap\u0131labilir\n \/\/ Basitlik i\u00e7in sadece token'\u0131n varl\u0131\u011f\u0131n\u0131 kontrol ediyoruz\n setIsAuthenticated(true);\n \/\/ Ger\u00e7ek uygulamada token'dan kullan\u0131c\u0131 bilgilerini \u00e7\u00f6z\u00fcmleyebilirsiniz\n setUser({ username: 'TestUser' }); \n }\n }, []);\n\n const login = (token, userData) => {\n localStorage.setItem('token', token);\n setIsAuthenticated(true);\n setUser(userData);\n };\n\n const logout = () => {\n localStorage.removeItem('token');\n setIsAuthenticated(false);\n setUser(null);\n navigate('\/login');\n };\n\n return (\n <AuthContext.Provider value={{ isAuthenticated, user, login, logout }}>\n {children}\n <\/AuthContext.Provider>\n );\n};\n\nexport const useAuth = () => {\n return useContext(AuthContext);\n};\n<\/code><\/pre>\n<pre><code>\n\/\/ src\/components\/PrivateRoute.js\nimport React from 'react';\nimport { Navigate } from 'react-router-dom';\nimport { useAuth } from '..\/context\/AuthContext';\n\nfunction PrivateRoute({ children }) {\n const { isAuthenticated } = useAuth();\n return isAuthenticated ? children : <Navigate to=\"\/login\" replace \/>;\n}\n\nexport default PrivateRoute;\n<\/code><\/pre>\n<pre><code>\n\/\/ src\/App.js (Router ve Context entegrasyonu)\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\nimport Login from '.\/components\/Login';\nimport Dashboard from '.\/components\/Dashboard';\nimport PrivateRoute from '.\/components\/PrivateRoute';\nimport { AuthProvider, useAuth } from '.\/context\/AuthContext';\n\nconst Home = () => <h2>Anasayfa<\/h2>;\nconst PublicPage = () => <h2>Herkese A\u00e7\u0131k Sayfa<\/h2>;\n\nconst AuthStatus = () => {\n const { isAuthenticated, user, logout } = useAuth();\n return (\n <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>\n {isAuthenticated ? (\n <>\n <span>Ho\u015f Geldiniz, {user?.username}<\/span>\n <button onClick={logout}>\u00c7\u0131k\u0131\u015f Yap<\/button>\n <\/>\n ) : (\n <span>Giri\u015f Yapmad\u0131n\u0131z<\/span>\n )}\n <\/div>\n );\n};\n\nfunction App() {\n return (\n <Router>\n <AuthProvider>\n <nav style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 20px', backgroundColor: '#f0f0f0' }}>\n <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', gap: '15px' }}>\n <li><Link to=\"\/\">Anasayfa<\/Link><\/li>\n <li><Link to=\"\/public\">Herkese A\u00e7\u0131k<\/Link><\/li>\n <li><Link to=\"\/dashboard\">Dashboard (Korumal\u0131)<\/Link><\/li>\n {!useAuth().isAuthenticated && <li><Link to=\"\/login\">Giri\u015f Yap<\/Link><\/li>}\n <\/ul>\n <AuthStatus \/>\n <\/nav>\n\n <Routes>\n <Route path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/public\" element={<PublicPage \/>} \/>\n <Route path=\"\/login\" element={<Login \/>} \/>\n <Route\n path=\"\/dashboard\"\n element={\n <PrivateRoute>\n <Dashboard \/>\n <\/PrivateRoute>\n }\n \/>\n <\/Routes>\n <\/AuthProvider>\n <\/Router>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n<pre><code>\n\/\/ src\/components\/Dashboard.js\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\nimport { useAuth } from '..\/context\/AuthContext';\n\nfunction Dashboard() {\n const { user, logout } = useAuth();\n const [protectedData, setProtectedData] = useState('');\n const [error, setError] = useState('');\n\n useEffect(() => {\n const fetchProtectedData = async () => {\n try {\n const token = localStorage.getItem('token');\n const response = await axios.get('http:\/\/localhost:5000\/api\/protected', {\n headers: {\n Authorization: <code class=\"language-\">Bearer ${token}<\/code>,\n },\n });\n setProtectedData(response.data.message);\n } catch (err) {\n setError('Korumal\u0131 verilere eri\u015filemiyor. Oturumunuz sona ermi\u015f olabilir.');\n console.error(err);\n \/\/ E\u011fer token ge\u00e7ersizse veya s\u00fcresi dolmu\u015fsa \u00e7\u0131k\u0131\u015f yap\n if (err.response && (err.response.status === 401 || err.response.status === 403)) {\n logout();\n }\n }\n };\n fetchProtectedData();\n }, [logout]);\n\n return (\n <div style={{ padding: '20px', maxWidth: '800px', margin: '50px auto', border: '1px solid #ccc', borderRadius: '8px' }}>\n <h2>Dashboard<\/h2>\n {user && <p>Ho\u015f geldiniz, {user.username}! Buras\u0131 sadece giri\u015f yapm\u0131\u015f kullan\u0131c\u0131lar i\u00e7in.<\/p>}\n {protectedData && <p>API'den gelen korumal\u0131 veri: {protectedData}<\/p>}\n {error && <p style={{ color: 'red' }}>{error}<\/p>}\n <\/div>\n );\n}\n\nexport default Dashboard;\n<\/code><\/pre>\n<h2>G\u00fcvenli\u011fi Art\u0131rma ve En \u0130yi Uygulamalar Nelerdir?<\/h2>\n<p>Kimlik do\u011frulama sisteminizi kurduktan sonra, g\u00fcvenli\u011fini art\u0131rmak i\u00e7in baz\u0131 en iyi uygulamalar\u0131 benimsemek \u00f6nemlidir. Zira hi\u00e7bir sistem tamamen risksiz de\u011fildir ve s\u00fcrekli olarak geli\u015fen tehditlere kar\u015f\u0131 g\u00fcncel kalmak gereklidir. Bu b\u00f6l\u00fcmde, React uygulamalar\u0131n\u0131zdaki kimlik do\u011frulama g\u00fcvenli\u011fini nas\u0131l daha da g\u00fc\u00e7lendirebilece\u011finize dair \u00f6nemli ipu\u00e7lar\u0131 ve teknikler sunaca\u011f\u0131z.<\/p>\n<p>\u0130lk olarak, token depolama stratejisi kritik \u00f6neme sahiptir. Yukar\u0131daki \u00f6rnekte <code>localStorage<\/code> kulland\u0131k ancak bu, Cross-Site Scripting (XSS) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z olabilir. XSS sald\u0131r\u0131lar\u0131nda, k\u00f6t\u00fc niyetli bir betik <code>localStorage<\/code>‘a eri\u015ferek token’\u0131n\u0131z\u0131 \u00e7alabilir. Bu riski azaltmak i\u00e7in, token’lar\u0131 <code>HttpOnly<\/code> ve <code>Secure<\/code> i\u015faretli \u00e7erezlerde (cookies) saklamak daha g\u00fcvenli bir yakla\u015f\u0131md\u0131r. <code>HttpOnly<\/code> \u00e7erezlere JavaScript ile eri\u015filemez, bu da XSS sald\u0131r\u0131lar\u0131n\u0131n token’\u0131 \u00e7almas\u0131n\u0131 zorla\u015ft\u0131r\u0131r. <code>Secure<\/code> i\u015fareti ise \u00e7erezlerin sadece HTTPS \u00fczerinden g\u00f6nderilmesini sa\u011flar, b\u00f6ylece a\u011f \u00fczerindeki dinlemelere kar\u015f\u0131 korunur. Ancak, \u00e7erez tabanl\u0131 kimlik do\u011frulama, Cross-Site Request Forgery (CSRF) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 daha savunmas\u0131z olabilir. Bu t\u00fcr sald\u0131r\u0131lara kar\u015f\u0131 korunmak i\u00e7in CSRF token’lar\u0131 kullanmak veya <code>SameSite<\/code> \u00e7erez \u00f6zelliklerini do\u011fru yap\u0131land\u0131rmak \u00f6nemlidir.<\/p>\n<p>\u0130kincil olarak, refresh token (yenileme belirteci) kullan\u0131m\u0131, hem g\u00fcvenlik hem de kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan \u00f6nemlidir. Eri\u015fim token’lar\u0131n\u0131n (access token) \u00f6mr\u00fc genellikle k\u0131sa tutulur (\u00f6rne\u011fin 15 dakika – 1 saat) g\u00fcvenlik riskini azaltmak i\u00e7in. Ancak, her k\u0131sa s\u00fcreli token s\u00fcresi doldu\u011funda kullan\u0131c\u0131dan tekrar giri\u015f yapmas\u0131n\u0131 istemek kullan\u0131c\u0131 deneyimini k\u00f6t\u00fcle\u015ftirir. \u0130\u015fte burada refresh token’lar devreye girer. Refresh token’lar daha uzun \u00f6m\u00fcrl\u00fcd\u00fcr ve kullan\u0131c\u0131n\u0131n tekrar giri\u015f yapmas\u0131na gerek kalmadan yeni bir eri\u015fim token’\u0131 almak i\u00e7in kullan\u0131l\u0131r. Eri\u015fim token’\u0131 s\u00fcresi doldu\u011funda, uygulama refresh token’\u0131 kullanarak arka u\u00e7tan yeni bir eri\u015fim token’\u0131 talep eder. Refresh token’lar genellikle <code>HttpOnly<\/code> \u00e7erezlerinde saklan\u0131r ve sadece belirli bir API u\u00e7 noktas\u0131na g\u00f6nderilebilir. Bu mekanizma, eri\u015fim token’\u0131 \u00e7al\u0131nsa bile, k\u0131sa \u00f6m\u00fcrl\u00fc oldu\u011fu i\u00e7in sald\u0131rgan\u0131n zarar verme s\u00fcresini s\u0131n\u0131rlar.<\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc olarak, uygulaman\u0131zda \u00e7ok fakt\u00f6rl\u00fc kimlik do\u011frulama (MFA\/2FA) se\u00e7eneklerini sunmay\u0131 d\u00fc\u015f\u00fcn\u00fcn. MFA, kullan\u0131c\u0131 ad\u0131 ve parola d\u0131\u015f\u0131nda, kullan\u0131c\u0131n\u0131n kimli\u011fini do\u011frulamak i\u00e7in ek bir fakt\u00f6r (\u00f6rne\u011fin, cep telefonuna g\u00f6nderilen bir kod, biyometrik veri veya donan\u0131m anahtar\u0131) gerektirir. Bu, kimlik av\u0131 (phishing) veya kaba kuvvet (brute-force) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 \u00f6nemli bir savunma katman\u0131 ekler. Bir\u00e7ok \u00fc\u00e7\u00fcnc\u00fc taraf kimlik do\u011frulama sa\u011flay\u0131c\u0131s\u0131 (Auth0, Firebase) MFA deste\u011fi sunar ve entegrasyonlar\u0131 nispeten kolayd\u0131r.<\/p>\n<p>Son olarak, API g\u00fcvenli\u011fi ve rate limiting (istek s\u0131n\u0131rlama) uygulamalar\u0131n\u0131 g\u00f6z ard\u0131 etmeyin. Kimlik do\u011frulama u\u00e7 noktalar\u0131n\u0131za y\u00f6nelik kaba kuvvet sald\u0131r\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in, belirli bir IP adresinden veya kullan\u0131c\u0131dan gelen ba\u015far\u0131s\u0131z giri\u015f denemesi say\u0131s\u0131n\u0131 s\u0131n\u0131rlay\u0131n. Ba\u015far\u0131s\u0131z deneme limitine ula\u015f\u0131ld\u0131\u011f\u0131nda, ge\u00e7ici olarak kullan\u0131c\u0131y\u0131 veya IP adresini engelleyin. Ayr\u0131ca, API’nizin SSL\/TLS \u00fczerinden ileti\u015fim kurdu\u011fundan emin olun (HTTPS kullan\u0131m\u0131 zorunlu olmal\u0131) ve sunucu taraf\u0131nda t\u00fcm giri\u015f bilgilerini ve hassas verileri do\u011fru bir \u015fekilde do\u011frulay\u0131n ve sanitize edin. Bu ad\u0131mlar, React uygulaman\u0131z\u0131n kimlik do\u011frulama mekanizmas\u0131n\u0131 daha sa\u011flam ve g\u00fcvenli hale getirecektir.<\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: G\u00fcvenlik, s\u00fcrekli bir s\u00fcre\u00e7tir. Uygulaman\u0131z\u0131 d\u00fczenli olarak g\u00fcvenlik a\u00e7\u0131klar\u0131na kar\u015f\u0131 test edin (penetrasyon testleri) ve kullan\u0131lan k\u00fct\u00fcphaneleri g\u00fcncel tutarak bilinen zafiyetlere kar\u015f\u0131 korunun.\n<\/div>\n<h2>Vaka Analizi: E-ticaret Uygulamas\u0131nda Kimlik Do\u011frulama Deneyimi<\/h2>\n<p>Bir e-ticaret uygulamas\u0131n\u0131n ba\u015far\u0131l\u0131 bir \u015fekilde \u00e7al\u0131\u015fabilmesi i\u00e7in g\u00fc\u00e7l\u00fc ve kullan\u0131c\u0131 dostu bir kimlik do\u011frulama sistemine sahip olmas\u0131 elzemdir. Kullan\u0131c\u0131lar\u0131n al\u0131\u015fveri\u015f yaparken, sipari\u015f ge\u00e7mi\u015flerini g\u00f6r\u00fcnt\u00fclerken veya ki\u015fisel bilgilerini g\u00fcncellerken kendilerini g\u00fcvende hissetmeleri gerekir. Bu vaka analizinde, “ShopEase” ad\u0131n\u0131 verdi\u011fimiz hayali bir React tabanl\u0131 e-ticaret uygulamas\u0131nda kimlik do\u011frulama s\u00fcrecinin nas\u0131l tasarland\u0131\u011f\u0131n\u0131 ve uyguland\u0131\u011f\u0131n\u0131 inceleyelim.<\/p>\n<p>ShopEase, \u00fcr\u00fcnleri listelemek, sepet olu\u015fturmak, \u00f6deme yapmak ve kullan\u0131c\u0131 profillerini y\u00f6netmek i\u00e7in bir dizi API u\u00e7 noktas\u0131 kullanan modern bir SPA (Tek Sayfa Uygulamas\u0131) olarak geli\u015ftirildi. Kimlik do\u011frulama i\u00e7in JWT (JSON Web Token) tabanl\u0131 bir yakla\u015f\u0131m benimsendi. Kullan\u0131c\u0131lar, kay\u0131t olduklar\u0131nda veya giri\u015f yapt\u0131klar\u0131nda, arka u\u00e7 sunucusu onlara bir eri\u015fim token’\u0131 ve bir yenileme token’\u0131 (refresh token) sa\u011fl\u0131yordu. Eri\u015fim token’\u0131 k\u0131sa \u00f6m\u00fcrl\u00fc (15 dakika) olarak ayarlan\u0131rken, yenileme token’\u0131 daha uzun \u00f6m\u00fcrl\u00fc (7 g\u00fcn) olarak yap\u0131land\u0131r\u0131ld\u0131.<\/p>\n<p>React uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n giri\u015f durumunu y\u00f6netmek i\u00e7in React Context API’si kullan\u0131ld\u0131. <code>AuthContext<\/code>, kullan\u0131c\u0131n\u0131n oturum a\u00e7\u0131p a\u00e7mad\u0131\u011f\u0131n\u0131, kullan\u0131c\u0131 bilgilerini ve token’lar\u0131 depoluyordu. Kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, eri\u015fim token’\u0131 <code>localStorage<\/code>‘a (pratikte HttpOnly \u00e7erezler daha g\u00fcvenli olsa da, h\u0131zl\u0131 entegrasyon i\u00e7in bu tercih edildi) kaydediliyor ve yenileme token’\u0131 ise daha g\u00fcvenli bir \u015fekilde HttpOnly \u00e7erezlerine yerle\u015ftiriliyordu. Bu ayr\u0131m, eri\u015fim token’\u0131n\u0131n XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 daha savunmas\u0131z olmas\u0131 durumunda bile, uzun \u00f6m\u00fcrl\u00fc yenileme token’\u0131n\u0131n do\u011frudan JavaScript taraf\u0131ndan eri\u015filememesini sa\u011fl\u0131yordu.<\/p>\n<p>Uygulama i\u00e7inde, kullan\u0131c\u0131n\u0131n giri\u015f yapmas\u0131n\u0131 gerektiren rotalar (\u00f6rne\u011fin, “Hesab\u0131m”, “Sipari\u015flerim”, “\u00d6deme Sayfas\u0131”) <code>PrivateRoute<\/code> bile\u015fenleri ile korundu. Bu bile\u015fen, kullan\u0131c\u0131n\u0131n <code>AuthContext<\/code> \u00fczerinden kimlik do\u011frulama durumunu kontrol ediyor ve e\u011fer kullan\u0131c\u0131 giri\u015f yapmam\u0131\u015fsa, onu otomatik olarak giri\u015f sayfas\u0131na y\u00f6nlendiriyordu. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n farkl\u0131 yetki seviyeleri vard\u0131: “m\u00fc\u015fteri” ve “y\u00f6netici”. Y\u00f6netici paneli gibi \u00f6zel rotalar, sadece <code>user.role === 'admin'<\/code> kontrol\u00fc ile eri\u015filebilir hale getirildi, bu da yetkilendirme (authorization) katman\u0131n\u0131 olu\u015fturuyordu.<\/p>\n<p>ShopEase’deki \u00f6nemli bir zorluk, eri\u015fim token’\u0131n\u0131n s\u00fcresi doldu\u011funda kullan\u0131c\u0131 deneyimini kesintiye u\u011fratmadan yeni bir token almakt\u0131. Bu sorun, <code>axios<\/code> interceptor’lar\u0131 kullan\u0131larak \u00e7\u00f6z\u00fcld\u00fc. Her API iste\u011fi g\u00f6nderilmeden \u00f6nce, bir interceptor token’\u0131n s\u00fcresinin dolup dolmad\u0131\u011f\u0131n\u0131 kontrol ediyordu. E\u011fer token s\u00fcresi dolmu\u015fsa, otomatik olarak yenileme token’\u0131n\u0131 kullanarak arka uca yeni bir eri\u015fim token’\u0131 almak i\u00e7in bir istek g\u00f6nderiyordu. Yeni token ba\u015far\u0131yla al\u0131nd\u0131\u011f\u0131nda, eski token ile de\u011fi\u015ftiriliyor ve orijinal istek tekrar deneniyordu. Bu sayede, kullan\u0131c\u0131lar oturumlar\u0131n\u0131n yenilendi\u011fini fark etmeden uygulamay\u0131 kullanmaya devam edebiliyorlard\u0131.<\/p>\n<p>Ek g\u00fcvenlik \u00f6nlemleri olarak, ShopEase uygulamas\u0131nda parola s\u0131f\u0131rlama mekanizmas\u0131 e-posta do\u011frulama ile g\u00fc\u00e7lendirildi ve kay\u0131t s\u0131ras\u0131nda CAPTCHA entegrasyonu kullan\u0131ld\u0131. Arka u\u00e7 API’sinde ise, kaba kuvvet sald\u0131r\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in giri\u015f denemelerine rate limiting uyguland\u0131. Bu kapsaml\u0131 yakla\u015f\u0131m, ShopEase’in hem g\u00fcvenli hem de kullan\u0131c\u0131 dostu bir al\u0131\u015fveri\u015f deneyimi sunmas\u0131n\u0131 sa\u011flad\u0131, kullan\u0131c\u0131lar\u0131n ki\u015fisel ve finansal verilerinin korunmas\u0131na yard\u0131mc\u0131 oldu.<\/p>\n<h2>Sonu\u00e7 ve Gelecek Trendleri<\/h2>\n<p>React uygulamalar\u0131na kimlik do\u011frulama eklemek, sadece kullan\u0131c\u0131 ad\u0131 ve parola formundan \u00e7ok daha fazlas\u0131n\u0131 i\u00e7erir. G\u00fcvenli bir arka u\u00e7 API’si ile entegrasyon, token y\u00f6netimi, kullan\u0131c\u0131 durumunun tutarl\u0131 bir \u015fekilde y\u00f6netilmesi ve korumal\u0131 rotalar\u0131n yap\u0131land\u0131r\u0131lmas\u0131 gibi bir\u00e7ok katman\u0131 bar\u0131nd\u0131r\u0131r. Bu makalede, JWT tabanl\u0131 bir kimlik do\u011frulama sistemini ad\u0131m ad\u0131m nas\u0131l kuraca\u011f\u0131m\u0131z\u0131, temel kavramlar\u0131 ve en iyi g\u00fcvenlik uygulamalar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceledik. Context API kullanarak kullan\u0131c\u0131 durumunu y\u00f6netmenin ve <code>PrivateRoute<\/code> bile\u015fenleri ile hassas rotalar\u0131 koruman\u0131n \u00f6nemini vurgulad\u0131k. Ayr\u0131ca, bir e-ticaret uygulamas\u0131 \u00f6zelinde vaka analizi yaparak ger\u00e7ek d\u00fcnya senaryolar\u0131nda kar\u015f\u0131la\u015f\u0131labilecek zorluklara ve \u00e7\u00f6z\u00fcm yollar\u0131na de\u011findik.<\/p>\n<p>Gelecekte, kimlik do\u011frulama teknolojileri s\u00fcrekli geli\u015fmeye devam edecektir. Parolas\u0131z kimlik do\u011frulama (passwordless authentication) y\u00f6ntemleri, \u00f6zellikle WebAuthn standard\u0131 ile donan\u0131m tabanl\u0131 g\u00fcvenlik anahtarlar\u0131 veya biyometrik veriler kullanarak daha g\u00fcvenli ve kullan\u0131c\u0131 dostu giri\u015f deneyimleri sunmay\u0131 hedeflemektedir. Serverless (sunucusuz) mimariler ve bulut tabanl\u0131 kimlik do\u011frulama servisleri (AWS Cognito, Auth0, Firebase) pop\u00fclerli\u011fini art\u0131rarak geli\u015ftiricilerin kimlik do\u011frulama altyap\u0131s\u0131n\u0131 y\u00f6netme y\u00fck\u00fcn\u00fc azaltmaktad\u0131r. Bu trendler, geli\u015ftiricilerin g\u00fcvenlikten \u00f6d\u00fcn vermeden daha h\u0131zl\u0131 ve \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirmesine olanak tan\u0131yacakt\u0131r. React geli\u015ftiricileri olarak, bu yeni teknolojileri takip etmek ve uygulamalar\u0131m\u0131za entegre etmek, hem kullan\u0131c\u0131lar\u0131m\u0131za daha iyi bir deneyim sunmak hem de uygulamalar\u0131m\u0131z\u0131n g\u00fcvenli\u011fini en \u00fcst d\u00fczeyde tutmak a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\n<p>Unutmay\u0131n, g\u00fcvenlik asla tek seferlik bir i\u015flem de\u011fildir; s\u00fcrekli bir s\u00fcre\u00e7tir. Uygulaman\u0131z\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 d\u00fczenli olarak kontrol etmek, kullan\u0131lan k\u00fct\u00fcphaneleri g\u00fcncel tutmak ve en iyi g\u00fcvenlik pratiklerini uygulamak, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n verilerini korumak ve uygulaman\u0131z\u0131n itibar\u0131n\u0131 s\u00fcrd\u00fcrmek i\u00e7in hayati \u00f6neme sahiptir. Bu rehberin, React uygulamalar\u0131n\u0131za g\u00fcvenli ve etkili bir kimlik do\u011frulama sistemi entegre etme yolculu\u011funuzda size yol g\u00f6sterici olmas\u0131n\u0131 umuyoruz.<\/p>\n<div style=\"border: 1px solid #ddd; padding: 15px; margin-top: 30px; border-radius: 8px;\">\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<ol style=\"list-style-type: decimal; padding-left: 20px;\">\n<li style=\"margin-bottom: 10px;\">\n <strong>React uygulamas\u0131nda token’\u0131 nerede saklamal\u0131y\u0131m? localStorage m\u0131, yoksa \u00e7erezler mi?<\/strong><\/p>\n<p>Genel olarak, <code>HttpOnly<\/code> ve <code>Secure<\/code> i\u015faretli \u00e7erezler, XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 <code>localStorage<\/code>‘dan daha g\u00fcvenlidir \u00e7\u00fcnk\u00fc JavaScript taraf\u0131ndan eri\u015filemezler. Ancak, \u00e7erezler CSRF sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z olabilir. Her iki y\u00f6ntemin de avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r. G\u00fcvenlik ve rahatl\u0131k aras\u0131nda bir denge kurmak \u00f6nemlidir. En g\u00fcvenli yakla\u015f\u0131m genellikle k\u0131sa \u00f6m\u00fcrl\u00fc eri\u015fim token’lar\u0131n\u0131 HttpOnly \u00e7erezlerinde ve uzun \u00f6m\u00fcrl\u00fc refresh token’lar\u0131n\u0131 da HttpOnly \u00e7erezlerinde saklamakt\u0131r. E\u011fer <code>localStorage<\/code> kullan\u0131l\u0131yorsa, XSS korumalar\u0131na \u00f6zel dikkat g\u00f6sterilmelidir.<\/p>\n<\/li>\n<li style=\"margin-bottom: 10px;\">\n <strong>JWT’nin s\u00fcresi doldu\u011funda ne yapmal\u0131y\u0131m?<\/strong><\/p>\n<p>Eri\u015fim token’\u0131n\u0131n s\u00fcresi doldu\u011funda, kullan\u0131c\u0131dan tekrar giri\u015f yapmas\u0131n\u0131 istemek yerine, arka u\u00e7tan yeni bir eri\u015fim token’\u0131 almak i\u00e7in bir “refresh token” kullanmal\u0131s\u0131n\u0131z. Bu i\u015flem genellikle <code>axios<\/code> interceptor’lar\u0131 gibi mekanizmalarla otomatikle\u015ftirilir. Refresh token’\u0131, eri\u015fim token’\u0131ndan daha uzun \u00f6m\u00fcrl\u00fc olup, HttpOnly \u00e7erezlerinde g\u00fcvenli bir \u015fekilde saklanmal\u0131d\u0131r.<\/p>\n<\/li>\n<li style=\"margin-bottom: 10px;\">\n <strong>React uygulamamda birden fazla kullan\u0131c\u0131 rol\u00fc varsa yetkilendirmeyi nas\u0131l y\u00f6netirim?<\/strong><\/p>\n<p>Yetkilendirme (authorization) i\u00e7in, kullan\u0131c\u0131n\u0131n rol bilgisini JWT i\u00e7inde veya ayr\u0131 bir API iste\u011fiyle alabilirsiniz. Bu rol bilgisi, React uygulaman\u0131zda Context API veya Redux gibi bir durum y\u00f6netim arac\u0131yla saklanabilir. Daha sonra, korumal\u0131 rotalarda veya bile\u015fenlerde, kullan\u0131c\u0131n\u0131n rol\u00fcn\u00fc kontrol ederek belirli sayfalara veya aray\u00fcz \u00f6\u011felerine eri\u015fimini k\u0131s\u0131tlayabilirsiniz. \u00d6rne\u011fin, bir y\u00f6netici paneli sadece <code>user.role === 'admin'<\/code> olan kullan\u0131c\u0131lara g\u00f6sterilebilir.<\/p>\n<\/li>\n<li style=\"margin-bottom: 10px;\">\n <strong>Kimlik do\u011frulama i\u00e7in \u00fc\u00e7\u00fcnc\u00fc taraf servisler (Auth0, Firebase) kullanman\u0131n avantajlar\u0131 nelerdir?<\/strong><\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc taraf servisler, kimlik do\u011frulama altyap\u0131s\u0131n\u0131n karma\u015f\u0131k y\u00f6nlerini (kullan\u0131c\u0131 kayd\u0131, parola s\u0131f\u0131rlama, MFA, sosyal medya giri\u015fleri vb.) sizin i\u00e7in y\u00f6netir. Bu, geli\u015ftirme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r, g\u00fcvenlik endi\u015felerini uzmanlara devreder ve genellikle y\u00fcksek \u00f6l\u00e7eklenebilirlik sunar. Ancak, bu servisler belirli bir sa\u011flay\u0131c\u0131ya ba\u011f\u0131ml\u0131l\u0131k yaratabilir ve maliyetleri olabilir.<\/p>\n<\/li>\n<li style=\"margin-bottom: 10px;\">\n <strong>Mobil cihazlar i\u00e7in responsive bir giri\u015f formu nas\u0131l olu\u015fturulur?<\/strong><\/p>\n<p>Mobil uyumlu bir giri\u015f formu olu\u015fturmak i\u00e7in CSS medya sorgular\u0131n\u0131 (media queries) kullanabilirsiniz. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlar i\u00e7in formun geni\u015fli\u011fini ayarlayabilir, yaz\u0131 tiplerini ve bo\u015fluklar\u0131 optimize edebilirsiniz. Flexbox veya CSS Grid gibi modern CSS d\u00fczen teknikleri, farkl\u0131 ekran boyutlar\u0131nda formun d\u00fczg\u00fcn g\u00f6r\u00fcnmesini sa\u011flar. \u00d6rne\u011fin:<\/p>\n<pre><code>\n\/* components\/Login.css *\/\n.login-container {\n padding: 20px;\n max-width: 400px;\n margin: 50px auto;\n border: 1px solid #ccc;\n border-radius: 8px;\n}\n\n@media (max-width: 600px) {\n .login-container {\n max-width: 90%;\n margin: 20px auto;\n padding: 15px;\n }\n button {\n padding: 12px;\n font-size: 16px;\n }\n}\n <\/code><\/pre>\n<p>Ard\u0131ndan bu CSS dosyas\u0131n\u0131 Login bile\u015feninize import edebilirsiniz.<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Uygulamalar\u0131na Giri\u015f Kimlik Do\u011frulamas\u0131 Nas\u0131l Eklenir? Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 olan kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (authentication),…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37516","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?<\/title>\n<meta name=\"description\" content=\"Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 olan kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (authentication), verilerinizi ve kullan\u0131c\u0131 deneyimini g\u00fcvence alt\u0131na alman\u0131n temelidir. React uygulamalar\u0131n\u0131zda g\u00fcvenli bir giri\u015f sistemi kurmak, hassas bilgileri koruman\u0131n ve ki\u015fiselle\u015ftirilmi\u015f hizmetler sunman\u0131n ilk ad\u0131m\u0131d\u0131r. Bu kapsaml\u0131 rehberde, React projelerinize ad\u0131m ad\u0131m nas\u0131l g\u00fcvenli ve etkili bir kimlik do\u011frulama mekanizmas\u0131 ekleyece\u011finizi ke\u015ffedeceksiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 olan kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (authentication), verilerinizi ve kullan\u0131c\u0131 deneyimini g\u00fcvence alt\u0131na alman\u0131n temelidir. React uygulamalar\u0131n\u0131zda g\u00fcvenli bir giri\u015f sistemi kurmak, hassas bilgileri koruman\u0131n ve ki\u015fiselle\u015ftirilmi\u015f hizmetler sunman\u0131n ilk ad\u0131m\u0131d\u0131r. Bu kapsaml\u0131 rehberde, React projelerinize ad\u0131m ad\u0131m nas\u0131l g\u00fcvenli ve etkili bir kimlik do\u011frulama mekanizmas\u0131 ekleyece\u011finizi ke\u015ffedeceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-07T09:23:13+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?\",\"datePublished\":\"2026-01-07T09:23:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/\"},\"wordCount\":3739,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/\",\"name\":\"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-07T09:23:13+00:00\",\"description\":\"Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 olan kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (authentication), verilerinizi ve kullan\u0131c\u0131 deneyimini g\u00fcvence alt\u0131na alman\u0131n temelidir. React uygulamalar\u0131n\u0131zda g\u00fcvenli bir giri\u015f sistemi kurmak, hassas bilgileri koruman\u0131n ve ki\u015fiselle\u015ftirilmi\u015f hizmetler sunman\u0131n ilk ad\u0131m\u0131d\u0131r. Bu kapsaml\u0131 rehberde, React projelerinize ad\u0131m ad\u0131m nas\u0131l g\u00fcvenli ve etkili bir kimlik do\u011frulama mekanizmas\u0131 ekleyece\u011finizi ke\u015ffedeceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?","description":"Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 olan kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (authentication), verilerinizi ve kullan\u0131c\u0131 deneyimini g\u00fcvence alt\u0131na alman\u0131n temelidir. React uygulamalar\u0131n\u0131zda g\u00fcvenli bir giri\u015f sistemi kurmak, hassas bilgileri koruman\u0131n ve ki\u015fiselle\u015ftirilmi\u015f hizmetler sunman\u0131n ilk ad\u0131m\u0131d\u0131r. Bu kapsaml\u0131 rehberde, React projelerinize ad\u0131m ad\u0131m nas\u0131l g\u00fcvenli ve etkili bir kimlik do\u011frulama mekanizmas\u0131 ekleyece\u011finizi ke\u015ffedeceksiniz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/","og_locale":"tr_TR","og_type":"article","og_title":"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?","og_description":"Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 olan kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (authentication), verilerinizi ve kullan\u0131c\u0131 deneyimini g\u00fcvence alt\u0131na alman\u0131n temelidir. React uygulamalar\u0131n\u0131zda g\u00fcvenli bir giri\u015f sistemi kurmak, hassas bilgileri koruman\u0131n ve ki\u015fiselle\u015ftirilmi\u015f hizmetler sunman\u0131n ilk ad\u0131m\u0131d\u0131r. Bu kapsaml\u0131 rehberde, React projelerinize ad\u0131m ad\u0131m nas\u0131l g\u00fcvenli ve etkili bir kimlik do\u011frulama mekanizmas\u0131 ekleyece\u011finizi ke\u015ffedeceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-07T09:23:13+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"23 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?","datePublished":"2026-01-07T09:23:13+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/"},"wordCount":3739,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/","url":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/","name":"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-07T09:23:13+00:00","description":"Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 olan kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (authentication), verilerinizi ve kullan\u0131c\u0131 deneyimini g\u00fcvence alt\u0131na alman\u0131n temelidir. React uygulamalar\u0131n\u0131zda g\u00fcvenli bir giri\u015f sistemi kurmak, hassas bilgileri koruman\u0131n ve ki\u015fiselle\u015ftirilmi\u015f hizmetler sunman\u0131n ilk ad\u0131m\u0131d\u0131r. Bu kapsaml\u0131 rehberde, React projelerinize ad\u0131m ad\u0131m nas\u0131l g\u00fcvenli ve etkili bir kimlik do\u011frulama mekanizmas\u0131 ekleyece\u011finizi ke\u015ffedeceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37516"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37516\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":37516,"date":"2026-01-07T12:23:13","date_gmt":"2026-01-07T09:23:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/"},"modified":"2026-01-07T12:23:13","modified_gmt":"2026-01-07T09:23:13","slug":"kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/kimlik-dogrulama-ve-yetkilendirme-temel-kavramlar-neden-onemlidir\/","title":{"rendered":"Kimlik Do\u011frulama ve Yetkilendirme: Temel Kavramlar Neden \u00d6nemlidir?"},"content":{"rendered":"