{"id":11570,"date":"2024-04-12T15:17:33","date_gmt":"2024-04-12T08:47:33","guid":{"rendered":"https:\/\/www.spiceworksmyanmar.com\/blog\/?p=11570"},"modified":"2024-04-12T15:17:33","modified_gmt":"2024-04-12T08:47:33","slug":"how-to-store-and-send-bearer-token-securely-in-the-browser","status":"publish","type":"post","link":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/","title":{"rendered":"How to store and send Bearer Token securely in the browser?"},"content":{"rendered":"<p>\u1019\u1004\u103a\u1039\u1002\u101c\u102c\u1015\u102b\u104b<br \/>\n\u1000\u103b\u103d\u1014\u103a\u1010\u1031\u102c\u103a\u1000\u1010\u1031\u102c\u1037 Spiceworks Myanmar \u1019\u103e\u102c Backend Developer \u1021\u1014\u1031\u1014\u1032\u1037 \u1010\u102c\u101d\u1014\u103a\u101a\u1030\u101c\u102f\u1015\u103a\u1000\u102d\u102f\u1004\u103a\u1014\u1031\u1010\u1032\u1037 \u101e\u102f\u1010\u101a\u102c\u1019\u102d\u102f\u1038 \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1012\u102e\u1010\u1005\u103a\u1001\u1031\u102b\u1000\u103a\u1019\u103e\u102c\u1010\u1031\u102c\u1037 How to store and send Bearer Token securely in the browser \u1006\u102d\u102f\u1010\u1032\u1037 \u1001\u1031\u102b\u1004\u103a\u1038\u1005\u1025\u103a\u1014\u103e\u1004\u103a\u1037\u1015\u1010\u103a\u101e\u1000\u103a\u1015\u103c\u102e\u1038 \u1010\u1004\u103a\u1015\u103c\u1015\u1031\u1038\u101e\u103d\u102c\u1038\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b user \u1010\u103d\u1031\u101b\u1032\u1037 \u1021\u101b\u1031\u1038\u1000\u103c\u102e\u1038\u1010\u1032\u1037 data \u1010\u103d\u1031\u1000\u102d\u102f \u1001\u103d\u1004\u103a\u1037\u1015\u103c\u102f\u1001\u103b\u1000\u103a\u1019\u101b\u103e\u102d\u1018\u1032 \u101d\u1004\u103a\u101b\u1031\u102c\u1000\u103a\u1001\u103c\u1004\u103a\u1038\u1019\u103e\u1000\u102c\u1000\u103d\u101a\u103a\u101b\u1014\u103a Bearer token \u1000\u102d\u102f \u101c\u102f\u1036\u1001\u103c\u102f\u1036\u1005\u103d\u102c\u1011\u102c\u1038\u1016\u102d\u102f\u1037\u1000 \u1021\u101b\u1031\u1038\u1000\u103c\u102e\u1038\u1015\u102b\u1010\u101a\u103a\u104b<br \/>\nAPI Authentication \u1010\u1005\u103a\u1001\u102f \u1021\u1031\u102c\u1004\u103a\u1019\u103c\u1004\u103a\u101e\u103d\u102c\u1038\u1010\u1032\u1037\u1021\u1001\u102b\u1019\u103e\u102c Access Token, Refresh token, Token Type \u1014\u103e\u1004\u103a\u1037 Expiration Time \u1021\u1005\u101b\u103e\u102d\u1010\u1032\u1037 data \u1010\u103d\u1031\u1000\u102d\u102f \u1015\u103c\u1014\u103a\u101c\u100a\u103a\u1015\u1031\u1038\u1015\u102d\u102f\u1037\u1015\u1031\u1038\u101c\u1031\u1037\u101b\u103e\u102d\u1015\u102b\u1010\u101a\u103a\u104b \u1011\u102d\u102f\u1021\u1011\u1032\u1019\u103e Access Token \u1014\u103e\u1004\u103a\u1037 Refresh Token \u1010\u103d\u1031\u1000\u102d\u102f \u101c\u102f\u1036\u1001\u103c\u102f\u1036\u1005\u103d\u102c\u101e\u102d\u1019\u103a\u1038\u1006\u100a\u103a\u1038\u1016\u102d\u102f\u1037 \u101c\u102d\u102f\u1021\u1015\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1011\u102d\u102f data \u1019\u103b\u102c\u1038\u1000\u102d\u102f \u101c\u102f\u1036\u1001\u103c\u102f\u1036\u1005\u103d\u102c\u101e\u102d\u1019\u103a\u1038\u1006\u100a\u103a\u1038\u1014\u102d\u102f\u1004\u103a\u1019\u100a\u103a\u1037 \u1014\u100a\u103a\u1038\u101c\u1019\u103a\u1038\u1010\u1005\u103a\u1001\u102f\u1000\u1010\u1031\u102c\u1037 Access Token \u1000\u102d\u102f Local Storage, Cookies \u1010\u102d\u102f\u1037\u1019\u103e\u102c \u101e\u102d\u1019\u103a\u1038\u1010\u102c\u1019\u103b\u102d\u102f\u1038\u1019\u101f\u102f\u1010\u103a\u1018\u1032 Memory \u1011\u1032\u1019\u103e\u102c \u101e\u102d\u1019\u103a\u1038\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1011\u102d\u102f\u1037\u1014\u1031\u102c\u1000\u103a Refresh Token \u1000\u102d\u102f\u1010\u1031\u102c\u1037 HTTP-only cookie \u1010\u103d\u1004\u103a \u101e\u102d\u1019\u103a\u1038\u1006\u100a\u103a\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1011\u102d\u102f\u101e\u102d\u102f\u1037\u1015\u103c\u102f\u101c\u102f\u1015\u103a\u1001\u103c\u1004\u103a\u1038\u1000\u103c\u1031\u102c\u1004\u103a\u1037 client-side \u1000\u1014\u1031 \u1011\u102d\u102f tokens \u1010\u103d\u1031\u1000\u102d\u102f access \u101c\u102f\u1015\u103a\u1001\u103c\u1004\u103a\u1038\u1019\u103e\u1010\u102c\u1038\u1006\u102e\u1038\u1014\u102d\u102f\u1004\u103a\u1015\u103c\u102e\u1038 Cross-Site Scripting (XSS) \u1010\u102d\u102f\u1000\u103a\u1001\u102d\u102f\u1000\u103a\u1019\u103e\u102f\u1019\u103b\u102c\u1038\u104f\u1021\u1014\u1039\u1010\u101b\u102c\u101a\u103a\u1010\u103d\u1031\u1000\u102d\u102f \u101c\u103b\u103e\u1031\u102c\u1037\u1001\u103b\u1014\u102d\u102f\u1004\u103a\u1019\u103e\u102c \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1011\u102d\u102f\u1037\u1015\u103c\u1004\u103a Access Token \u101b\u1032\u1037 expiration time \u1000\u102d\u102f\u1021\u1001\u103b\u102d\u1014\u103a\u1010\u102d\u102f\u101e\u102c\u1011\u102c\u1038\u1015\u103c\u102e\u1038 Refresh Token \u1000\u102d\u102f \u1021\u101e\u102f\u1036\u1038\u1015\u103c\u102f\u1000\u102c \u1019\u1000\u103c\u102c\u1001\u100f Refresh \u101c\u102f\u1015\u103a\u1001\u103c\u1004\u103a\u1038\u1021\u102c\u1038\u1016\u103c\u1004\u103a\u1037 security \u1015\u102d\u102f\u1004\u103a\u1038 leak \u1016\u103c\u1005\u103a\u1019\u103e\u102f\u1000\u102d\u102f \u101c\u103b\u103e\u1031\u102c\u1037\u1001\u103b\u1014\u102d\u102f\u1004\u103a\u1019\u103e\u102c \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u101a\u1001\u102f blog \u1019\u103e\u102c\u1010\u1031\u102c\u1037 API Authentication \u1021\u1010\u103d\u1000\u103a Laravel, Laravel Passport \u1014\u103e\u1004\u103a\u1037 Vue.js \u1010\u102d\u102f\u1037\u1000\u102d\u102f \u1021\u101e\u102f\u1036\u1038\u1015\u103c\u102f\u1000\u102c \u1016\u1031\u102c\u103a\u1015\u103c\u1015\u1031\u1038\u101e\u103d\u102c\u1038\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<br \/>\n\u1015\u1011\u1019\u1006\u102f\u1036\u1038\u1021\u1014\u1031\u1016\u103c\u1004\u103a\u1037 Laravel, Vue.js \u1014\u103e\u1004\u103a\u1037 Laravel Passport \u1010\u102d\u102f\u1037\u1000\u102d\u102f install \u101c\u102f\u1015\u103a\u1015\u102b\u1019\u101a\u103a\u104b Install \u101c\u102f\u1015\u103a\u1015\u103c\u102e\u1038\u1015\u102b\u1000 database migration \u1015\u103c\u102f\u101c\u102f\u1015\u103a\u1015\u103c\u102e\u1038 Laravel Password Grant Client \u1010\u1005\u103a\u1001\u102f create \u101c\u102f\u1015\u103a\u1015\u102b\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">\/\/Install Laravel\r\ncomposer create-project laravel\/laravel example-app\r\n\/\/Install Vue.js\r\nnpm create vite@latest my-vue-app -- --template vue\r\n\/\/Install Laravel Passport\r\ncomposer require laravel\/passport\r\n\/\/Datebase Migration\r\nphp artisan migrate\r\n\/\/Generate Laravel Password Grant Client\r\nphp artisan passport:install (or)\r\nphp artisan passport:client --password\r\n<\/pre>\n<p>routes\/api.php \u1019\u103e\u102c login, logout, refresh, me \u1021\u1005\u101b\u103e\u102d\u1010\u1032\u1037 routes \u1010\u103d\u1031\u1015\u102b\u101d\u1004\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">&lt;?php\r\nuse App\\Http\\Controllers\\AuthController;\r\nuse Illuminate\\Support\\Facades\\Route;\r\n\r\nRoute::group(['middleware' =&gt; 'auth:api'], function() {\r\n    Route::get('\/me', [AuthController::class, 'user']);\r\n});\r\nRoute::post('\/login', [AuthController::class, 'login']);\r\nRoute::post('\/logout', [AuthController::class, 'logout']);\r\nRoute::post('\/refresh', [AuthController::class, 'refresh']);\r\n<\/pre>\n<p>\u1011\u102d\u102f\u1037\u1014\u1031\u102c\u1000\u103a AuthController \u1010\u1005\u103a\u1001\u102f create \u101c\u102f\u1015\u103a\u1015\u102b\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">&lt;php\r\nnamespace App\\Http\\Controllers;\r\nuse Illuminate\\Http\\Request;\r\nuse Illuminate\\Support\\Facades\\Http;\r\n\r\nclass AuthController extends Controller\r\n{\r\n    public function login(Request $request) {\r\n        $response = Http::asForm()-&gt;post('http:\/\/passport-app.test\/oauth\/token', [\r\n            'grant_type' =&gt; 'password',\r\n            'client_id' =&gt; 'client-id',\r\n            'client_secret' =&gt; 'client-secret',\r\n            'username' =&gt; 'taylor@laravel.com',\r\n            'password' =&gt; 'my-password',\r\n            'scope' =&gt; '',\r\n        ]);\r\n\r\n        if ($response-&gt;status() == 200) {\r\n            $refreshToken = $response-&gt;json()['refresh_token'];\r\n            $refreshCookie = cookie('refresh_token', $refreshToken, 86400, '\/', null, true, true, false, 'None');\r\n            return response()-&gt;json(['token' =&gt; $response-&gt;json()['access_token']])-&gt;withCookie($refreshCookie);\r\n        }\r\n        if ($response-&gt;failed()) {\r\n            return response()-&gt;json('Unauthorized', 401);\r\n        }\r\n    }\r\n\r\n    public function user() {\r\n        return auth()-&gt;user();\r\n    }\r\n\r\n    public function refresh(Request $request) {\r\n        $refresh_token = $request-&gt;cookie('refresh_token');\r\n        $response = Http::asForm()-&gt;post('http:\/\/passport-app.test\/oauth\/token', [\r\n            'grant_type' =&gt; 'refresh_token',\r\n            'refresh_token' =&gt; 'the-refresh-token',\r\n            'client_id' =&gt; 'client-id',\r\n            'client_secret' =&gt; 'client-secret',\r\n            'scope' =&gt; '',\r\n        ]);\r\n\r\n        if ($response-&gt;status() == 200) {\r\n            $refreshToken = $response-&gt;json()['refresh_token'];\r\n            $refreshCookie = cookie('refresh_token', $refreshToken, 86400, '\/', null, true, true, false, 'None');\r\n            return response()-&gt;json(['token' =&gt; $response-&gt;json()['access_token']])-&gt;withCookie($refreshCookie);\r\n        }\r\n        if ($response-&gt;failed()) {\r\n            return response()-&gt;json('Unauthorized', 401);\r\n        }\r\n    }\r\n}\r\n<\/pre>\n<p>Login Function \u1000\u1010\u1031\u102c\u1037 client-side \u1000 \u1015\u1031\u1038\u1015\u102d\u102f\u1037\u101c\u102c\u1010\u1032\u1037 credentials \u1010\u103d\u1031\u1016\u103c\u1005\u103a\u1010\u1032\u1037 Email, Password \u1010\u102d\u102f\u1037\u1000\u102d\u102f \u1019\u103e\u1014\u103a\u1019\u1019\u103e\u1014\u103a\u1005\u1005\u103a\u1015\u103c\u102e\u1038 \u1019\u103e\u1014\u103a\u1000\u1014\u103a\u1015\u102b\u1000 Access Token, Refresh token, Token Type \u1014\u103e\u1004\u103a\u1037 Expiration Time \u1021\u1005\u101b\u103e\u102d\u1010\u1032\u1037 data \u1010\u103d\u1031\u1000\u102d\u102f client-side \u1015\u103c\u1014\u103a\u101c\u100a\u103a\u1015\u1031\u1038\u1015\u102d\u102f\u1037\u1015\u1031\u1038\u1010\u1032\u1037 Function \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b client-id \u1014\u103e\u1004\u103a\u1037 client-secret \u1010\u102d\u102f\u1037\u1014\u1031\u101b\u102c\u1019\u103e\u102c php artisan passport:install (or) php artisan passport:client &#8211;password \u1010\u102d\u102f\u1037\u1019\u103e command \u1010\u1005\u103a\u1001\u102f\u1000\u102d\u102f run \u101c\u102d\u102f\u1000\u103a\u1010\u1032\u1037\u1021\u1001\u102b\u1019\u103e\u102c\u101b\u101b\u103e\u102d\u1010\u1032\u1037 data \u1000\u102d\u102f \u1011\u100a\u103a\u1037\u101e\u103d\u1004\u103a\u1038\u1015\u1031\u1038\u101b\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<p>User Function \u1000\u1010\u1031\u102c\u1037 \u101c\u1000\u103a\u101b\u103e\u102d Authenticated user \u1000\u102d\u102f \u1015\u103c\u1014\u103a\u101c\u100a\u103a\u1015\u1031\u1038\u1015\u102d\u102f\u1037\u1010\u1032\u1037 Function \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<p>Refresh Function \u1000\u1010\u1031\u102c\u1037 client-side \u1000\u1014\u1031 \u1015\u1031\u1038\u1015\u102d\u102f\u1037\u101c\u102c\u1010\u1032\u1037 refresh token \u1000 \u1019\u103e\u1014\u103a\u1000\u1014\u103a\u1019\u103e\u102f\u101b\u103e\u102d\u1019\u101b\u103e\u102d\u104a \u101e\u1000\u103a\u1010\u1019\u103a\u1038\u1000\u102f\u1014\u103a\u101c\u102c\u1038\u1019\u1000\u102f\u1014\u103a\u101c\u102c\u1038 \u1005\u1005\u103a\u1006\u1031\u1038\u1015\u103c\u102e\u1038 \u1021\u1031\u102c\u1004\u103a\u1019\u103c\u1004\u103a\u1015\u102b\u1000 Access Token \u1021\u101e\u1005\u103a\u104a Refresh Token \u1021\u101e\u1005\u103a\u1010\u102d\u102f\u1037\u1000\u102d\u102f \u1015\u103c\u1014\u103a\u101c\u100a\u103a\u1015\u1031\u1038\u1015\u102d\u102f\u1037\u1010\u1032\u1037 Function \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<figure id=\"attachment_11576\" aria-describedby=\"caption-attachment-11576\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11576 size-large\" src=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/vue-folder-structure-1024x865.png\" alt=\"\" width=\"810\" height=\"684\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/vue-folder-structure-1024x865.png 1024w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/vue-folder-structure-300x253.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/vue-folder-structure-768x649.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/vue-folder-structure.png 1740w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><figcaption id=\"caption-attachment-11576\" class=\"wp-caption-text\">Fig (1) Vue.js Folder Structure<\/figcaption><\/figure>\n<p>Frontend \u1015\u102d\u102f\u1004\u103a\u1038\u1000\u102d\u102f \u1006\u1000\u103a\u101e\u103d\u102c\u1038\u1000\u103c\u101b\u1021\u1031\u102c\u1004\u103a\u104b Fig.(1) \u1019\u103e\u102c\u1000\u1010\u1031\u102c\u1037 vue.js folder structure \u1015\u102f\u1036\u1005\u1036\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b Vue.js \u1019\u103e\u102c\u1010\u1031\u102c\u1037 api request \u1010\u103d\u1031\u1021\u1010\u103d\u1000\u103a axios, routes \u1010\u103d\u1031\u1021\u1010\u103d\u1000\u103a vue-router \u1014\u103e\u1004\u103a\u1037 state management \u1021\u1010\u103d\u1000\u103a pinia \u1021\u1005\u101b\u103e\u102d\u1010\u1032\u1037 package \u1010\u103d\u1031\u1000\u102d\u102f \u1021\u101e\u102f\u1036\u1038\u1015\u103c\u102f\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1021\u1006\u102d\u102f\u1015\u102b package \u1019\u103b\u102c\u1038\u1000\u102d\u102f \u1021\u1031\u102c\u1000\u103a\u1015\u102b command \u1010\u102d\u102f\u1037\u1000\u102d\u102f\u1021\u101e\u102f\u1036\u1038\u1015\u103c\u102f\u1000\u102c install \u1015\u103c\u102f\u101c\u102f\u1015\u103a\u1014\u102d\u102f\u1004\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">npm install axios\r\nnpm install vue-router@4\r\nnpm install pinia\r\n<\/pre>\n<p>\u1015\u1011\u1019\u1025\u102e\u1038\u1006\u102f\u1036\u1038\u1021\u1014\u1031\u1016\u103c\u1004\u103a\u1037 Login Page \u1010\u1005\u103a\u1001\u102f create \u101c\u102f\u1015\u103a\u1015\u102b\u1019\u101a\u103a\u104b Login Page \u1019\u103e\u102c \u1015\u102b\u101d\u1004\u103a\u1010\u1032\u1037\u1021\u1000\u103c\u1031\u102c\u1004\u103a\u1038\u1021\u101b\u102c \u1021\u1000\u103b\u1025\u103a\u1038\u1001\u103b\u102f\u1015\u103a\u1000\u1010\u1031\u102c\u1037 user \u1000 login \u101d\u1004\u103a\u1010\u102c\u1021\u1031\u102c\u1004\u103a\u1019\u103c\u1004\u103a\u1010\u1032\u1037\u1021\u1001\u102b\u1019\u103e\u102c backend \u1000\u1014\u1031\u1015\u103c\u1014\u103a\u101c\u100a\u103a\u1015\u1031\u1038\u1015\u102d\u102f\u1037\u101c\u102c\u1010\u1032\u1037 Access Token \u1000\u102d\u102f stores\/auth-store.js (Authstore.token) \u1019\u103e\u102c\u101e\u102d\u1019\u103a\u1038\u1015\u103c\u102e\u1038 home page \u1000\u102d\u102f redirect \u101c\u102f\u1015\u103a\u1015\u1031\u1038\u1001\u103c\u1004\u103a\u1038 \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1011\u102d\u102f\u1014\u100a\u103a\u1038\u1016\u103c\u1004\u103a\u1037 Access Token \u1000\u102d\u102f memory \u1011\u1032\u1019\u103e\u102c \u101e\u102d\u1019\u103a\u1038\u1006\u100a\u103a\u1038\u1014\u102d\u102f\u1004\u103a\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b localStorage.setItem(&#8216;isAuthenticated&#8217;, true) \u1000\u1010\u1031\u102c\u1037 authenticated \u1016\u103c\u1005\u103a\u1015\u103c\u102e\u1038\u101e\u102c\u1038\u1016\u103c\u1005\u103a\u1010\u1032\u1037 user \u1010\u1005\u103a\u101a\u1031\u102c\u1000\u103a\u1000 login page \u1000\u102d\u102f\u101e\u103d\u102c\u1038\u1010\u1032\u1037\u1021\u1001\u102b\u1019\u103e\u102c \u101e\u103d\u102c\u1038\u101c\u102d\u102f\u1037\u1019\u101b\u1021\u1031\u102c\u1004\u103a \u1010\u102c\u1038\u1006\u102e\u1038\u1001\u103b\u1004\u103a\u1010\u1032\u1037\u1021\u1010\u103d\u1000\u103a \u1011\u100a\u103a\u1037\u101e\u103d\u1004\u103a\u1038\u1011\u102c\u1038\u1010\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">  \r\n#pages\/LoginPage.vue\r\n&lt;template&gt;\r\n  <div class=\"flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8\">\r\n    <div class=\"sm:mx-auto sm:w-full sm:max-w-sm\">\r\n      <img decoding=\"async\" class=\"mx-auto h-10 w-auto\" src=\"https:\/\/tailwindui.com\/img\/logos\/mark.svg?color=indigo&amp;shade=600\" alt=\"Your Company\" \/>\r\n      <h2 class=\"mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900\">Sign in to your account<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"mt-10 sm:mx-auto sm:w-full sm:max-w-sm\">\r\n      \r\n        <div>\r\n          <label for=\"email\" class=\"block text-sm font-medium leading-6 text-gray-900\">Email address<\/label>\r\n          <div class=\"mt-2\">\r\n            \r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div>\r\n          <div class=\"flex items-center justify-between\">\r\n            <label for=\"password\" class=\"block text-sm font-medium leading-6 text-gray-900\">Password<\/label>\r\n          <\/div>\r\n          <div class=\"mt-2\">\r\n            \r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div>\r\n          <button type=\"submit\" class=\"flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\">Sign in<\/button>\r\n        <\/div>\r\n      \r\n     \r\n    <\/div>\r\n  <\/div>\r\n&lt;\/templategt;\r\n&lt;script setup&gt;\r\nimport { useAuthStore } from '..\/store\/auth-store'\r\nimport { reactive } from 'vue'\r\nimport { useRouter } from 'vue-router'\r\n\r\nconst info = reactive({\r\n  email: 'kale19@example.com',\r\n  password: 'password'\r\n})\r\nconst router = useRouter()\r\nconst AuthStore = useAuthStore()\r\n\r\nconst onSubmit = async(e) =&gt; {\r\n  try {\r\n    e.preventDefault()\r\n    if (info.email &amp;&amp; info.password) {\r\n      const res = await AuthStore.login(info)\r\n      localStorage.setItem('isAuthenticated', true)\r\n      AuthStore.token = res.data?.token\r\n      AuthStore.isAuthenticated = true\r\n      router.push({name: 'home'})\r\n    }\r\n  } catch (error) {\r\n    console.error(error)\r\n  }\r\n}\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>routes\/routes.js \u1019\u103e\u102c\u1010\u1031\u102c\u1037 project \u1019\u103e\u102c\u1015\u102b\u101d\u1004\u103a\u1019\u101a\u103a\u1037 route \u1010\u103d\u1031\u1000\u102d\u102f \u101b\u1031\u1038\u1010\u1032\u1037 file \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1011\u102d\u102f file \u1019\u103e\u102c\u1015\u102b\u1010\u1032\u1037 requiredAuth function \u1010\u103d\u1031\u1000\u1010\u1031\u102c\u1037 home page, about page \u1010\u102d\u102f\u1037\u1000\u102d\u102f authenticated user \u1000\u101e\u102c \u101d\u1004\u103a\u1001\u103d\u1004\u103a\u1037\u101b\u1021\u1031\u102c\u1004\u103a \u101c\u102f\u1015\u103a\u1015\u1031\u1038\u1019\u101a\u103a\u1037 middleware function \u1016\u103c\u1005\u103a\u1015\u103c\u102e\u1038 notRequiredAuth function \u1010\u103d\u1031\u1000\u1010\u1031\u102c\u1037 authenticated user \u1000 login route \u101e\u102d\u102f\u1037 \u101e\u103d\u102c\u1038\u1001\u103d\u1004\u103a\u1037\u1000\u102d\u102f \u1010\u102c\u1038\u1006\u102e\u1038\u1016\u102d\u102f\u1037\u1021\u1010\u103d\u1000\u103a \u1021\u101e\u102f\u1036\u1038\u1015\u103c\u102f\u1010\u1032\u1037 middleware function \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\"> #routes\/routes.js\r\nimport { requiredAuth, notRequiredAuth } from '.\/guard'\r\nconst routes = [\r\n  { \r\n    path: '\/',      \r\n    redirect: '\/home'\r\n  },\r\n  { \r\n    path: '\/home',\r\n    name: 'home',\r\n    component: () =&gt; import('..\/pages\/Home.vue'),\r\n    beforeEnter: [requiredAuth]\r\n  },\r\n  { \r\n    path: '\/about',\r\n    name: 'about',\r\n    component: () =&gt; import('..\/pages\/About.vue'),\r\n    beforeEnter: [requiredAuth]\r\n  },\r\n  { \r\n    path: '\/login',\r\n    name: 'login',\r\n    component: () =&gt; import('..\/pages\/Login.vue'),\r\n    beforeEnter: [notRequiredAuth]\r\n  },\r\n]\r\nexport default routes\r\n<\/pre>\n<p>\u1011\u102d\u102f\u1037\u1014\u1031\u102c\u1000\u103a user \u1000 page \u1010\u103d\u1031\u1000\u102d\u102f \u101d\u1004\u103a\u101b\u1031\u102c\u1000\u103a\u1010\u1032\u1037\u1021\u1001\u102b\u1019\u103e\u102c authenticated \u1016\u103c\u1005\u103a\u101c\u102c\u1038\u104a \u1019\u1016\u103c\u1005\u103a\u1018\u1030\u1038\u101c\u102c\u1038 \u1006\u102d\u102f\u1010\u102c\u1000\u102d\u102f \u101e\u102d\u101b\u1016\u102d\u102f\u1037\u1021\u1010\u103d\u1000\u103a middleware \u1010\u1005\u103a\u1001\u102f\u1011\u102c\u1038\u101b\u103e\u102d\u101b\u1015\u102b\u1019\u101a\u103a\u104b \u1000\u103b\u103d\u1014\u103a\u1010\u1031\u102c\u103a\u1000\u1010\u1031\u102c\u1037 guard.js \u1000\u102d\u102f middleware \u1021\u1016\u103c\u1005\u103a\u1021\u101e\u102f\u1036\u1038\u1015\u103c\u102f\u1011\u102c\u1038\u1015\u102b\u1010\u101a\u103a\u104b routes\/guard.js \u1019\u103e\u102c\u1015\u102b\u101d\u1004\u103a\u1010\u1032\u1037 \u1021\u1000\u103c\u1031\u102c\u1004\u103a\u1038\u1021\u101b\u102c\u1010\u103d\u1031\u1000\u1010\u1031\u102c\u1037 \u1021\u1031\u102c\u1000\u103a\u1015\u102b\u1021\u1010\u102d\u102f\u1004\u103a\u1038\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b HomePage, AboutPage \u1010\u102d\u102f\u1037\u1000\u102d\u102f user \u1000 \u101d\u1004\u103a\u101b\u1031\u102c\u1000\u103a\u1010\u1032\u1037\u1021\u1001\u102b\u1019\u103e\u102c me() \u1006\u102d\u102f\u1010\u1032\u1037 api request \u1000\u102d\u102f\u1001\u1031\u102b\u103a\u1011\u102c\u1038\u1001\u103c\u1004\u103a\u1038\u1000\u103c\u1031\u102c\u1004\u103a\u1037 \u1011\u102d\u102f request \u1021\u1031\u102c\u1004\u103a\u1019\u103c\u1004\u103a\u1019\u103e\u101e\u102c \u1021\u1006\u102d\u102f\u1015\u102b page \u1010\u103d\u1031\u1000\u102d\u102f \u1016\u1031\u102c\u103a\u1015\u103c\u1015\u1031\u1038\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">#routes\/guard.js\r\nimport { useAuthStore } from '..\/store\/auth-store'\r\nexport const requiredAuth = async(to, from, next) =&gt; {\r\n  const AuthStore = useAuthStore()\r\n  try {\r\n    await AuthStore.me()\r\n    next()\r\n  } catch(error) {\r\n    throw error\r\n  }\r\n}\r\nexport const notRequiredAuth = async(to, from, next) =&gt; {\r\n  const AuthStore = useAuthStore()\r\n  if (AuthStore.isAuthenticated) next(from.path)\r\n  else next()\r\n}\r\n<\/pre>\n<p>Access Token \u1000\u102d\u102f refresh \u101c\u102f\u1015\u103a\u1016\u102d\u102f\u1037\u1021\u1010\u103d\u1000\u103a \u101c\u102d\u102f\u1021\u1015\u103a\u1010\u1032\u1037\u101c\u102f\u1015\u103a\u1006\u1031\u102c\u1004\u103a\u1015\u102f\u1036\u1000\u1010\u1031\u102c\u1037 \u1021\u1031\u102c\u1000\u103a\u1015\u102b\u1021\u1010\u102d\u102f\u1004\u103a\u1038\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b Guard.js \u1000\u1014\u1031 page \u1010\u1005\u103a\u1001\u102f\u1000\u102d\u102f\u101d\u1004\u103a\u101c\u102d\u102f\u1000\u103a\u1010\u102d\u102f\u1004\u103a\u1038\u1019\u103e\u102c &#8220;http:\/\/127.0.0.1:8000\/api\/me&#8221; \u1006\u102d\u102f\u1010\u1032\u1037 API request \u1000\u102d\u102f\u1001\u1031\u102b\u103a\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1021\u1032\u1012\u102e request \u1000 \u1019\u1021\u1031\u102c\u1004\u103a\u1019\u103c\u1004\u103a\u1018\u1032 401 response status \u1015\u103c\u1014\u103a\u1015\u102d\u102f\u1037\u101c\u102c\u1010\u1032\u1037\u1021\u1001\u102b\u1019\u103e\u102c HTTP-only cookie \u1011\u1032\u1019\u103e\u102c \u101b\u103e\u102d\u1014\u1031\u1010\u1032\u1037 refresh token \u1000\u102d\u102f\u1021\u101e\u102f\u1036\u1038\u1015\u103c\u102f\u1015\u103c\u102e\u1038 access token \u1000\u102d\u102f \u1021\u101e\u1005\u103a\u101c\u103e\u1019\u103a\u1038\u1001\u1031\u102b\u103a\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1011\u102d\u102f\u101c\u102f\u1015\u103a\u1004\u1014\u103a\u1038\u1005\u1025\u103a\u1000\u102d\u102f Line 22 to 38 \u1019\u103e\u102c \u101b\u1031\u1038\u101e\u102c\u1038\u1011\u102c\u1038\u1010\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b refresh token \u1000\u101e\u1000\u103a\u1010\u1019\u103a\u1038\u101b\u103e\u102d\u1014\u1031\u101e\u104d access token \u1021\u101e\u1005\u103a \u1011\u102f\u1010\u103a\u1015\u1031\u1038\u1014\u1031\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b refresh token \u101e\u1000\u103a\u1010\u1019\u103a\u1038\u1000\u102f\u1014\u103a\u1010\u1032\u1037\u1021\u1001\u103b\u102d\u1014\u103a\u1019\u103e\u101e\u102c logout \u1016\u103c\u1005\u103a\u101e\u103d\u102c\u1038\u1019\u103e\u102c\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">#api\/axios.js\r\nimport axios from 'axios'\r\nimport { useAuthStore } from '..\/store\/auth-store'\r\nlet isRefreshing = false\r\n\r\nconst api = axios.create({\r\n  baseURL: 'http:\/\/127.0.0.1:8000\/api',\r\n  contentType: 'application\/json',\r\n  timeout: 100000,\r\n  withCredentials: true,\r\n})\r\n\r\napi.interceptors.request.use(async (request) =&gt; {\r\n  const AuthStore = useAuthStore()\r\n  const token = AuthStore.getToken\r\n  if (token) {\r\n    request.headers['Authorization'] = `Bearer ${token}`\r\n  }\r\n  return request\r\n})\r\n\r\napi.interceptors.response.use(async (response) =&gt; {\r\n  return response\r\n}, async(error) =&gt; {\r\n  const AuthStore = useAuthStore()\r\n  if (error?.response?.status === 401 &amp;&amp; !isRefreshing) {\r\n    try {\r\n      isRefreshing = true\r\n      await AuthStore.refresh()\r\n      return error.config\r\n    } catch(e) {\r\n\r\n    } finally {\r\n      isRefreshing = false\r\n    }\r\n  }\r\n  throw error\r\n})\r\n\r\nexport { api }\r\n<\/pre>\n<p>store\/auth-store.js \u1000\u1010\u1031\u102c\u1037 \u1021\u1031\u102c\u1000\u103a\u1015\u102b\u1021\u1010\u102d\u102f\u1004\u103a\u1038\u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">import { defineStore } from 'pinia';\r\nimport { api } from '..\/api\/axios'\r\n\r\nexport const useAuthStore = defineStore('auth-store', {\r\n  state: () =&gt; ({\r\n    token: null,\r\n    isAuthenticated: localStorage.getItem('isAuthenticated') || null,\r\n    expires_in: null,\r\n    currentUser: null\r\n  }),\r\n  getters: {\r\n    getToken: (state) =&gt; state.token\r\n  },\r\n  actions: {\r\n    async login(payload) {\r\n      try {\r\n        return await api.post('\/login', payload)\r\n      } catch(e) {\r\n        throw e\r\n      }\r\n    },\r\n\r\n    async logout() {\r\n      try {\r\n        await api.post('\/logout')\r\n      } catch(e) {\r\n        throw e\r\n      }\r\n    },\r\n\r\n    async refresh() {\r\n      try {\r\n        const res = await api.post('refresh')\r\n        this.token = res.data.token\r\n        this.isAuthenticated = true\r\n        this.expires_in = res.data.expires_in\r\n        localStorage.setItem('isAuthenticated', true)\r\n      } catch(e) {\r\n        if (e.response.status === 401) {\r\n          this.token = null\r\n          this.isAuthenticated = null\r\n          this.expires_in = null\r\n          localStorage.removeItem('isAuthenticated')\r\n          window.location.href = '\/login'\r\n        } else {\r\n          throw e\r\n        }\r\n      }\r\n    },\r\n\r\n    async me(payload) {\r\n      try {\r\n        const res = await api.get('\/me', payload)\r\n        this.currentUser = res.data\r\n      } catch(e) {\r\n        throw e\r\n      }\r\n    },\r\n  },\r\n});\r\n<\/pre>\n<p>\u1021\u1001\u103b\u102f\u1015\u103a\u1021\u102c\u1038\u1016\u103c\u1004\u1037\u103a Access Token \u1000\u102d\u102f memory \u1010\u103d\u1004\u103a \u101e\u102d\u1019\u103a\u1038\u1006\u100a\u103a\u1038\u1001\u103c\u1004\u103a\u1038\u104a HTTP-only cookie \u1010\u103d\u1004\u103a refresh token \u1000\u102d\u102f\u1011\u102c\u1038\u101b\u103e\u102d\u1001\u103c\u1004\u103a\u1038\u1014\u103e\u1004\u1037\u103a token \u101e\u1000\u103a\u1010\u1019\u103a\u1038\u1000\u102d\u102f \u1001\u100f\u1010\u102c\u101e\u102c \u1000\u1014\u1037\u103a\u101e\u1010\u103a\u1001\u103c\u1004\u103a\u1038\u1016\u103c\u1004\u1037\u103a browser \u1010\u103d\u1004\u103a bearer token \u1021\u1010\u103d\u1000\u103a \u101c\u102f\u1036\u1001\u103c\u102f\u1036\u101b\u1031\u1038\u1000\u102d\u102f \u1011\u102d\u101b\u1031\u102c\u1000\u103a\u1005\u103d\u102c \u1019\u103c\u103e\u1004\u1037\u103a\u1010\u1004\u103a\u1014\u102d\u102f\u1004\u103a\u1015\u102b\u101e\u100a\u103a\u104b \u1021\u1001\u102f\u1006\u102d\u102f\u101b\u1004\u103a\u1010\u1031\u102c\u1037 How to store and send Bearer Token securely in the browser \u1021\u1000\u103c\u1031\u102c\u1004\u103a\u1038\u1000\u102d\u102f \u1014\u102c\u1038\u101c\u100a\u103a\u101e\u103d\u102c\u1038\u1019\u101a\u103a\u101c\u102d\u102f\u1037 \u1011\u1004\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1021\u1006\u102d\u102f\u1015\u102b <a target=\"_blank\" href=\"https:\/\/github.com\/Thuta-ctrl\/secure-api\">https:\/\/github.com\/Thuta-ctrl\/secure-api<\/a> \u101c\u1004\u1037\u103a\u1001\u103a\u1000\u1014\u1031\u101c\u100a\u103a\u1038 \u101c\u1031\u1037\u101c\u102c\u1014\u102d\u102f\u1004\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1021\u1006\u102f\u1036\u1038\u1011\u102d\u1016\u1010\u103a\u101b\u103e\u102f\u1015\u1031\u1038\u1010\u1032\u1037\u1021\u1010\u103d\u1000\u103a \u1000\u103b\u1031\u1038\u1007\u1030\u1038\u1010\u1004\u103a\u1015\u102b\u1010\u101a\u103a \u1001\u1004\u103a\u1017\u103b\u104b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u1019\u1004\u103a\u1039\u1002\u101c\u102c\u1015\u102b\u104b \u1000\u103b\u103d\u1014\u103a\u1010\u1031\u102c\u103a\u1000\u1010\u1031\u102c\u1037 Spiceworks Myanmar \u1019\u103e\u102c Backend Developer \u1021\u1014\u1031\u1014\u1032\u1037 \u1010\u102c\u101d\u1014\u103a\u101a\u1030\u101c\u102f\u1015\u103a\u1000\u102d\u102f\u1004\u103a\u1014\u1031\u1010\u1032\u1037 \u101e\u102f\u1010\u101a\u102c\u1019\u102d\u102f\u1038 \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1012\u102e\u1010\u1005\u103a\u1001\u1031\u102b\u1000\u103a\u1019\u103e\u102c\u1010\u1031\u102c\u1037 How to store and send Bearer Token securely<\/p>\n","protected":false},"author":51,"featured_media":11593,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-11570","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-system"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to store and send Bearer Token securely in the browser? - Web Development &amp; Tech Blog | Spiceworks Myanmar<\/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.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to store and send Bearer Token securely in the browser? - Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"og:description\" content=\"\u1019\u1004\u103a\u1039\u1002\u101c\u102c\u1015\u102b\u104b \u1000\u103b\u103d\u1014\u103a\u1010\u1031\u102c\u103a\u1000\u1010\u1031\u102c\u1037 Spiceworks Myanmar \u1019\u103e\u102c Backend Developer \u1021\u1014\u1031\u1014\u1032\u1037 \u1010\u102c\u101d\u1014\u103a\u101a\u1030\u101c\u102f\u1015\u103a\u1000\u102d\u102f\u1004\u103a\u1014\u1031\u1010\u1032\u1037 \u101e\u102f\u1010\u101a\u102c\u1019\u102d\u102f\u1038 \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1012\u102e\u1010\u1005\u103a\u1001\u1031\u102b\u1000\u103a\u1019\u103e\u102c\u1010\u1031\u102c\u1037 How to store and send Bearer Token securely\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-12T08:47:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"366\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thuta Yar Moe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thuta Yar Moe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/\"},\"author\":{\"name\":\"Thuta Yar Moe\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/5883aee80b174692301288a1d3a56405\"},\"headline\":\"How to store and send Bearer Token securely in the browser?\",\"datePublished\":\"2024-04-12T08:47:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/\"},\"wordCount\":313,\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png\",\"articleSection\":[\"System\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/\",\"name\":\"How to store and send Bearer Token securely in the browser? - Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png\",\"datePublished\":\"2024-04-12T08:47:33+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/5883aee80b174692301288a1d3a56405\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png\",\"contentUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png\",\"width\":700,\"height\":366},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/how-to-store-and-send-bearer-token-securely-in-the-browser\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to store and send Bearer Token securely in the browser?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\",\"name\":\"Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"description\":\"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/5883aee80b174692301288a1d3a56405\",\"name\":\"Thuta Yar Moe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f1801721c7fb06c2ba2c886067bf36bc83b80f6fb00bd1c2b47c6ef27c3360a8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f1801721c7fb06c2ba2c886067bf36bc83b80f6fb00bd1c2b47c6ef27c3360a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f1801721c7fb06c2ba2c886067bf36bc83b80f6fb00bd1c2b47c6ef27c3360a8?s=96&d=mm&r=g\",\"caption\":\"Thuta Yar Moe\"},\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/author\\\/thuta-yar-moe\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to store and send Bearer Token securely in the browser? - Web Development &amp; Tech Blog | Spiceworks Myanmar","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:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/","og_locale":"en_US","og_type":"article","og_title":"How to store and send Bearer Token securely in the browser? - Web Development &amp; Tech Blog | Spiceworks Myanmar","og_description":"\u1019\u1004\u103a\u1039\u1002\u101c\u102c\u1015\u102b\u104b \u1000\u103b\u103d\u1014\u103a\u1010\u1031\u102c\u103a\u1000\u1010\u1031\u102c\u1037 Spiceworks Myanmar \u1019\u103e\u102c Backend Developer \u1021\u1014\u1031\u1014\u1032\u1037 \u1010\u102c\u101d\u1014\u103a\u101a\u1030\u101c\u102f\u1015\u103a\u1000\u102d\u102f\u1004\u103a\u1014\u1031\u1010\u1032\u1037 \u101e\u102f\u1010\u101a\u102c\u1019\u102d\u102f\u1038 \u1016\u103c\u1005\u103a\u1015\u102b\u1010\u101a\u103a\u104b \u1012\u102e\u1010\u1005\u103a\u1001\u1031\u102b\u1000\u103a\u1019\u103e\u102c\u1010\u1031\u102c\u1037 How to store and send Bearer Token securely","og_url":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/","og_site_name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","article_published_time":"2024-04-12T08:47:33+00:00","og_image":[{"width":700,"height":366,"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png","type":"image\/png"}],"author":"Thuta Yar Moe","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Thuta Yar Moe","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/#article","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/"},"author":{"name":"Thuta Yar Moe","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/5883aee80b174692301288a1d3a56405"},"headline":"How to store and send Bearer Token securely in the browser?","datePublished":"2024-04-12T08:47:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/"},"wordCount":313,"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png","articleSection":["System"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/","name":"How to store and send Bearer Token securely in the browser? - Web Development &amp; Tech Blog | Spiceworks Myanmar","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/#primaryimage"},"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png","datePublished":"2024-04-12T08:47:33+00:00","author":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/5883aee80b174692301288a1d3a56405"},"breadcrumb":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/#primaryimage","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png","contentUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2024\/04\/cover_how_to_store_and_send_bearer_token_securely_in_the_browser.png","width":700,"height":366},{"@type":"BreadcrumbList","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/how-to-store-and-send-bearer-token-securely-in-the-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.spiceworksmyanmar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to store and send Bearer Token securely in the browser?"}]},{"@type":"WebSite","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/","name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","description":"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.spiceworksmyanmar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/5883aee80b174692301288a1d3a56405","name":"Thuta Yar Moe","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f1801721c7fb06c2ba2c886067bf36bc83b80f6fb00bd1c2b47c6ef27c3360a8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f1801721c7fb06c2ba2c886067bf36bc83b80f6fb00bd1c2b47c6ef27c3360a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f1801721c7fb06c2ba2c886067bf36bc83b80f6fb00bd1c2b47c6ef27c3360a8?s=96&d=mm&r=g","caption":"Thuta Yar Moe"},"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/author\/thuta-yar-moe\/"}]}},"_links":{"self":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/11570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/comments?post=11570"}],"version-history":[{"count":20,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/11570\/revisions"}],"predecessor-version":[{"id":13683,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/11570\/revisions\/13683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media\/11593"}],"wp:attachment":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media?parent=11570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/categories?post=11570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/tags?post=11570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}