Redirect to login from client apps when required

packages/client/src/components/ClientApp.svelte

@@ -10,6 +10,8 @@
     initialise,
     screenStore,
     authStore,
+    routeStore,
+    builderStore,
   } from "../store"
   import { TableNames, ActionTypes } from "../constants"
 
@@ -18,13 +20,13 @@
   setContext("component", writable({}))
   setContext("context", createContextStore())
 
-  let loaded = false
+  let dataLoaded = false
 
   // Load app config
   onMount(async () => {
     await initialise()
     await authStore.actions.fetchUser()
-    loaded = true
+    dataLoaded = true
   })
 
   // Register this as a refreshable datasource so that user changes cause
@@ -36,9 +38,22 @@
       metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
     },
   ]
+
+  // Redirect to home layout if no matching route
+  $: {
+    if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) {
+      if ($authStore) {
+        routeStore.actions.navigate("/")
+      } else {
+        const returnUrl = `${window.location.pathname}${window.location.hash}`
+        const encodedUrl = encodeURIComponent(returnUrl)
+        window.location = `/builder/auth/login?returnUrl=${encodedUrl}`
+      }
+    }
+  }
 </script>
 
-{#if loaded && $screenStore.activeLayout}
+{#if dataLoaded && $screenStore.activeLayout}
   <div lang="en" dir="ltr" class="spectrum spectrum--medium spectrum--light">
     <Provider key="user" data={$authStore} {actions}>
       <Component definition={$screenStore.activeLayout.props} />

packages/client/src/components/Router.svelte

@@ -3,6 +3,7 @@
   import Router from "svelte-spa-router"
   import { routeStore } from "../store"
   import Screen from "./Screen.svelte"
+  import { onMount } from "svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")

packages/client/src/components/Screen.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { fade } from "svelte/transition"
   import { screenStore, routeStore } from "../store"
   import Component from "./Component.svelte"
   import Provider from "./Provider.svelte"
+  import { onMount } from "svelte"
 
   // Keep route params up to date
   export let params = {}
@@ -11,8 +11,12 @@
   // Get the screen definition for the current route
   $: screenDefinition = $screenStore.activeScreen?.props
 
-  // Redirect to home layout if no matching route
+  // Mark the router as loaded whenever the screen mounts
-  $: screenDefinition == null && routeStore.actions.navigate("/")
+  onMount(() => {
+    if (!$routeStore.routerLoaded) {
+      routeStore.actions.setRouterLoaded()
+    }
+  })
 </script>
 
 <!-- Ensure to fully remount when screen changes -->

packages/client/src/store/routes.js

@@ -8,6 +8,7 @@ const createRouteStore = () => {
     routeParams: {},
     activeRoute: null,
     routeSessionId: Math.random(),
+    routerLoaded: false,
   }
   const store = writable(initialState)
 
@@ -47,10 +48,19 @@ const createRouteStore = () => {
     })
   }
   const navigate = push
+  const setRouterLoaded = () => {
+    store.update(state => ({ ...state, routerLoaded: true }))
+  }
 
   return {
     subscribe: store.subscribe,
-    actions: { fetchRoutes, navigate, setRouteParams, setActiveRoute },
+    actions: {
+      fetchRoutes,
+      navigate,
+      setRouteParams,
+      setActiveRoute,
+      setRouterLoaded,
+    },
   }
 }
 

packages/client/src/store/screens.js

@@ -18,12 +18,11 @@ const createScreenStore = () => {
         activeLayout = $builderStore.layout
         activeScreen = $builderStore.screen
       } else {
-        // Otherwise find the correct screen by matching the current route
+        activeLayout = { props: { _component: "screenslot" } }
+
+        // Find the correct screen by matching the current route
         const { screens, layouts } = $config
-        activeLayout = layouts[0]
+        if ($routeStore.activeRoute) {
-        if (screens.length === 1) {
-          activeScreen = screens[0]
-        } else if ($routeStore.activeRoute) {
           activeScreen = screens.find(
             screen => screen._id === $routeStore.activeRoute.screenId
           )