chore: add session to sveltekit dev app homepage (#10216)

nextauthjs · Mar 4, 2024 · 0b40a8a · 0b40a8a
1 parent 0168f3c
commit 0b40a8a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/apps/dev/sveltekit/src/routes/+page.svelte b/apps/dev/sveltekit/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { page } from "$app/stores"
   import { SignIn } from "@auth/sveltekit/components"
   import { signIn } from "@auth/sveltekit/client"
 
@@ -13,6 +14,17 @@
     with <a href="https://sveltekit.authjs.dev">SvelteKit Auth</a> for authentication.
   </p>
 
+  <div class="session-code">
+    <div class="session-code-header">
+      <h3>Session</h3>
+    </div>
+    <div class="session-code-body">
+      <pre>
+{JSON.stringify($page.data.session, null, 2)}
+      </pre>
+    </div>
+  </div>
+
   <div class="card">
     <div class="card-header">
       <h3>Server Actions</h3>
@@ -37,8 +49,13 @@
         >
           <span slot="submitButton">Sign In with Credentials</span>
           <div slot="credentials" class="input-wrapper">
-            <label for="password">Password</label>
-            <input type="password" id="password" name="password" required />
+            <label for="server-password">Password</label>
+            <input
+              type="password"
+              id="server-password"
+              name="password"
+              required
+            />
           </div>
         </SignIn>
       </div>
@@ -64,11 +81,11 @@
         </div>
         <div class="wrapper-form">
           <div class="input-wrapper">
-            <label for="password">Password</label>
+            <label for="client-password">Password</label>
             <input
               bind:value={password}
               type="password"
-              id="password"
+              id="client-password"
               name="password"
               required
             />

diff --git a/apps/dev/sveltekit/src/style.css b/apps/dev/sveltekit/src/style.css
@@ -79,6 +79,27 @@ main {
   justify-content: flex-start;
 }
 
+.session-code {
+  background-color: #f3f3f3;
+  border-radius: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+
+  .session-code-header {
+    border-radius: 0.75rem 0.75rem 0 0;
+    background-color: #dfdfdf;
+    padding: 1.1rem;
+  }
+
+  .session-code-body {
+    display: flex;
+    flex-direction: column;
+    padding: 1.1rem;
+    gap: 2rem;
+  }
+}
+
 .card {
   border-radius: 0.75rem;
   background-color: #f3f3f3;