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 5b24d512a2..0ee723085f 100644 --- a/docs/2.guide/4.recipes/4.sessions-and-authentication.md +++ b/docs/2.guide/4.recipes/4.sessions-and-authentication.md @@ -3,9 +3,11 @@ title: 'Sessions and Authentication' description: "User registration and authentication is an extremely common requirement in web apps. This recipe will show you how to implement basic user registration and authentication in you Nuxt app." --- + ## Introduction -In this recipe we'll be using [Drizzle](https://orm.drizzle.team/) with [db0](https://db0.unjs.io/) for database queries, but you can use any ORM or database connection strategy you prefer. +In this recipe we'll be setting up user registration, login, sessions, and authentication in a full-stack Nuxt app. + We'll be using [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) by [Altinux (Sébastien Chopin)](https://github.com/Atinux) which provides convenient utilities for managing front-end and back-end session data. We'll install and use this to get the core session management functionality we're going to need to manage user logins. For the database ORM we'll be using [Drizzle](https://orm.drizzle.team/) with [db0](https://db0.unjs.io/), but you can use any ORM or database connection strategy you prefer. You'll need a `users` table in your database with the following columns: - `id` (int, primary key, auto increment) @@ -18,6 +20,10 @@ Additionally, we'll use [nuxt-aut-utils](https://github.com/Atinux/nuxt-auth-uti ### 1. Install nuxt-auth-utils + +Install the [auth-utils](https://github.com/Atinux/nuxt-auth-utils) module using the `nuxi` CLI. + + ```bash npx nuxi@latest module add auth-utils ``` @@ -32,7 +38,7 @@ NUXT_SESSION_PASSWORD=password-with-at-least-32-characters ### 2. Create a registration page -Create a new page in your Nuxt app for user registration. This page should have a form with fields for email and password. We'll intercept the form submission using `@submit.prevent` and use [`$fetch`](/docs/getting-started/data-fetching#fetch) to post the data to `/api/register`. +Create a new page in your Nuxt app for user registration. This page should have a form with fields for email and password. We'll intercept the form submission using `@submit.prevent` and use [`$fetch`](/docs/getting-started/data-fetching#fetch) to post the data to `/api/register`. Here's an example registration form for reference: ```vue [pages/register.vue]