{"id":1944,"date":"2025-01-13T13:27:25","date_gmt":"2025-01-13T05:27:25","guid":{"rendered":"https:\/\/www.tonghin.com.my\/blog\/?p=1944"},"modified":"2025-01-13T13:27:26","modified_gmt":"2025-01-13T05:27:26","slug":"exploring-token-based-authorization-in-ui-development","status":"publish","type":"post","link":"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/","title":{"rendered":"Exploring Token-Based Authorization in UI Development"},"content":{"rendered":"\n<p>Monday, January 6 2025 \u2013 Last week, I focused on developing the UI for the sign-in functionality. During this process, I discovered an intriguing security feature: the token received from the API is frequently used to retrieve data that requires authorization. This piqued my interest, as I had always wondered how authorization is managed on the front end.<\/p>\n\n\n\n<p>The token is retrieved and then stored in a cookie. A cookie is a small piece of data stored on the user&#8217;s device by their web browser. It allows the website to remember information about the user, such as authentication details, across sessions or requests.<\/p>\n\n\n\n<p>In addition to the sign-in page, I worked on creating related UI elements, such as the edit page. One aspect I found particularly interesting was the process of calling an API to retrieve an entity. To ensure that the user making the request has the necessary privileges, the token must be sent for validation. Unlike passing an ID directly in the URL, which could expose sensitive data, the token is sent securely in the request headers.<\/p>\n\n\n\n<p>This was my first time encountering token-based authorization in this way, and it was a fascinating learning experience.<\/p>\n\n\n\n<p>Next, I shifted to working on another entity. I started by designing the UI, incorporating a dropdown button that supports nested input fields. These fields are dynamically populated based on data retrieved from the API. Once the UI was complete, I moved to the backend to create the API query list that the UI would use.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Monday, January 6 2025 \u2013 Last week, I focused on developing the UI for the sign-in functionality. During this process, I discovered an intriguing security feature: the token received from the API is frequently used to retrieve data that requires authorization. This piqued my interest, as I had always wondered how authorization is managed on &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Exploring Token-Based Authorization in UI Development&#8221;<\/span><\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Exploring Token-Based Authorization in UI Development | Tong Hin&#039;s Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Exploring Token-Based Authorization in UI Development | Tong Hin&#039;s Blog\" \/>\n<meta property=\"og:description\" content=\"Monday, January 6 2025 \u2013 Last week, I focused on developing the UI for the sign-in functionality. During this process, I discovered an intriguing security feature: the token received from the API is frequently used to retrieve data that requires authorization. This piqued my interest, as I had always wondered how authorization is managed on &hellip; Continue reading &quot;Exploring Token-Based Authorization in UI Development&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Tong Hin&#039;s Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-13T05:27:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-13T05:27:26+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\",\"name\":\"TONG HIN MACHINERY\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"sameAs\":[\"https:\/\/www.youtube.com\/channel\/UC60EoxJMNbu8mV0LuEGfrBg\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/wp-content\/uploads\/2020\/10\/web_logo_180_180.jpg\",\"width\":180,\"height\":180,\"caption\":\"TONG HIN MACHINERY\"},\"image\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#website\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"name\":\"Tong Hin&#039;s Blog\",\"description\":\"Sharing About Technology\",\"publisher\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.tonghin.com.my\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/#webpage\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/\",\"name\":\"Exploring Token-Based Authorization in UI Development | Tong Hin&#039;s Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#website\"},\"datePublished\":\"2025-01-13T05:27:25+00:00\",\"dateModified\":\"2025-01-13T05:27:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/\",\"name\":\"Exploring Token-Based Authorization in UI Development\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#\/schema\/person\/81e2366362d8d14b15519395755cee6f\"},\"headline\":\"Exploring Token-Based Authorization in UI Development\",\"datePublished\":\"2025-01-13T05:27:25+00:00\",\"dateModified\":\"2025-01-13T05:27:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/01\/13\/exploring-token-based-authorization-in-ui-development\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\"},\"articleSection\":\"Experiential\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#\/schema\/person\/81e2366362d8d14b15519395755cee6f\",\"name\":\"nurlailiyuzi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5c0d4cc6f7fc881bd56d95bdbb0c4c14?s=96&d=mm&r=g\",\"caption\":\"nurlailiyuzi\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1944"}],"collection":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/comments?post=1944"}],"version-history":[{"count":1,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1944\/revisions"}],"predecessor-version":[{"id":1945,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1944\/revisions\/1945"}],"wp:attachment":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/media?parent=1944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/categories?post=1944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/tags?post=1944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}