fix(auth): fix auth guard when credentials is invalid

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 <[email protected]>
Link: https://lore.gnuweeb.org/gwml/[email protected]
Signed-off-by: Ammar Faizi <[email protected]>

Author: rushkii

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) {

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;

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">

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,

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 };
 };