Merge pull request #3 from corbado/2-fix-issues

fix the issue with the logout & refactor the code
corbado · Aug 13, 2024 · 82d5dbc · 82d5dbc
2 parents 8a8896a + 909374b
commit 82d5dbc
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,6 @@ Please see the full [blog post](https://www.corbado.com/blog/astro-passkeys) to
 - `src/components/PasskeyList.astro`: Component for displaying the list of passkeys.
 - `src/pages/Login.astro`: Page component for the sign-up / login screen.
 - `src/pages/Profile.astro`: Page component for the user profile information shown after successful authentication.
-- `corbadoSetup.js`: JavaScript file that contains the shared logic for initializing Corbado.
 
 ## Setup
 

diff --git a/corbadoSetup.js b/corbadoSetup.js
diff --git a/src/components/PasskeyList.astro b/src/components/PasskeyList.astro
@@ -1,6 +1,14 @@
+---
+const projectId = import.meta.env.PUBLIC_CORBADO_PROJECT_ID;
+---
+
 <div id="passkey-list"></div>
-<script type="module">
-  import { loadCorbadoProject } from "./corbadoSetup.js";
+<script type="module" define:vars={{ projectId }}>
+  const loadCorbadoProject = async () => {
+    await Corbado.load({
+      projectId: projectId,
+    });
+  };
 
   const initializePasskeyList = async () => {
     await loadCorbadoProject();

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-
+const projectId = import.meta.env.PUBLIC_CORBADO_PROJECT_ID;
 ---
 
 <html>
@@ -37,8 +37,12 @@
     <div class="container">
       <div id="corbado-auth"></div>
     </div>
-    <script type="module">
-      import { loadCorbadoProject } from "./corbadoSetup.js";
+    <script type="module" define:vars={{ projectId }}>
+      const loadCorbadoProject = async () => {
+        await Corbado.load({
+          projectId: projectId,
+        });
+      };
 
       const initializeCorbado = async () => {
         await loadCorbadoProject();

diff --git a/src/pages/profile.astro b/src/pages/profile.astro
@@ -1,5 +1,6 @@
 ---
 import PasskeyList from "../components/PasskeyList.astro";
+const projectId = import.meta.env.PUBLIC_CORBADO_PROJECT_ID;
 ---
 
 <html>
@@ -40,8 +41,12 @@ import PasskeyList from "../components/PasskeyList.astro";
       <PasskeyList />
       <button id="logout-button" style="display: none;">Logout</button>
     </div>
-    <script type="module">
-      import { loadCorbadoProject } from "./corbadoSetup.js";
+    <script type="module" define:vars={{ projectId }}>
+      const loadCorbadoProject = async () => {
+        await Corbado.load({
+          projectId: projectId,
+        });
+      };
 
       const initializeProfile = async () => {
         await loadCorbadoProject();
@@ -55,11 +60,11 @@ import PasskeyList from "../components/PasskeyList.astro";
           logoutButton.style.display = "block";
           logoutButton.addEventListener("click", () => {
             Corbado.logout();
-            window.location.href = "/login";
+            window.location.href = "/#login-init";
           });
         } else {
           profileContent.innerHTML =
-            '<p>Please <a href="/login">login</a> to view your profile.</p>';
+            '<p>Please <a href="/#login-init">login</a> to view your profile.</p>';
         }
       };