feat(api): add FE api utils namespace

for token and local storage management

Author: goshatch

src/main/parts/frontend/api/core.cljs

@@ -1,15 +1,11 @@
 (ns parts.frontend.api.core
   (:require [cljs.core.async :refer [<! go]]
-            [cljs-http.client :as http]))
-
-;; Helpers
-
-(defn get-auth-token []
-  (js/localStorage.getItem "auth-token"))
+            [cljs-http.client :as http]
+            [parts.frontend.api.utils :as utils]))
 
 (defn add-auth-header [req]
-  (if-let [token (js/localStorage.getItem "auth-token")]
-    (assoc-in req [:headers "Authorization"] (str "Bearer " token))
+  (if-let [header (utils/get-auth-header)]
+    (assoc-in req [:headers "Authorization"] header)
     req))
 
 (defn GET [endpoint params]
@@ -47,7 +43,7 @@
   (go
     (let [response (<! (POST "/auth/login" credentials))]
       (when (= 200 (:status response))
-        (js/localStorage.setItem "auth-token" (get-in response [:body :token])))
+        (utils/save-tokens (:body response)))
       response)))
 
 (defn logout []

src/main/parts/frontend/api/utils.cljs

@@ -0,0 +1,34 @@
+(ns parts.frontend.api.utils
+  (:require [cognitect.transit :as transit]))
+
+(def ^:private token-storage-key "parts-auth-tokens")
+(def ^:private user-email-key "parts-user-email")
+
+(defn save-tokens
+  "Save authentication tokens to local storage"
+  [tokens]
+  (.setItem js/localStorage token-storage-key (js/JSON.stringify (clj->js tokens))))
+
+(defn get-tokens
+  "Get authentication tokens from local storage"
+  []
+  (when-let [tokens-str (.getItem js/localStorage token-storage-key)]
+    (js->clj (.parse js/JSON tokens-str) :keywordize-keys true)))
+
+(defn clear-tokens
+  "Clear authentication tokens from local storage"
+  []
+  (.removeItem js/localStorage token-storage-key)
+  (.removeItem js/localStorage user-email-key))
+
+(defn get-auth-header
+  "Get the Authorization header for authenticated requests"
+  []
+  (when-let [tokens (get-tokens)]
+    (str (:token_type tokens) " " (:access_token tokens))))
+
+(defn get-csrf-token
+  "Get the CSRF token from the meta tag"
+  []
+  (when-let [meta-tag (.querySelector js/document "meta[name='csrf-token']")]
+    (.getAttribute meta-tag "content")))

src/main/parts/frontend/components/login_modal.cljs

@@ -3,7 +3,7 @@
    [uix.core :refer [defui $ use-state]]
    [cljs.core.async :refer [<!]]
    [parts.frontend.context :as ctx]
-   [parts.frontend.utils.csrf :as csrf]
+   [parts.frontend.api.utils :as utils]
    [parts.frontend.components.modal :refer [modal]])
   (:require-macros
    [cljs.core.async.macros :refer [go]]))
@@ -40,12 +40,12 @@
             ($ :div {:class "error-message"}
                error))
 
-          (when-let [token (csrf/get-token)]
+          (when-let [csrf-token (utils/get-csrf-token)]
             ($ :input
                {:type "hidden"
                 :id "__anti-forgery-token"
                 :name "__anti-forgery-token"
-                :value token}))
+                :value csrf-token}))
 
           ($ :div {:class "form-group"}
              ($ :label {:for "email"} "Email:")

src/main/parts/frontend/context.cljs

@@ -2,6 +2,7 @@
   (:require
    [clojure.core.async :refer [<!]]
    [parts.frontend.api.core :as api]
+   [parts.frontend.api.utils :as utils]
    [uix.core :refer [$ defui use-state use-effect use-context]])
   (:require-macros
    [cljs.core.async.macros :refer [go]]))
@@ -40,9 +41,9 @@
     (use-effect
      (fn []
        (println "[auth-provider] checking for token")
-       (if (api/get-auth-token)
+       (if (utils/get-tokens)
          (do
-           (println "[auth-provider] token found")
+           (println "[auth-provider] token found, already signed in")
            (fetch-user!))
          (set-loading false)))
      [fetch-user!])