{"id":680,"date":"2022-05-02T00:52:28","date_gmt":"2022-05-02T00:52:28","guid":{"rendered":"https:\/\/okankaradag.com\/?p=680"},"modified":"2022-05-02T00:54:36","modified_gmt":"2022-05-02T00:54:36","slug":"react-ile-authentication-ve-rol-bazli-authorize","status":"publish","type":"post","link":"https:\/\/okankaradag.com\/en\/react\/react-ile-authentication-ve-rol-bazli-authorize","title":{"rendered":"React Authentication and Role Based Authorize"},"content":{"rendered":"<p>Hi guys, At this post, we will examine and do  a user login, page by page permission, token storage and role based authorization on a react project using react router and typescript<\/p>\n\n\n\n<p>We will use libraries in the following at the project. You could do  it without typescript as well.<\/p>\n\n\n\n<ul><li>React 18<\/li><li>React Router v6<\/li><li>Typescript 4.6<\/li><\/ul>\n\n\n\n<p>You can find github link of the project at end of the post.<\/p>\n\n\n\n<p>Jwt will be frequently mentioned in this post so for you can read this post: <a href=\"https:\/\/okankaradag.com\/en\/asp-net-5\/json-web-token-jwt-nedir-net-core-5-0-ortaminda-nasil-kullanilir\/\">What is Jwt?<\/a><\/p>\n\n\n\n<h5 id=\"giris\">Intro<\/h5>\n\n\n\n<p>Let's define routes in App.tsx\/js<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts decode:true\"> &lt;div classname=&quot;App&quot;&gt;\n    &lt;routes&gt;\n        &lt;route path=&quot;\/&quot; element=&quot;{&lt;HomeLayout&quot; \/&gt;}&gt;&lt;\/Route&gt;\n        &lt;route element=&quot;{&lt;Adminlayout&quot; \/&gt;}&gt;\n            &lt;route path=&quot;private2\/private&quot; element=&quot;{&lt;Private2&quot; \/&gt;} \/&gt;\n            &lt;route path=&quot;private&quot; element=&quot;{&lt;PrivatePage&quot; \/&gt;} \/&gt;\n        &lt;\/Route&gt;\n        &lt;route path=&quot;login&quot; element=&quot;{&lt;Login&quot; \/&gt;}&gt;&lt;\/Route&gt;\n        &lt;route path=&quot;*&quot; element=&quot;{&lt;p&quot;&gt;Not Found&lt;\/p&gt;}&gt;&lt;\/route&gt;\n    &lt;\/routes&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p><strong>HomeLayout <\/strong>is public page. don't need auth.<br><strong>AdminLayout <\/strong>: pages where that require authentication.<\/p>\n\n\n\n<p><strong>AdminLayout.tsx :<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts decode:true\">import { Outlet } from &quot;react-router-dom&quot;;\n\nconst Adminlayout = () =&gt; {\n  return (\n    &lt;div&gt;\n      &lt;h3&gt;Admin layout&lt;\/h3&gt;\n      &lt;outlet \/&gt;\n    &lt;\/div&gt;\n  );\n};\nexport default Adminlayout;<\/pre><\/div>\n\n\n\n<p><strong>&lt;Outlet \/&gt;<\/strong> We'll do a component called PrivateRoute. The component will check whether user's login. If user was login, the component will be render, if not redirect login page.<\/p>\n\n\n\n<p>Bu sayfalar\u0131 korumak i\u00e7in bir PrivateRoute ad\u0131nda bir component yapaca\u011f\u0131z. Bu component giri\u015f yap\u0131p yapmad\u0131\u011f\u0131n\u0131 kontrol edece\u011fiz e\u011fer ki giri\u015f yapm\u0131\u015f ise ilgili componenti render edece\u011fiz de\u011filse login sayfas\u0131na y\u00f6nlendirece\u011fiz.<\/p>\n\n\n\n<p><strong>PrivateRoute.tsx<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts decode:true\">import { Navigate, useLocation } from \"react-router-dom\";\nimport useAuth from \".\/useAuth\";\n\ninterface IPrivateProps {\n  children: React.ReactNode;\n}\nconst PrivateRoute = ({ children }: IPrivateProps) =&gt; {\n  const { isAuthenticated } = useAuth();\n  const location = useLocation();\n  return (\n    &lt;&gt;\n      {isAuthenticated ? (\n        children\n      ) : (\n        &lt;Navigate to={\"\/login\"} replace state={{ location }} \/&gt;\n      )}\n    &lt;\/&gt;\n  );\n};\nexport default PrivateRoute;<\/pre><\/div>\n\n\n\n<p><strong>useAuth<\/strong>is hook that we'll do auth process. the hook return authenticate status of user for now. next time we'll complex.<\/p>\n\n\n\n<p class=\" translation-block\">Let's use <strong>PrivateRoute <\/strong> at <strong>app.tsx<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts decode:true\">&lt;Route element={&lt;PrivateRoute&gt;&lt;Adminlayout \/&gt;&lt;\/PrivateRoute&gt; } &gt;\n    &lt;Route path=\"private2\/private\" element={&lt;Private2 \/&gt;} \/&gt;\n    &lt;Route path=\"private\" element={&lt;PrivatePage \/&gt;} \/&gt;\n&lt;\/Route&gt;<\/pre><\/div>\n\n\n\n<p class=\" translation-block\">when a request is made as \/private, PrivateRoute will trigger before AdminAlyout and it will check some controllers. if the result is success, PrivatePage will be render otherwise will redirect to login page.<\/p>\n\n\n\n<p>at now let's go into detail.<\/p>\n\n\n\n<h5 id=\"kullanicin-login-olmasi-ve-bilgilerinin-tutulma-islemi\">User's login and Token storage<\/h5>\n\n\n\n<p>After User has succesfully logged in then, server return token, this token type is jwt. We need storage to the token on browser for as not to call again. we have two options. These are Cookie and Local\/Session Storage. The both have advantage and disadvantage as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/cookie-vs-local-storage.png\" alt=\"\" class=\"wp-image-697\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/cookie-vs-local-storage.png 1024w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/cookie-vs-local-storage-300x225.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/cookie-vs-local-storage-768x576.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/cookie-vs-local-storage-16x12.png 16w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Cookie vs Storage<\/figcaption><\/figure>\n\n\n\n<h5 id=\"cookie\">Cookie <\/h5>\n\n\n\n<p class=\" translation-block\">It storage data as key-value. If data is saved as <strong>HttpOnly <\/strong>= true, it cannot access and changed with <strong>javascript <\/strong>, only server can access it. should not set as true if required on client-side. <strong>Expire <\/strong>time could set. if not set, cookie is deleted when tab is closed. Can access cookies where HttpOnly is false with <strong>document.cookie<\/strong> .  In this state occurs some vulnerabilities. One of these is <strong>CSRF <\/strong>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>CSRF is a type of attack. It can introduce unwanted events in the user's post operations.<\/p><\/blockquote>\n\n\n\n<h5 id=\"local-seesion-storage\">Local\/Seesion Storage<\/h5>\n\n\n\n<p>The data storage as key-value like Cookie. It cannot access from server. Can only access with LocalStorage api at javascript. the vulnerability of this is XSS. when you send data found in localstorage as post, can do inject jscode injection.<\/p>\n\n\n\n<p class=\" translation-block\">we will storage on cookie in this post. At now we will write service named <strong>tokenUtil.ts<\/strong> that will do read\/write from cookie.<\/p>\n\n\n\n<p><strong>tokenUtil.ts:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts decode:true\">import jwtDecode from \"jwt-decode\";\n\nconst decodeToken = &lt;T&gt;(token: string) =&gt; {\n  try {\n    return jwtDecode&lt;T&gt;(token);\n  } catch (e) {\n    return null;\n  }\n};\nconst getToken = () =&gt; {\n  return document.cookie\n    .split(\"; \")\n    .find((row) =&gt; row.startsWith(\"token=\"))\n    ?.split(\"=\")[1];\n};\nconst setTokenToCookie = (token: string) =&gt; {\n  document.cookie = `token=${token}; path=\/`;\n};\nexport { decodeToken, getToken, setTokenToCookie };<\/pre><\/div>\n\n\n\n<p class=\" translation-block\"><strong>jwt-decode<\/strong> convert a object to token. if not valid return null. can upload with npm.<\/p>\n\n\n\n<p>We will storage on context to decoded token thus other components on component tree can access info at token. Let's create a component called AuthContext.tsx.<\/p>\n\n\n\n<p><strong>AuthContext<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts decode:true\">interface IAuthProps {\n  children: ReactNode;\n}\nconst AuthContext = createContext({\n  token: \"\",\n  onLogin: (token: string) =&gt; {},\n  onLogout: () =&gt; {},\n});<\/pre><\/div>\n\n\n\n<p><strong>Provider<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts decode:true\">const AuthProvider = ({ children }: IAuthProps) =&gt; {\n  const navigate = useNavigate();\n  const location = useLocation();\n  const [token, setToken] = useState(getToken() || \"\");\n  const handleLogout = () =&gt; {\n    setToken(\"\");\n    setTokenToCookie(\"\");\n  };\n  const handleLogin = (token: string) =&gt; {\n    setToken(token);\n    setTokenToCookie(token);\n    var returnPath = Object.values(location.state as Location);\n    navigate(returnPath[0].pathname || \"\/admin\");\n  };\n  const value = {\n    token,\n    onLogout: handleLogout,\n    onLogin: handleLogin,\n  };\n\n  return &lt;AuthContext.Provider value={value}&gt;{children}&lt;\/AuthContext.Provider&gt;;\n};<\/pre><\/div>\n\n\n\n<p><strong>useLocation <\/strong>ile kullan\u0131c\u0131n\u0131n redirect olmas\u0131n\u0131 istedi\u011fi sayfan\u0131n bilgilerini al\u0131yoruz e\u011fer direkt login sayfas\u0131na girmi\u015f ise de \/admin &#8216;e y\u00f6nlendiriyoruz. Olu\u015fturdu\u011fumuz AuthContext&#8221;e di\u011fer componentlerin eri\u015febilmesi i\u00e7in App.tsx de \u00fcst component olarak ekleyelim.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:xhtml decode:true\">&lt;AuthProvider&gt;\n...Route\n...Route\n...\n&lt;\/AuthProvider&gt;\n<\/pre><\/div>\n\n\n\n<p>\u015eimdi useAuth hooksundan contextin verilerini okuyup tokeni decode edip kontrol edebiliriz<\/p>\n\n\n\n<p><strong>useAuth.ts<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true\">interface IAuth {\n  isAuthenticated: boolean;\n  name: string;\n}\nconst useAuth = () =&gt; {\n  var { token } = useContext(AuthContext);\n  var auth = decodeToken&lt;IAuth&gt;(token);\n  var isAuthenticated = false;\n  if (auth) {\n    isAuthenticated = auth.isAuthenticated;\n  }\n\n  return { isAuthenticated };\n};\nexport default useAuth;<\/pre><\/div>\n\n\n\n<p>token nesnemiz decode oldu\u011funda IAuth tipinde bekliyoruz b\u00f6yle de\u011filse null d\u00f6necektir. \u015fimdi de Login sayfam\u0131zda bir context arac\u0131l\u0131\u011f\u0131yla login olal\u0131m<\/p>\n\n\n\n<p><strong>Login.tsx:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true\">const Login = () =&gt; {\n  const { isAuthenticated } = useAuth();\n  const { onLogin } = useContext(AuthContext);\n  const signIn = () =&gt; {\n    \/\/api return token\n    setToken(\n      &quot;eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ik9rYW4gQ2FuIEthcmFkYcSfIiwiaXNBdXRoZW50aWNhdGVkIjp0cnVlfQ.RwRNm0GPuL_aZF0TI1Lw3i1MsGJRjsndC-iGot7hPOo&quot;\n    );\n  };\n  const setToken = (token: string) =&gt; {\n    onLogin(token);\n  };\n  return isAuthenticated ? (\n    &lt;navigate to=&quot;\/&quot; \/&gt;) : (\n    &lt;div&gt;\n      &lt;h1&gt;Login Page&lt;\/h1&gt;\n      &lt;button type=&quot;button&quot; onclick=&quot;{()&quot; &gt; signIn()}&gt;\n        Sign in\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n};\nexport default Login;<\/pre><\/div>\n\n\n\n<p>Bir apimiz olmad\u0131\u011f\u0131 i\u00e7in <a href=\"https:\/\/jwt.io\" target=\"_blank\" rel=\"noreferrer noopener\">jwt.io<\/a> \u00fczerinden IAuth tipinde bir token olu\u015fturdum. Siz de buradan bir token olu\u015fturabilirsiniz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"605\" height=\"420\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/04\/Screenshot_193.png\" alt=\"\" class=\"wp-image-687\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/04\/Screenshot_193.png 605w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/04\/Screenshot_193-300x208.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/04\/Screenshot_193-18x12.png 18w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/figure>\n\n\n\n<p>Art\u0131k \/private istek att\u0131\u011f\u0131m\u0131zda bir token do\u011frulamas\u0131 yap\u0131p ona g\u00f6re y\u00f6nlendirme yapacak.<\/p>\n\n\n\n<h5 id=\"role-bazli-yetkilendirme\">Role Bazl\u0131 Yetkilendirme<\/h5>\n\n\n\n<p>\u015eimdi authenticate i\u015flemlerini gayet  g\u00fczel bir \u015fekilde yapt\u0131k. Ama baz\u0131 sayfalar i\u00e7in kullan\u0131c\u0131n\u0131n sadece giri\u015f yapmas\u0131 yetmeyebilir \u00f6rne\u011fin sadece adminlerin eri\u015febiliece\u011fi ya da manager rol\u00fcndeki kullan\u0131c\u0131lar\u0131n eri\u015febilece\u011fi sayfalar olabilir bunlar i\u00e7inde bir kontrol yapmam\u0131z laz\u0131m e\u011fer izni olmayan bir sayfaya eri\u015fim sa\u011flamaya \u00e7al\u0131\u015ft\u0131ysa da bir y\u00f6nlendirme yapal\u0131m.<\/p>\n\n\n\n<p>Roles ad\u0131nda bir parametre ekleyece\u011fiz ve bunu private route arac\u0131l\u0131\u011f\u0131yla props olarak g\u00f6nderece\u011fiz ve a\u015fa\u011f\u0131daki \u015fekilde bir algoritma olacak<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"736\" height=\"641\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/Authenticate-Authorize-Diagram.png\" alt=\"\" class=\"wp-image-691\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/Authenticate-Authorize-Diagram.png 736w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/Authenticate-Authorize-Diagram-300x261.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/Authenticate-Authorize-Diagram-14x12.png 14w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><figcaption>Giri\u015f &#8211; Y\u00f6nlendirme Algoritmas\u0131<\/figcaption><\/figure>\n\n\n\n<p>Yukar\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi e\u011fer kullan\u0131c\u0131 giri\u015f yapmam\u0131\u015f ise login page y\u00f6nlendirme yap\u0131yoruz login olduysa giri\u015f yapmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131 sayfan\u0131n bir yetkilendirmesi var m\u0131 ona bak\u0131yoruz e\u011fer sayfa da ekstra bir izin yoksa sayfay\u0131 g\u00f6steriyoruz ama e\u011fer bir izin gerekiyorsa kullan\u0131c\u0131n\u0131n yetkilerine bak\u0131yoruz yetkilerinde bu sayfaya eri\u015fim var ise sayfay\u0131 g\u00f6steriyoruz yok ise yetkiniz yok \u015feklinde bir mesaj g\u00f6steriyoruz.<\/p>\n\n\n\n<p>\u015eimdi yukar\u0131daki mant\u0131\u011f\u0131 i\u015fletmemiz i\u00e7in bir role mant\u0131\u011f\u0131 ekleyece\u011fiz sayfan\u0131n eri\u015fim izni verdi\u011fi roller ve kullan\u0131c\u0131ya ait roller. ve i\u015f katman\u0131m\u0131zda bunlar\u0131 kontrol edece\u011fiz.<\/p>\n\n\n\n<p><strong>PrivateRoute.tsx<\/strong> i\u00e7ine bir tane roles ad\u0131nda nullable parametre ekleyelim.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts mark:5,6,9,11 decode:true\">interface IPrivateProps {\n  children?: React.ReactNode;\n  roles?: string[];\n}\nconst PrivateRoute = ({ children, roles }: IPrivateProps) =&gt; {\n  const { isAuthenticated, isAllow } = useAuth({ roles });\n  const location = useLocation();\n  if (!isAuthenticated) {\n    return &lt;navigate to=&quot;{&quot;\/login&quot;}&quot; replace state=&quot;{{&quot; location }} \/&gt;;\n  }\n  return &lt;&gt;{isAllow ? children : &lt;div&gt;You are not allowed to access this page&lt;\/div&gt;}&lt;\/&gt;;\n};<\/pre><\/div>\n\n\n\n<p>useAuth hooksu ile rolleri kontrol edece\u011fiz.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ts mark:3,5,6,7,12,15 decode:true\">interface IAuth {\n  isAuthenticated: boolean;\n  name: string;\n  roles?: string[];\n}\ninterface IAuthProps {\n  roles?: string[];\n}\nconst useAuth = (props?: IAuthProps) =&gt; {\n  var { token } = useContext(AuthContext);\n  var auth = decodeToken&lt;IAuth&gt;(token);\n  var isAuthenticated = false;\n  var isAllow = true;\n  if (auth) {\n    isAuthenticated = auth.isAuthenticated;\n    if (isAuthenticated &amp;&amp; props &amp;&amp; props.roles) {\n      isAllow = props.roles.some((role) =&gt; auth?.roles?.includes(role));\n    }\n  }\n  return { isAuthenticated, isAllow };\n};<\/pre><\/div>\n\n\n\n<p>\u015fimdi ise uygulama da g\u00f6sterelim \u00f6nce <strong>jwt.io<\/strong> \u00fczerinden objemize roles ekleyelim<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"590\" height=\"298\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/jwt-object.png\" alt=\"\" class=\"wp-image-693\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/jwt-object.png 590w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/jwt-object-300x152.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/jwt-object-18x9.png 18w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><\/figure>\n\n\n\n<p>olu\u015fturdu\u011funuz tokeni eklemeyi unutmay\u0131n.<\/p>\n\n\n\n<p>\u0130stedi\u011fimiz sayfan\u0131n <strong>roles propuna<\/strong> yazarak kontrol sa\u011flayabiliriz.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true\">&lt;Route \n    path=\"admin\/manager\"\n    element={\n             &lt;PrivateRoute roles={[\"manager\"]}&gt;\n                  &lt;Private2 \/&gt;\n              &lt;\/PrivateRoute&gt;\n             }\n\/&gt;<\/pre><\/div>\n\n\n\n<h5 id=\"sonuc\">Sonu\u00e7<\/h5>\n\n\n\n<p>\u0130lk olarak \u015funu unutmay\u0131n\u0131z, <strong>browser taraf\u0131nda ne yaparsak yapal\u0131m buradaki b\u00fct\u00fcn koruma a\u015f\u0131labilir<\/strong>. Burada yapt\u0131klar\u0131m\u0131z sadece kullan\u0131c\u0131y\u0131 d\u00fczg\u00fcn y\u00f6nlendirebilmemiz i\u00e7in, \u00f6nemli olan API\/Servis taraf\u0131nda g\u00fcvenlik sa\u011flamakt\u0131r. O y\u00fczden \u00f6nemli i\u015flemlerinizi clienta koymamal\u0131y\u0131z.<br>Genel olarak bu g\u00f6nderide bir kullan\u0131c\u0131n\u0131n giri\u015f yapma ser\u00fcvenini inceledik. Neler olabilece\u011fini sayfalar\u0131n g\u00fcvenli\u011fini nas\u0131l sa\u011flayaca\u011f\u0131m\u0131z\u0131 ve y\u00f6nlendirmeleri nas\u0131l yapabilece\u011fimizi \u00f6\u011frendik. Projenin linkine a\u015fa\u011f\u0131dan ula\u015fabilirsiniz.<\/p>\n\n\n\n<p>Proje Linki : <a href=\"https:\/\/github.com\/okankrdg\/React-Authorize-Authentication\">okankrdg\/React-Authorize-Authentication (github.com)<\/a><\/p>\n\n\n\n<p>Okudu\u011funuz i\u00e7in Te\u015fekk\u00fcrler \u0130yi \u00c7al\u0131\u015fmalar \ud83d\ude42<br><\/p>","protected":false},"excerpt":{"rendered":"<p>In this article, We're going to look these topics that are auth process withreact-router, react and typescript, page permission, token storage, role based authorization.<\/p>","protected":false},"author":1,"featured_media":700,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,22,75,79],"tags":[94,95,77,48,80],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React ile Authentication ve Rol Bazl\u0131 Yetkilendirme - Okan Karada\u011f<\/title>\n<meta name=\"description\" content=\"React react router ve typescript ile login olma, sayfalara eri\u015fim izni, tokeni saklama ve sayfalarda rol bazl\u0131 yetkilendirmeleri inceleyece\u011fiz\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/okankaradag.com\/en\/react\/react-ile-authentication-ve-rol-bazli-authorize\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme - Okan Karada\u011f\" \/>\n<meta property=\"og:description\" content=\"React react router ve typescript ile login olma, sayfalara eri\u015fim izni, tokeni saklama ve sayfalarda rol bazl\u0131 yetkilendirmeleri inceleyece\u011fiz\" \/>\n<meta property=\"og:url\" content=\"https:\/\/okankaradag.com\/en\/react\/react-ile-authentication-ve-rol-bazli-authorize\/\" \/>\n<meta property=\"og:site_name\" content=\"Okan Karada\u011f\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-02T00:52:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-02T00:54:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/Auth.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"733\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Okan Karada\u011f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Okan Karada\u011f\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize#article\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize\"},\"author\":{\"name\":\"Okan Karada\u011f\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"headline\":\"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme\",\"datePublished\":\"2022-05-02T00:52:28+00:00\",\"dateModified\":\"2022-05-02T00:54:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize\"},\"wordCount\":1125,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"keywords\":[\"authentication\",\"How to login in react\",\"reactjs\",\"Role based Authorization\",\"typescript\"],\"articleSection\":[\"JavaScript\",\"Oauth\",\"React\",\"TypeScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize\",\"url\":\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize\",\"name\":\"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme - Okan Karada\u011f\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/#website\"},\"datePublished\":\"2022-05-02T00:52:28+00:00\",\"dateModified\":\"2022-05-02T00:54:36+00:00\",\"description\":\"React react router ve typescript ile login olma, sayfalara eri\u015fim izni, tokeni saklama ve sayfalarda rol bazl\u0131 yetkilendirmeleri inceleyece\u011fiz\",\"breadcrumb\":{\"@id\":\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/okankaradag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/okankaradag.com\/#website\",\"url\":\"https:\/\/okankaradag.com\/\",\"name\":\"Okan Karada\u011f\",\"description\":\"Programlama \u00dczerine\",\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/okankaradag.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\",\"name\":\"Okan Karada\u011f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"caption\":\"Okan Karada\u011f\"},\"logo\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/okankaradag.com\"],\"url\":\"https:\/\/okankaradag.com\/en\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme - Okan Karada\u011f","description":"React react router ve typescript ile login olma, sayfalara eri\u015fim izni, tokeni saklama ve sayfalarda rol bazl\u0131 yetkilendirmeleri inceleyece\u011fiz","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:\/\/okankaradag.com\/en\/react\/react-ile-authentication-ve-rol-bazli-authorize\/","og_locale":"en_US","og_type":"article","og_title":"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme - Okan Karada\u011f","og_description":"React react router ve typescript ile login olma, sayfalara eri\u015fim izni, tokeni saklama ve sayfalarda rol bazl\u0131 yetkilendirmeleri inceleyece\u011fiz","og_url":"https:\/\/okankaradag.com\/en\/react\/react-ile-authentication-ve-rol-bazli-authorize\/","og_site_name":"Okan Karada\u011f","article_published_time":"2022-05-02T00:52:28+00:00","article_modified_time":"2022-05-02T00:54:36+00:00","og_image":[{"width":1100,"height":733,"url":"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/05\/Auth.jpg","type":"image\/jpeg"}],"author":"Okan Karada\u011f","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Okan Karada\u011f","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize#article","isPartOf":{"@id":"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize"},"author":{"name":"Okan Karada\u011f","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"headline":"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme","datePublished":"2022-05-02T00:52:28+00:00","dateModified":"2022-05-02T00:54:36+00:00","mainEntityOfPage":{"@id":"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize"},"wordCount":1125,"commentCount":0,"publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"keywords":["authentication","How to login in react","reactjs","Role based Authorization","typescript"],"articleSection":["JavaScript","Oauth","React","TypeScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize#respond"]}]},{"@type":"WebPage","@id":"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize","url":"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize","name":"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme - Okan Karada\u011f","isPartOf":{"@id":"https:\/\/okankaradag.com\/#website"},"datePublished":"2022-05-02T00:52:28+00:00","dateModified":"2022-05-02T00:54:36+00:00","description":"React react router ve typescript ile login olma, sayfalara eri\u015fim izni, tokeni saklama ve sayfalarda rol bazl\u0131 yetkilendirmeleri inceleyece\u011fiz","breadcrumb":{"@id":"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/okankaradag.com\/react\/react-ile-authentication-ve-rol-bazli-authorize#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/okankaradag.com\/"},{"@type":"ListItem","position":2,"name":"React ile Authentication ve Rol Bazl\u0131 Yetkilendirme"}]},{"@type":"WebSite","@id":"https:\/\/okankaradag.com\/#website","url":"https:\/\/okankaradag.com\/","name":"Okan Karada\u011f","description":"Programlama \u00dczerine","publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/okankaradag.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52","name":"Okan Karada\u011f","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","caption":"Okan Karada\u011f"},"logo":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/okankaradag.com"],"url":"https:\/\/okankaradag.com\/en\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/680"}],"collection":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/comments?post=680"}],"version-history":[{"count":13,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/680\/revisions"}],"predecessor-version":[{"id":701,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/680\/revisions\/701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media\/700"}],"wp:attachment":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media?parent=680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/categories?post=680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/tags?post=680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}