[PATCH v2 12/12] fix(auth): fix auth guard when credentials is invalid

[Muhammad Rizki <kiizuha@gnuweeb.org>]

This commit fixes auth guard to prevent invalid credentials to call API,
it will redirect user to the login page if credentials is invalid.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/lib/hooks/auth.svelte.ts          | 26 +++++++++++++++++++++-----
 src/lib/hooks/http.svelte.ts          |  4 +++-
 src/routes/(protected)/+layout.svelte |  9 +++++++++
 src/routes/(protected)/+layout.ts     |  9 ++++++++-
 src/routes/+page.ts                   |  2 ++
 5 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/lib/hooks/auth.svelte.ts b/src/lib/hooks/auth.svelte.ts
index 7bd2d3b..aa4beda 100644
--- a/src/lib/hooks/auth.svelte.ts
+++ b/src/lib/hooks/auth.svelte.ts
@@ -5,6 +5,17 @@ let data = $state<LoginResponse>({
   token_exp_at: 0
 });
 
+const getUserFromLocalStorage = () => {
+  const user = localStorage.getItem("gwm_uinfo");
+  if (!user) return undefined;
+
+  try {
+    return JSON.parse(user) as User;
+  } catch {
+    return undefined;
+  }
+};
+
 export function useAuth() {
   return {
     get token() {
@@ -24,8 +35,12 @@ export function useAuth() {
     },
 
     refresh() {
-      const user = localStorage.getItem("gwm_uinfo");
-      data.user_info = JSON.parse(user!) as User;
+      const token = localStorage.getItem("gwm_token");
+      const token_exp_at = Number(localStorage.getItem("gwm_token_exp_at"));
+
+      data.user_info = getUserFromLocalStorage();
+      data.token = token!;
+      data.token_exp_at = token_exp_at;
     },
 
     save({ user_info, token, token_exp_at }: LoginResponse) {
@@ -42,15 +57,16 @@ export function useAuth() {
     },
 
     isValid() {
+      const user = getUserFromLocalStorage();
       const token = localStorage.getItem("gwm_token");
-      const user = localStorage.getItem("gwm_uinfo");
+      const expLs = localStorage.getItem("gwm_token_exp_at");
 
-      if (!token || !user) {
+      if (!token || !user || !expLs) {
         this.clear();
         return false;
       }
 
-      const exp = Number(localStorage.getItem("gwm_token_exp_at"));
+      const exp = Number(expLs);
       const unix = Math.round(new Date().getTime() / 1000);
 
       if (unix >= exp) {
diff --git a/src/lib/hooks/http.svelte.ts b/src/lib/hooks/http.svelte.ts
index d3445d9..f30687d 100644
--- a/src/lib/hooks/http.svelte.ts
+++ b/src/lib/hooks/http.svelte.ts
@@ -1,3 +1,4 @@
+import { goto } from "$app/navigation";
 import { PUBLIC_BASE_URL } from "$env/static/public";
 import * as typing from "$typings";
 import axios from "axios";
@@ -53,10 +54,11 @@ client.interceptors.response.use(
     const response = err.response as AxiosResponse<typing.ResponseAPI<typing.RenewTokenResponse>>;
     const status = response ? response.status : null;
 
-    if (status === 403 && response?.data) {
+    if (status !== 200) {
       localStorage.removeItem("gwm_token");
       localStorage.removeItem("gwm_token_exp_at");
       localStorage.removeItem("gwm_uinfo");
+      goto("/");
     }
 
     return response;
diff --git a/src/routes/(protected)/+layout.svelte b/src/routes/(protected)/+layout.svelte
index e88b3fb..f5998a7 100644
--- a/src/routes/(protected)/+layout.svelte
+++ b/src/routes/(protected)/+layout.svelte
@@ -3,8 +3,17 @@
   import AppSidebar from "$components/customs/app-sidebar.svelte";
   import Header from "$components/customs/header.svelte";
   import Separator from "$components/ui/separator/separator.svelte";
+  import { useAuth } from "$lib/hooks/auth.svelte";
+  import { goto, onNavigate } from "$app/navigation";
 
   let { children } = $props();
+
+  const auth = useAuth();
+
+  onNavigate(() => {
+    if (auth.isValid()) return;
+    goto("/");
+  });
 </script>
 
 <Sidebar.Provider class="light">
diff --git a/src/routes/(protected)/+layout.ts b/src/routes/(protected)/+layout.ts
index 06ff2db..951766f 100644
--- a/src/routes/(protected)/+layout.ts
+++ b/src/routes/(protected)/+layout.ts
@@ -9,13 +9,20 @@ export const load: LayoutLoad = async () => {
 
   if (!auth.isValid()) {
     localStorage.setItem("gwm_invalid_creds", String(1));
+    auth.clear();
     return redirect(307, "/");
   }
 
-  const { data } = await http<{ user_info: typing.User }>({
+  const { status, data } = await http<{ user_info: typing.User }>({
     params: { action: "get_user_info" }
   });
 
+  if (status !== 200) {
+    localStorage.setItem("gwm_invalid_creds", String(1));
+    auth.clear();
+    return redirect(307, "/");
+  }
+
   auth.save({
     token: data.res?.renew_token?.token,
     token_exp_at: data.res?.renew_token?.token_exp_at,
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 8cbe162..604e967 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -11,6 +11,8 @@ export const load: PageLoad = async () => {
 
   if (auth.isValid()) return redirect(307, "/home");
 
+  auth.refresh();
+
   const form = await superValidate(zod(loginSchema));
   return { form, isInvalidCreds };
 };
-- 
Muhammad Rizki