diff --git a/.wundergraph/schemas/fetch-schemas.js b/.wundergraph/schemas/fetch-schemas.js
index ccdc3b5..24ebfab 100644
--- a/.wundergraph/schemas/fetch-schemas.js
+++ b/.wundergraph/schemas/fetch-schemas.js
@@ -18,7 +18,7 @@ export async function fetchSchemas() {
   // Fetch the GraphQL SDL schema
   const { data: schema } = await axios.get(`${serverUrl}/server/specs/graphql`, {
     headers: {
-      'Authorization': `Bearer ${process.env.DIRECTUS_API}`
+      'Authorization': process.env.DIRECTUS
     }
   });
 
diff --git a/.wundergraph/wundergraph.config.ts b/.wundergraph/wundergraph.config.ts
index 6c02478..d379073 100644
--- a/.wundergraph/wundergraph.config.ts
+++ b/.wundergraph/wundergraph.config.ts
@@ -3,6 +3,8 @@ import server from './wundergraph.server';
 import operations from './wundergraph.operations';
 import fs from 'fs';
 import path from 'path';
+import dotenv from 'dotenv';
+dotenv.config();
 
 const directusSchema = fs.readFileSync(path.join(path.resolve(), './schemas/directus.graphql'), 'utf8');
 
@@ -21,7 +23,7 @@ const directus = introspect.graphql({
 	loadSchemaFromString: directusSchema,
 	url: 'https://directus.andert.me/graphql',
 	headers: (builder) => builder
-		.addStaticHeader('Authorization', 'Bearer Bv5RknRvv5AZouxcYdBJgVOe3ZC493Y3')
+		.addStaticHeader('Authorization', new EnvironmentVariable('DIRECTUS', process.env.DIRECTUS))
 });
 
 // configureWunderGraph emits the configuration
@@ -53,4 +55,5 @@ configureWunderGraphApplication({
 	security: {
 		enableGraphQLEndpoint: process.env.NODE_ENV !== 'production' || process.env.GITPOD_WORKSPACE_ID !== undefined,
 	},
+
 });
diff --git a/package.json b/package.json
index 69222bc..2175bc1 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "axios": "^1.4.0",
     "dotenv": "^16.3.1",
     "graphql": "^16.8.0",
+    "jsonwebtoken": "^9.0.1",
     "path": "^0.12.7",
     "url": "^0.11.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cfb2d14..e0662b9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,9 @@ dependencies:
   graphql:
     specifier: ^16.8.0
     version: 16.8.0
+  jsonwebtoken:
+    specifier: ^9.0.1
+    version: 9.0.1
   path:
     specifier: ^0.12.7
     version: 0.12.7
@@ -3563,6 +3566,10 @@ packages:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
 
+  /buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+    dev: false
+
   /buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: false
@@ -4094,6 +4101,12 @@ packages:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
     dev: false
 
+  /ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+
   /ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: false
@@ -5226,6 +5239,31 @@ packages:
       graceful-fs: 4.2.11
     dev: false
 
+  /jsonwebtoken@9.0.1:
+    resolution: {integrity: sha512-K8wx7eJ5TPvEjuiVSkv167EVboBDv9PZdDoF7BgeQnBLVvZWW9clr2PsQHVJDTKaEIH5JBIwHujGcHp7GgI2eg==}
+    engines: {node: '>=12', npm: '>=6'}
+    dependencies:
+      jws: 3.2.2
+      lodash: 4.17.21
+      ms: 2.1.3
+      semver: 7.5.4
+    dev: false
+
+  /jwa@1.4.1:
+    resolution: {integrity: sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==}
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+    dev: false
+
+  /jws@3.2.2:
+    resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
+    dependencies:
+      jwa: 1.4.1
+      safe-buffer: 5.2.1
+    dev: false
+
   /kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
diff --git a/src/lib/Login.svelte b/src/lib/Login.svelte
new file mode 100644
index 0000000..bba8816
--- /dev/null
+++ b/src/lib/Login.svelte
@@ -0,0 +1,7 @@
+<script>
+  async function login() {
+    alert("login");
+  }
+</script>
+
+<button on:click={login}>Login</button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3b44196..67c3544 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,21 @@
-<script>
-  import GraphQL from "./GraphQL.svelte";
+<script lang="ts">
+  import { createQuery } from "../lib/wundergraph";
+  import Login from "$lib/Login.svelte";
+
+  const projectsQuery = createQuery({
+    operationName: "Projects",
+  });
 </script>
 
-<GraphQL />
+<Login />
+<br />
+Projects
+<div class="results">
+  {#if $projectsQuery.isLoading}
+    <p>Loading...</p>
+  {:else if $projectsQuery.error}
+    <pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
+  {:else}
+    <pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
+  {/if}
+</div>
diff --git a/src/routes/GraphQL.svelte b/src/routes/GraphQL.svelte
deleted file mode 100644
index 5cdd44b..0000000
--- a/src/routes/GraphQL.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { createQuery } from "../lib/wundergraph";
-
-  //   const dragonsQuery = createQuery({
-  //     operationName: "Dragons",
-  //   });
-  const projectsQuery = createQuery({
-    operationName: "Projects",
-  });
-  const todosQuery = createQuery({
-    operationName: "Todos",
-  });
-</script>
-
-<!-- Dragons
-<div class="results">
-  {#if $dragonsQuery.isLoading}
-    <p>Loading...</p>
-  {:else if $dragonsQuery.error}
-    <pre>Error: {JSON.stringify($dragonsQuery.error, null, 2)}</pre>
-  {:else}
-    <pre>{JSON.stringify($dragonsQuery.data, null, 2)}</pre>
-  {/if}
-</div> -->
-
-Projects
-<div class="results">
-  {#if $projectsQuery.isLoading}
-    <p>Loading...</p>
-  {:else if $projectsQuery.error}
-    <pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
-  {:else}
-    <pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
-  {/if}
-</div>
-
-Todos
-<div class="results">
-  {#if $todosQuery.isLoading}
-    <p>Loading...</p>
-  {:else if $todosQuery.error}
-    <pre>Error: {JSON.stringify($todosQuery.error, null, 2)}</pre>
-  {:else}
-    <pre>{JSON.stringify($todosQuery.data, null, 2)}</pre>
-  {/if}
-</div>