From cc354886f2d208539b78fcc405d4087283be3b39 Mon Sep 17 00:00:00 2001
From: David Nahodyl <david@gearboxgo.com>
Date: Wed, 5 Jun 2024 14:27:13 -0400
Subject: [PATCH] improved login process to use fetch() without full page
 reload and comments

---
 .../4.sessions-and-authentication.md          | 65 +++++++++++++------
 1 file changed, 46 insertions(+), 19 deletions(-)

diff --git a/docs/2.guide/4.recipes/4.sessions-and-authentication.md b/docs/2.guide/4.recipes/4.sessions-and-authentication.md
index 60e92a9e96..5b24d512a2 100644
--- a/docs/2.guide/4.recipes/4.sessions-and-authentication.md
+++ b/docs/2.guide/4.recipes/4.sessions-and-authentication.md
@@ -49,16 +49,27 @@ Create a new page in your Nuxt app for user registration. This page should have
     error.value = null;
 
     // perform the login
-    await $fetch("/api/register", {
-      method: "POST",
-      body: form.value,
-      onResponseError: () => {
-        error.value = "Error Registering User";
-      },
-    });
+    try {
+      await $fetch("/api/register", {
+        method: "POST",
+        body: form.value,
+      });
+    } catch (e) {
+      // if there's an error, set the error message and return early
+      error.value = "Error Registering User";
+      return;
+    }
+    // refresh the session status now that the user is logged in
+    const { fetch } = useUserSession();
+    await fetch();
+    // you may want to use something like Pinia to manage global state of the logged-in user
+    // update Pinia state here...
 
-    // we're not using Nuxt Router here so that we can easily trigger a whole page load and get everything refreshed now that the user is logged in
-    window.location.href = "/login";
+    // take the user to the auth-only users index page now that they're logged in
+    await navigateTo("/users");
+
+    // Alternative - Don't use Nuxt Router here so that we can easily trigger a whole page load and get the whole UI refreshed now that the user is logged in.
+    // window.location.href = "/users";
   }
 </script>
 
@@ -124,6 +135,10 @@ export default defineEventHandler(async (event) => {
     email: body.email,
     password: passwordHash,
   });
+
+  // log the user in as the user that was just created
+  const user = (await db.select().from(users).where(eq(users.email, body.email)).limit(1))[0];
+  await auth.login(event, user);
 });
 ```
 
@@ -151,16 +166,28 @@ This is a very simple login form example, so you'd definitely want to add more v
     error.value = null;
 
     // perform the login
-    await $fetch("/api/auth/login", {
-      method: "POST",
-      body: form.value,
-      onResponseError: () => {
-        error.value = "Error logging in";
-      },
-    });
+    try {
+      await $fetch("/api/auth/login", {
+        method: "POST",
+        body: loginForm.value,
+      });
+    } catch (e) {
+      // if there's an error, set the error message and return early
+      error.value = "Error logging in";
+      return;
+    }
 
-    // we're not using Nuxt Router here so that we can easily trigger a whole page load and get everything refreshed now that the user is logged in
-    window.location.href = "/";
+    // refresh the session status now that the user is logged in
+    const { fetch } = useUserSession();
+    await fetch();
+    // you may want to use something like Pinia to manage global state of the logged-in user
+    // update Pinia state here...
+
+    // take the user to the auth-only users index page now that they're logged in
+    await navigateTo("/users");
+
+    // Alternative - Don't use Nuxt Router here so that we can easily trigger a whole page load and get the whole UI refreshed now that the user is logged in.
+    // window.location.href = "/users";
   }
 </script>
 
@@ -221,7 +248,7 @@ import bcrypt from "bcrypt";
   }
 
   // set the session
-  await setUserSession(event, {
+  await replaceUserSession(event, {
     user: {
       id: user.id,
       name: user.name,