Update demo with login/logout

demo/src/routes/+layout.server.js

@@ -0,0 +1,5 @@
+export const load = ({ platform }) => {
+	return {
+		clientPrincipal: platform?.clientPrincipal
+	};
+};

demo/src/routes/+layout.svelte

@@ -1,12 +1,17 @@
 <script>
 	import Header from './Header.svelte';
 	import './styles.css';
+
+	export let data;
 </script>
 
 <div class="app">
-	<Header />
+	<Header isLoggedIn={!!data.clientPrincipal} />
 
 	<main>
+		{#if data.clientPrincipal}
+			<p>{JSON.stringify(data.clientPrincipal)}</p>
+		{/if}
 		<slot />
 	</main>
 

demo/src/routes/Header.svelte

@@ -2,6 +2,8 @@
 	import { page } from '$app/stores';
 	import logo from '$lib/images/svelte-logo.svg';
 	import github from '$lib/images/github.svg';
+
+	export let isLoggedIn = false;
 </script>
 
 <header>
@@ -25,6 +27,15 @@
 			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
 				<a href="/sverdle">Sverdle</a>
 			</li>
+			{#if isLoggedIn}
+				<li>
+					<a href="/.auth/logout" data-sveltekit-reload>Logout</a>
+				</li>
+			{:else}
+				<li>
+					<a href="/.auth/login/github" data-sveltekit-reload>Login</a>
+				</li>
+			{/if}
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />

demo/src/routes/about/+page.js

@@ -3,7 +3,3 @@ import { dev } from '$app/environment';
 // we don't need any JS on this page, though we'll load
 // it in dev so that we get hot module replacement
 export const csr = dev;
-
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in production
-export const prerender = true;