CODEWITHSUNDEEP
typescriptstoresveltekitwritable
Daniel Okita
Daniel Okita

Reputation: 31

Writable store is overwritten on page change, SvelteKit

I to values stored in a writable store

import { writable } from 'svelte/store'

export const user = writable(null)
export const isLoggedIn = writable(false)

I then import these values from and set them in the index

 import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
  import { user, isLoggedIn } from "../stores/authStore";
  const provider = new GoogleAuthProvider();
  const auth = getAuth();
  function signIn() {
    signInWithPopup(auth, provider)
      .then((result) => {
        user.set(result.user) 
        isLoggedIn.set(true);
        console.log($isLoggedIn);
        console.log($user.email);
        if ($user.email.includes(".edu")) window.location.href = "/home";
        else window.location.href = "/Sorry";
        //sign user into db
      })
      .catch((error) => {
        console.log("Someting wrong");
        console.error(error);
      });
  }

When I change page and print the values again using

console.log($userValue, $isLoggedIn)

It returns the default values of

null false

I don't know if I'm using the wrong syntax or maybe I need to use cookies, but I am pretty nube at sveltekit and would love some help.

Upvotes: 2

Views: 1532

Answers (1)

mrkishi
mrkishi

Reputation: 5942

Using window.location.href = '/new-path'; causes your browser to make a full navigation away from the current page. It will unload the current page and load the new page instead, so any state you have on the current page will be lost (this includes variables and stores).

In SvelteKit, you can use the goto function to redirect your users. When used in the client, it'll trigger an in-page navigation via the client-side router, so you get to keep all your state:

import { goto } from '$app/navigation';

if (someCondition) {
    goto('/home');
}

Upvotes: 6

Related Questions