title: How to create a context that can be used in all pages in Svelte?
body: <p>I'm currently learning Svelte and I would like to create an authentication flow for this side project. Usually, in React, I'm used to saving authenticate information with Contexts.</p>
  <pre><code>&lt;AuthContext&gt;
     &lt;App /&gt;
  &lt;AuthContext&gt;
  </code></pre>
  <p>I would like to know if Svelte can perform a similar approach too? All tutorials are component-based context. I would like to call getContext('authContext') throughout my app.</p>
  <p>AuthContext.svelte</p>
  <pre><code>&lt;script lang='ts'&gt;
        import { writable } from 'svelte/store'
        import { onDestroy, setContext } from 'svelte'
        import {getAuth, type User, onAuthStateChanged} from 'firebase/auth'
      
        const auth = getAuth()
        const userStore = writable&lt;User | null&gt;(null)
        const isLoggedIn = writable&lt;boolean&gt;(false)
        
        const contexts = {
          isLoggedIn,
          userStore,
          logOut,
        }
        
        const unsubscribe =  onAuthStateChanged(auth, (user) =&gt; {
          if(user) {
            userStore.set(user)
            isLoggedIn.set(true)
          }
        })
  
        setContext('authContext', contexts)
   
      function logOut() {
        auth.signOut()
        isLoggedIn.set(false)
      }
      
      
        onDestroy(() =&gt; unsubscribe())
      
  &lt;/script&gt;
      
  </code></pre>
  <p>I've called getContext in __layout.svelte:</p>
  <pre><code>&lt;script lang='ts'&gt;
        import {getContext} from 'svelte'
  
        const {isLoggedIn} = getContext('authContext')
        
  &lt;/script&gt;
  </code></pre>
  <p>It produces this error:</p>
  <blockquote>
  <p>Cannot destructure property <code>'isLoggedIn'</code> of <code>'__vite_ssr_import_1__.getContext(...)'</code> as it is undefined.</p>
  </blockquote>