great news, the new svelte store that is connected to the local storage works great, not only do i always know if a user is logged in but i have their user data too

srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte

@@ -3,30 +3,70 @@
   import { push } from "svelte-spa-router";
   import { onMount } from 'svelte';
   import { loginStatus } from '../stores/loginStatusStore.js';
+  import { userStore, userLogout } from '../stores/loginStatusStore.js';
+
 
   // go over agian in detail to make sure this actually does what you want
   // it needs some work, seems confused a lot of the time...
 	onMount(async () => {
     console.log('SplashPage testing if logged in')
+    // let user = await fetch('http://transcendance:8080/api/v2/user')
+		//   .then((resp) => resp.json())
+		// if (user) {
+    //   if (!user.isEnabledTwoFactorAuth) {
+    //     loginStatus.update( (old) => ({...old, tfa: true}) );
+    //   }
+    //   // because the User will only exist if they're logged in to 42?
+    //   loginStatus.update( (old) => ({...old, fortyTwo: true}) );
+    //   if (user.isEnabledTwoFactorAuth && $loginStatus.tfa)
+    //     push('/profile');
+    //   // They have to click Login if using tfa and tfa no already done
+    // }
+
+    // hold on, maybe this is all i need?
     let user = await fetch('http://transcendance:8080/api/v2/user')
       .then((resp) => resp.json())
-		if (user) {
+      // .then((data) => void userStore.set(data))  // this returns void so local var user is undefined...
-      if (!user.isEnabledTwoFactorAuth) {
+      // .catch( userLogout(); )
-        loginStatus.update( (old) => ({...old, tfa: true}) );
+      // yea ok i don't know how to use catch...
-      }
+
-      // because the User will only exist if they're logged in to 42?
+    //   userStore.set(user);
-      loginStatus.update( (old) => ({...old, fortyTwo: true}) );
+    //   console.log('user in userStore');
-      if (user.isEnabledTwoFactorAuth && $loginStatus.tfa)
+    //   console.log($userStore);
-        push('/profile');
+      // console.log('now user in the local var');
-      // They have to click Login if using tfa and tfa no already done
+      // console.log(user);
+      // if (user && user.statusCode && user.statusCode === 403) {
+      //   console.log('user not logged in')
+      // }
+      // if (user && user.username) {
+      //   console.log('we have a user');
+      // }
+
+
+    // to clean up local storage... as a precaution
+    // this condition isn't good enough...
+    if (user && user.statusCode && user.statusCode === 403) {
+      console.log('on mount no user, returned status code 403 so logging out of userStore')
+      userLogout(); // which i think should delete any previous local storage
     }
+
+    // in theory now we should be logged in...
 	});
 
   const login = async() => {
     window.location.href = 'http://transcendance:8080/api/v2/auth';
     // await fetch ('http://transcendance:8080/api/v2/auth');
     console.log('you are now logged in');
-    loginStatus.allTrue();
+
+    // ok giving our new local storage and store combo a go
+    // what i need is to set the store to the user when this button get's pressed
+    // since there's no apparent return i guess i'll just fetch the user?
+
+    await fetch('http://transcendance:8080/api/v2/user')
+      .then((resp) => resp.json())
+      .then((data) => void userStore.set(data));
+
+    // loginStatus.allTrue();
     // this is redundant if TFA is on because they would only get back here after going through the TFA which sets it to True
     // $loginStatus.tfa = true; // also it doesn't do anything cuz no .update()
 
@@ -36,39 +76,41 @@
     // Maybe it would be better to do it in the Backend?
   }
 
+// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
 	const logout = async() => {
 		await fetch('http://transcendance:8080/api/v2/auth/logout', {
         method: 'POST',
       });
-    loginStatus.allFalse()
+    // loginStatus.allFalse()
+    userLogout();
 	};
 
 </script>
 
-
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <header class="grid-container">
 
   <!-- <div on:mouseenter={enter} on:mouseleave={leave} class:active > -->
     <h1>Potato Pong</h1>
   <!-- </div> -->
 
-  <nav>
+  <!-- <nav>
     {#if ($loginStatus.fortyTwo && $loginStatus.tfa) === false}
       <div on:click={login}>Login</div>
     {:else}
       <div on:click={ () => (push('/profile')) }>Profile</div>
       <div on:click={logout}>Logout</div>
     {/if}
-  </nav>
+  </nav> -->
-  <!-- <nav> -->
+  <nav>
-    <!-- seems redundant but let's give it a try -->
+    <!-- seems redundant but let's give it a try yea ok it still doesn't work, hate that... -->
-    <!-- {#if $store !== null}
+    {#if $userStore !== null}
       <div on:click={ () => (push('/profile')) }>Profile</div>
       <div on:click={logout}>Logout</div>
     {:else}
       <div on:click={login}>Login</div>
     {/if}
-  </nav> -->
+  </nav>
   <h2>
     <div>Welcome to</div>
     <div>Potato Pong</div>

srcs/requirements/svelte/api_front/src/pages/TmpTestPage.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+
+
+
+</script>
+
+
+<h1>you made it to test</h1>

srcs/requirements/svelte/api_front/src/pieces/Header.svelte

@@ -2,6 +2,7 @@
   import { push } from "svelte-spa-router";
   import { location } from 'svelte-spa-router';
   import { loginStatus } from "../stores/loginStatusStore.js";
+  import { userStore, userLogout } from "../stores/loginStatusStore.js";
 
   import active from 'svelte-spa-router/active'
   // or i could leave them all and not display if they're active?
@@ -13,6 +14,7 @@
         method: 'POST',
       });
     console.log('clicked logout header')
+    userLogout();
 		// $loginStatus = false;
 
     push('/');

srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js

@@ -7,6 +7,10 @@ import { loginStatus } from "../stores/loginStatusStore";
 import { wrap } from 'svelte-spa-router/wrap'
 import { get } from 'svelte/store';
 
+import TestPage from '../pages/TmpTestPage.svelte';
+import { userStore, userLogout } from "../stores/loginStatusStore";
+
+
 
 //   "/article/:title": Article, // this is how you would do parameters!
 // "/": LoginPage,
@@ -85,6 +89,21 @@ import { get } from 'svelte/store';
 
 export const primaryRoutes = {
   "/": SplashPage,
+  '/test': wrap({
+    component: TestPage,
+    conditions: [
+      (detail) => {
+        const user = get(userStore);
+        // console.log(fortyTwo);
+        // console.log(tfa);
+        // return true;
+        if (user)
+          return true;
+        else
+          return false;
+      }
+    ]
+  }),
   '/2fa': TwoFactorAuthentication,
   "/profile": ProfilePage,
   "/profile/*": ProfilePage,

srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js

@@ -42,16 +42,16 @@ export const loginStatus = createLoginStatus();
 
 let _user = localStorage.getItem('42User');
 
-export const store = writable(_user ? JSON.parse(_user) : null);  // we start with no user, but go get one if one exists
+export const userStore = writable(_user ? JSON.parse(_user) : null);  // we start with no user, but go get one if one exists
 
 // ok so this will happen no matter what, basically we are telling it what to do if the store containing the user changes
-store.subscribe((value) => {
+userStore.subscribe((value) => {
   if (value) localStorage.setItem('42User', JSON.stringify(value));
   else localStorage.removeItem('42User'); // for logout
 });
 
 
-export const logout = () => store.set(null);
+export const userLogout = () => userStore.set(null);
 
 // ok this is the part where i need to use our API rather than Auth
 // export async function signUp(username, password, email) {