feat: 🎸 hook up role-select demo to api endpoint and clerk

src/hooks.server.ts

@@ -5,7 +5,7 @@ export const handle: Handle = async ({ event, resolve }) => {
   const sessionToken = event.cookies.get('__session');
   if (sessionToken) {
     try {
-      const session = await verifySession();
+      const session = await verifySession(sessionToken);
       if (session) {
         event.locals.session = session;
       }

src/lib/components/RoleSelect.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
   import { getClerkStore } from '$lib/clerk-svelte';
   const clerk = getClerkStore();
+
   let user = $clerk?.user;
-  let role = (user?.publicMetadata.role as string) || '';
+  $: role = (user?.publicMetadata.role as string) || '';
+
   let loading = false;
 
   const setRole = async (e: Event) => {
     const target = e.target as HTMLSelectElement;
-    role = target.value;
+    loading = true;
+    await fetch('/api/updateRole', {
+      method: 'POST', // or 'PUT'
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ role: target.value }),
+    });
+    loading = false;
   };
 </script>
 

src/routes/api/updateRole/+server.ts

@@ -7,10 +7,10 @@ export const POST: RequestHandler = async ({ locals, request }) => {
     return json({ ok: false, error: 'Users Session not found' });
   }
   const body = await request.json();
-  users.updateUser(locals.session.userId, {
+  const user = await users.updateUser(locals.session.userId, {
     publicMetadata: {
       role: body.role,
     },
   });
-  return json({ ok: true });
+  return json({ ok: true, user });
 };