fix: hydrate `user` data & update keys

site/src/backend/auth.js

@@ -59,9 +59,9 @@ export async function isUser(req, res) {
 }
 
 export function toUser(obj={}) {
-	const { uid, username, name:displayName, avatar } = obj;
+	const { uid, username, name, avatar } = obj;
 	const token = sign({ uid, username });
-	return { uid, username, displayName, avatar, token };
+	return { uid, username, name, avatar, token };
 }
 
 export function API() {

site/src/routes/auth/me.json.js

@@ -1,10 +1,8 @@
 import send from '@polka/send';
+import { isUser, toUser } from '../../backend/auth';
 
-export function get(req, res) {
-	if (!req.session || !req.session.passport || !req.session.passport.user) {
-		return send(res, 200, 'null');
-	}
-
-	const { id, username, displayName, photo } = req.session.passport.user;
-	send(res, 200, { id, username, displayName, photo });
+export async function get(req, res) {
+	const user = await isUser(req, res);
+	res.setHeader('Cache-Control', 'private, no-cache, no-store');
+	return send(res, 200, user ? toUser(user) : null);
 }

site/src/routes/repl/_components/AppControls/UserMenu.svelte

@@ -4,12 +4,12 @@
 	let showMenu = false;
 	let name;
 
-	$: name = $user.displayName || $user.username;
+	$: name = $user.name || $user.username;
 </script>
 
 <div class="user" on:mouseenter="{() => showMenu = true}" on:mouseleave="{() => showMenu = false}">
 	<span>{name}</span>
-	<img alt="{name} avatar" src="{$user.photo}">
+	<img alt="{name} avatar" src="{$user.avatar}">
 
 	{#if showMenu}
 		<div class="menu">
@@ -99,4 +99,4 @@
 			display: inline-block;
 		}
 	}
-</style>
+</style>

site/src/server.js

@@ -14,20 +14,7 @@ API()
 		}),
 
 		sapper.middleware({
-			// TODO update Sapper so that we can pass props to the client
-			props: req => {
-				const user = req.user;
-
-				return {
-					user: user && {
-						// strip access token
-						id: user.id,
-						username: user.username,
-						displayName: user.displayName,
-						photo: user.photo
-					}
-				};
-			}
+			//
 		})
 	)
 	.listen(PORT);

site/src/user.js

@@ -1,17 +1,33 @@
 import { writable } from 'svelte/store';
 
+
 export const user = writable(null);
 
 if (process.browser) {
-	// TODO this is a workaround for the fact that there's currently
-	// no way to pass session data from server to client
-	// TODO there is now! replace this with the session mechanism
-	fetch('/auth/me.json', { credentials: 'include' })
-		.then(r => r.json())
-		.then(user.set);
+	const storageKey = 'svelte-dev:token';
+
+	// On load, get the last-known user token (if any)
+	// Note: We can skip this all by writing User data?
+	const token = localStorage.getItem(storageKey);
+
+	// Write changes to localStorage
+	user.subscribe(obj => {
+		if (obj) {
+			localStorage.setItem(storageKey, obj.token);
+		} else {
+			localStorage.removeItem(storageKey);
+		}
+	});
+
+	if (token) {
+		// If token, refresh the User data from API
+		const headers = { Authorization: `Bearer ${token}` };
+		fetch('/auth/me.json', { headers })
+			.then(r => r.ok ? r.json() : null)
+			.then(user.set);
+	}
 }
 
-export async function logout() {
-	const r = await fetch(`/auth/logout`, { method: 'POST' });
-	if (r.ok) user.set(null);
-}
+export function logout() {
+	user.set(null);
+}