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"; } @@ -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"; } @@ -221,7 +248,7 @@ import bcrypt from "bcrypt"; } // set the session - await setUserSession(event, { + await replaceUserSession(event, { user: { id: user.id, name: user.name,