From 68cecda546694de8a2f44e489117460db3ff6585 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 13 Apr 2021 13:41:12 +0100
Subject: [PATCH] prevent login page flash on initial render

---
 .../builder/src/pages/builder/_layout.svelte  | 74 +++++++++----------
 packages/builder/src/stores/backend/auth.js   |  9 +--
 2 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index 5aa378b0bc..ad03ecb28f 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -13,49 +13,49 @@
   import { auth } from "stores/backend"
 
   let modal
-
-  console.log($auth.user)
 </script>
 
-{#if $auth.user}
-  <div class="root">
-    <div class="ui-nav">
-      <div class="home-logo">
-        <img src={Logo} alt="Budibase icon" />
-      </div>
-      <div class="nav-section">
-        <div class="nav-top">
-          <Link icon={AppsIcon} title="Apps" href="/" active />
-          <Link
-            icon={HostingIcon}
-            title="Hosting"
-            href="https://portal.budi.live/" />
-          <Link
-            icon={DocumentationIcon}
-            title="Documentation"
-            href="https://docs.budibase.com/" />
-          <Link
-            icon={CommunityIcon}
-            title="Community"
-            href="https://github.com/Budibase/budibase/discussions" />
-          <Link
-            icon={BugIcon}
-            title="Raise an issue"
-            href="https://github.com/Budibase/budibase/issues/new/choose" />
+{#if $auth}
+  {#if $auth.user}
+    <div class="root">
+      <div class="ui-nav">
+        <div class="home-logo">
+          <img src={Logo} alt="Budibase icon" />
         </div>
-        <div class="nav-bottom">
-          <BuilderSettingsButton />
+        <div class="nav-section">
+          <div class="nav-top">
+            <Link icon={AppsIcon} title="Apps" href="/" active />
+            <Link
+              icon={HostingIcon}
+              title="Hosting"
+              href="https://portal.budi.live/" />
+            <Link
+              icon={DocumentationIcon}
+              title="Documentation"
+              href="https://docs.budibase.com/" />
+            <Link
+              icon={CommunityIcon}
+              title="Community"
+              href="https://github.com/Budibase/budibase/discussions" />
+            <Link
+              icon={BugIcon}
+              title="Raise an issue"
+              href="https://github.com/Budibase/budibase/issues/new/choose" />
+          </div>
+          <div class="nav-bottom">
+            <BuilderSettingsButton />
+          </div>
         </div>
       </div>
+      <div class="main">
+        <slot />
+      </div>
     </div>
-    <div class="main">
-      <slot />
-    </div>
-  </div>
-{:else}
-  <section class="login">
-    <LoginForm />
-  </section>
+  {:else}
+    <section class="login">
+      <LoginForm />
+    </section>
+  {/if}
 {/if}
 
 <style>
diff --git a/packages/builder/src/stores/backend/auth.js b/packages/builder/src/stores/backend/auth.js
index d0a92237b7..0b3c6d3162 100644
--- a/packages/builder/src/stores/backend/auth.js
+++ b/packages/builder/src/stores/backend/auth.js
@@ -10,7 +10,7 @@ async function checkAuth() {
 }
 
 export function createAuthStore() {
-  const { subscribe, set } = writable({})
+  const { subscribe, set } = writable(null)
 
   checkAuth()
     .then(user => set({ user }))
@@ -21,16 +21,13 @@ export function createAuthStore() {
     login: async creds => {
       const response = await api.post(`/api/admin/auth`, creds)
       const json = await response.json()
-      if (json.user) {
-        localStorage.setItem("auth:user", JSON.stringify(json.user))
-        set({ user: json.user })
-      }
+      set({ user: json })
       return json
     },
     logout: async () => {
       const response = await api.post(`/api/auth/logout`)
       const json = await response.json()
-      set({ user: false })
+      set({ user: null })
     },
     createUser: async user => {
       const response = await api.post(`/api/admin/users`, user)