Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-12-01 18:07:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

[autofix.ci] apply automated fixes

Browse Source
This commit is contained in:
autofix-ci[bot] 2024-05-21 08:24:51 +00:00 committed by GitHub
parent 51450631cd
commit 40d9df5038
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/2.guide/4.recipes/4.sessions-and-authentication.md
View File

@ -12,12 +12,12 @@ You'll need a `users` table in your database with the following columns:
- `email` (varchar) - `email` (varchar)
- `password` (varchar) - `password` (varchar)
Additionally, we'll use [nuxt-aut-utils](https://github.com/Atinux/nuxt-auth-utils) by [Atinux](https://github.com/Atinux) to handle the authentication and session management. Additionally, we'll use [nuxt-aut-utils](https://github.com/Atinux/nuxt-auth-utils) by [Atinux](https://github.com/Atinux) to handle the authentication and session management.
## Steps ## Steps
### 1. Install nuxt-auth-utils ### 1. Install nuxt-auth-utils
```bash ```bash
pnpm install nuxt-auth-utils pnpm install nuxt-auth-utils
``` ```
@ -31,6 +31,7 @@ NUXT_SESSION_PASSWORD=password-with-at-least-32-characters
``` ```
### 2. Create a registration page ### 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`](https://nuxt.com/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`](https://nuxt.com/docs/getting-started/data-fetching#fetch) to post the data to `/api/register`.
```vue [pages/register.vue] ```vue [pages/register.vue]
@ -101,6 +102,7 @@ Create a new page in your Nuxt app for user registration. This page should have
``` ```
### 3. Create an API route for registration ### 3. Create an API route for registration
With the UI created we'll need to add a route to receive the registration form data. This route should accept a POST request with the email and password in the request body. It should hash the password and insert the user into the database. This route will only accept POST requests, so we'll follow the instructions for [API route methods](https://nuxt.com/docs/guide/directory-structure/server#matching-http-method) and name the file with `*.post.ts` to restrict the endpoint to only accept POST. With the UI created we'll need to add a route to receive the registration form data. This route should accept a POST request with the email and password in the request body. It should hash the password and insert the user into the database. This route will only accept POST requests, so we'll follow the instructions for [API route methods](https://nuxt.com/docs/guide/directory-structure/server#matching-http-method) and name the file with `*.post.ts` to restrict the endpoint to only accept POST.
This is a very simple example of registration. You would probably want to add some error handling and nice response messages. Additionally, you could log the user in as part of the registration process rather than redirecting them to the login screen. This is a very simple example of registration. You would probably want to add some error handling and nice response messages. Additionally, you could log the user in as part of the registration process rather than redirecting them to the login screen.
@ -126,6 +128,7 @@ export default defineEventHandler(async (event) => {
``` ```
### 4. Create a login page ### 4. Create a login page
Create a new page in your Nuxt app for user login. This page should have a form with fields for email and password and should submit a POST request to `/api/login`. Create a new page in your Nuxt app for user login. This page should have a form with fields for email and password and should submit a POST request to `/api/login`.
Like the registration page, we'll intercept the form submission using `@submit.prevent` and use [`$fetch`](https://nuxt.com/docs/getting-started/data-fetching#fetch) to post the data to `/api/login`. Like the registration page, we'll intercept the form submission using `@submit.prevent` and use [`$fetch`](https://nuxt.com/docs/getting-started/data-fetching#fetch) to post the data to `/api/login`.
@ -195,6 +198,7 @@ This is a very simple login form example, so you'd definitely want to add more v
``` ```
### 5. Create an API route for login ### 5. Create an API route for login
With the login form created, we need to create an API route to handle the login request. This route should accept a POST request with the email and password in the request body and check the email and password against the database. If the user and password match, we'll set a session cookie to log the user in. With the login form created, we need to create an API route to handle the login request. This route should accept a POST request with the email and password in the request body and check the email and password against the database. If the user and password match, we'll set a session cookie to log the user in.
```typescript [server/api/auth/login.post.ts] ```typescript [server/api/auth/login.post.ts]
@ -229,6 +233,7 @@ import bcrypt from "bcrypt";
The user should now be logged in! With the session set, we can get the current user session in any API route or page by calling `getUserSession(event)` which is auto-imported as a util function from the `nuxt-auth-utils` package. The user should now be logged in! With the session set, we can get the current user session in any API route or page by calling `getUserSession(event)` which is auto-imported as a util function from the `nuxt-auth-utils` package.
### 6. Create a logout API route ### 6. Create a logout API route
Users need to be able to log out, so we should create an API route to allow them to do this. This should require post request as well, just like login. We'll clear the session when this endpoint is called. Users need to be able to log out, so we should create an API route to allow them to do this. This should require post request as well, just like login. We'll clear the session when this endpoint is called.
```typescript [server/api/auth/logout.post.ts] ```typescript [server/api/auth/logout.post.ts]
@ -239,6 +244,7 @@ export default defineEventHandler(async (event) => {
``` ```
### 7. Create a server utility function to protect routes ### 7. Create a server utility function to protect routes
Protecting server routes is key to making sure your data are safe. Front-end middleware is helpful for the user, but without back-end protection your data can still be accessed. Because of this, it is critical that we create a server utility function to protect any API routes with sensitive data. For these sensitive routes, we should return a 401 error if the user is not logged in. Protecting server routes is key to making sure your data are safe. Front-end middleware is helpful for the user, but without back-end protection your data can still be accessed. Because of this, it is critical that we create a server utility function to protect any API routes with sensitive data. For these sensitive routes, we should return a 401 error if the user is not logged in.
We'll create a utility function which will make a reusable function to help protect our endpoints. Functions in the `/server/util` folder are auto-imported to server endpoints. You can read about the `/server/util` folder [here](https://nuxt.com/docs/guide/directory-structure/utils). This utility function will help us prevent data from being accessed by users who are not logged in. We'll create a utility function which will make a reusable function to help protect our endpoints. Functions in the `/server/util` folder are auto-imported to server endpoints. You can read about the `/server/util` folder [here](https://nuxt.com/docs/guide/directory-structure/utils). This utility function will help us prevent data from being accessed by users who are not logged in.
@ -252,6 +258,7 @@ export default async (event) => {
``` ```
### 8. Protect a route with the utility function ### 8. Protect a route with the utility function
Now that we have the utility function to protect routes, we can use it in any API route to ensure that only logged-in users can access the route. Now that we have the utility function to protect routes, we can use it in any API route to ensure that only logged-in users can access the route.
In the example below, we use the `requireUserLoggedIn` utility function to protect the `/api/users.get` route. This route will only be accessible to logged-in users. In the example below, we use the `requireUserLoggedIn` utility function to protect the `/api/users.get` route. This route will only be accessible to logged-in users.
@ -273,9 +280,9 @@ export default defineEventHandler(async (event) => {
}); });
``` ```
### 9. Create a front-end middleware to protect routes ### 9. Create a front-end middleware to protect routes
Our data are safe with the back-end route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a (front-end middleware)[https://nuxt.com/docs/guide/directory-structure/middleware] to protect the route on the client side and redirect users to a login page.
Our data are safe with the back-end route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [front-end middleware](https://nuxt.com/docs/guide/directory-structure/middleware) to protect the route on the client side and redirect users to a login page.
`nuxt-auth-utils` provides a convenient `useUserSession` composable which we'll use to check if the user is actually logged in, and redirect them if they are not. `nuxt-auth-utils` provides a convenient `useUserSession` composable which we'll use to check if the user is actually logged in, and redirect them if they are not.
@ -294,6 +301,7 @@ export default defineNuxtRouteMiddleware(() => {
``` ```
### 10. Protect a route with the front-end middleware ### 10. Protect a route with the front-end middleware
Now that we have the front-end middleware to protect front-end routes, we can use it in any page to ensure that only logged-in users can access the route. Users will be redirected to the login page if they are not authenticated. Now that we have the front-end middleware to protect front-end routes, we can use it in any page to ensure that only logged-in users can access the route. Users will be redirected to the login page if they are not authenticated.
We'll use [`definePageMeta`](https://nuxt.com/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect. We'll use [`definePageMeta`](https://nuxt.com/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
@ -328,6 +336,6 @@ definePageMeta({
</template> </template>
``` ```
### Complete! ### Complete
We've successfully set up user registration and authentication in our Nuxt app. Users can now register, log in, and log out. We've also protected sensitive routes on the server and client side to ensure that only authenticated users can access them. We've successfully set up user registration and authentication in our Nuxt app. Users can now register, log in, and log out. We've also protected sensitive routes on the server and client side to ensure that only authenticated users can access them.