Handle loading state

[zanhk]

In your 0-FirebaseUI-for-web example there is

{#if $user}
   User authenticated
{:else}
   {LoginComponent}
{/if}

https://github.com/jacob-8/sveltefirets/blob/main/packages/demo/src/routes/1-auth/0-FirebaseUI-for-web/%2Bpage.svx#L13

With this example when loading the page it show the {LoginComponent} until the $user is populated.

google_screen_recording_2022-10-22T13-01_02.118Z.webm (second 00:04 of the video)

As the $user variable result null if not authenticated, is there a simple way to handle the loading state of the $user variable to show a loader until $user finish loading (either result null or the user object)?

(I tried using {#await ...} but without success)

[jacob-8]

You can now update to the latest version (0.0.32) and use the authState store like this:

<script>
  import { authState } from 'sveltefirets';
  import { user } from '$lib/user';
</script>

{#if $authState !== 'undefined'}
  {#if $user}
     User authenticated
  {:else}
     <LoginComponent />
  {/if}
{:else}
  Loading auth...
{/if}

I've updated the documentation found at https://sveltefirets.vercel.app/1-auth/1-user-store to further explain your use case, so please read that and also read the "Using cookies to eliminate the need to wait for Firebase Auth" section at the bottom of that page for what I consider to be an even better option than a loading blocker.

[zanhk]

Awesome! thanks