Added JWT based Authorization for any operation

.wundergraph/wundergraph.config.ts

@@ -64,4 +64,7 @@ configureWunderGraphApplication({
 			],
 		},
 	},
+	authorization: {
+		roles: ['admin'],
+	},
 });

.wundergraph/wundergraph.operations.ts

@@ -5,7 +5,7 @@ export default configureWunderGraphOperations<OperationsConfiguration>({
 	operations: {
 		defaultConfig: {
 			authentication: {
-				required: false,
+				required: true,
 			},
 		},
 		queries: (config) => ({

src/lib/Login.svelte

@@ -1,5 +1,6 @@
 <script>
   import Cookies from "js-cookie";
+
   async function login() {
     const response = await fetch("/api/auth", { method: "POST" });
     if (!response.ok) {
@@ -8,6 +9,7 @@
       let { token } = await response.json();
       Cookies.set("token", token);
       alert(`Login Success: ${token}`);
+      console.log(token);
     }
   }
 </script>

src/lib/User.svelte

@@ -21,6 +21,7 @@
 
 {#if user}
   <p>Welcome, {user.name}!</p>
+  <p>Your roles: {user.roles.join(", ")}</p>
 {:else}
   <p>Loading...</p>
 {/if}

src/lib/wundergraph/index.ts

@@ -7,4 +7,4 @@ const client = createClient();
 const { createFileUpload, createMutation, createQuery, createSubscription, getAuth, getUser, queryKey, prefetchQuery } =
 	createSvelteClient<Operations>(client);
 
-export { createFileUpload, createMutation, createQuery, createSubscription, getAuth, getUser, queryKey, prefetchQuery };
+export { createFileUpload, createMutation, createQuery, createSubscription, getAuth, getUser, queryKey, prefetchQuery, client };

src/routes/+layout.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
   import { QueryClientProvider } from "@tanstack/svelte-query";
   import type { LayoutData } from "./$types";
+  import { client } from "$lib/wundergraph";
+  import Cookies from "js-cookie";
 
   export let data: LayoutData;
+
+  const token = Cookies.get("token");
+
+  // Set the Authorization header token
+  if (token) {
+    client.setAuthorizationToken(token);
+  }
 </script>
 
 <QueryClientProvider client={data.queryClient}>

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

@@ -5,7 +5,7 @@ import { error } from '@sveltejs/kit';
 const secretKey = 'mysecrettestkey';
 
 export async function POST() {
-  const token = jwt.sign({ name: 'Samuel', loggedIn: true }, secretKey);
+  const token = jwt.sign({ name: 'Samuel', loggedIn: true, roles: ['admin'] }, secretKey);
   if (!token) {
     throw error(400, 'No token created.');
   }