Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add example for handling authentication with useCookie in Nuxt docs #29538

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

docs: add example for handling authentication with useCookie in Nuxt docs #29538

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
580cc68
docs: Add example for handling authentication with useCookie in Nuxt …
AngeloSchulerPiletti Oct 15, 2024
1b885c9
[autofix.ci] apply automated fixes
autofix-ci[bot] Oct 15, 2024
35e8572
Merge branch 'main' into main
AngeloSchulerPiletti Oct 28, 2024
b7f0369
Merge branch 'main' into main
AngeloSchulerPiletti Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions docs/3.api/2.composables/use-cookie.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,3 +231,36 @@ export default defineEventHandler(event => {
```

:link-example{to="/docs/examples/advanced/use-cookie"}

## Handling Authentication with Cookies

You can manage authentication tokens using cookies like this:

Comment on lines +234 to +238
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance the authentication section with security considerations and best practices.

The introduction should provide more context and security considerations for handling authentication tokens with cookies. Consider adding:

  • Explanation of why cookies are preferred over localStorage for token storage
  • CSRF protection recommendations when using cookies for authentication
  • Token expiration and refresh token patterns
  • Security implications of different cookie configurations

Here's a suggested expansion of the introduction:

 ## Handling Authentication with Cookies

-You can manage authentication tokens using cookies like this:
+Cookies are often preferred over localStorage for storing authentication tokens due to their enhanced security features and protection against XSS attacks. Here's how to implement secure cookie-based authentication:
+
+::warning
+When implementing authentication, consider these security best practices:
+- Use `httpOnly: true` to prevent XSS attacks from accessing the token
+- Implement CSRF protection for cookie-based authentication
+- Consider token expiration and refresh token patterns
+- Use secure configurations like `secure: true` in production
+::
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
## Handling Authentication with Cookies
You can manage authentication tokens using cookies like this:
## Handling Authentication with Cookies
Cookies are often preferred over localStorage for storing authentication tokens due to their enhanced security features and protection against XSS attacks. Here's how to implement secure cookie-based authentication:
::warning
When implementing authentication, consider these security best practices:
- Use `httpOnly: true` to prevent XSS attacks from accessing the token
- Implement CSRF protection for cookie-based authentication
- Consider token expiration and refresh token patterns
- Use secure configurations like `secure: true` in production
::

```ts [plugins/auth.ts]
export default defineNuxtPlugin(() => {
const nuxtApp = useNuxtApp()
const authStore = useAuthStore()
const accessToken = useCookie('accessToken', {
sameSite: 'strict',
})
Comment on lines +243 to +245
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Strengthen cookie security configuration.

The cookie configuration is missing important security options that are crucial for storing authentication tokens.

 const accessToken = useCookie('accessToken', {
   sameSite: 'strict',
+  httpOnly: true,      // Prevent XSS attacks from accessing the token
+  secure: process.env.NODE_ENV === 'production',  // Require HTTPS in production
+  maxAge: 7200,        // Token expiration in seconds
+  path: '/',           // Cookie accessibility path
 })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const accessToken = useCookie('accessToken', {
sameSite: 'strict',
})
const accessToken = useCookie('accessToken', {
sameSite: 'strict',
httpOnly: true, // Prevent XSS attacks from accessing the token
secure: process.env.NODE_ENV === 'production', // Require HTTPS in production
maxAge: 7200, // Token expiration in seconds
path: '/', // Cookie accessibility path
})


return {
provide: {
getAccessToken() {
return accessToken.value
},
setAccessToken(accessToken: string) {
accessToken.value = accessToken
},
loginUser(user: User) {
nuxtApp.$setAccessToken(user.accessToken)
authStore.setUser(user)
},
logout() {
nuxtApp.$setAccessToken('')
authStore.logout()
},
},
}
})
```
Comment on lines +239 to +266
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add TypeScript types and improve error handling.

The plugin implementation needs better type safety and error handling:

+interface User {
+  accessToken: string;
+  // add other user properties
+}
+
 export default defineNuxtPlugin(() => {
   const nuxtApp = useNuxtApp()
   const authStore = useAuthStore()
   const accessToken = useCookie('accessToken', {
     sameSite: 'strict',
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
   })

   return {
     provide: {
-      getAccessToken() { 
+      getAccessToken(): string | null { 
         return accessToken.value
       },
-      setAccessToken(accessToken: string) { 
+      setAccessToken(token: string): void { 
         try {
-          accessToken.value = accessToken
+          accessToken.value = token
+        } catch (error) {
+          console.error('Failed to set access token:', error)
+          throw new Error('Authentication failed')
+        }
       },
-      loginUser(user: User) {
+      async loginUser(user: User): Promise<void> {
+        if (!user?.accessToken) {
+          throw new Error('Invalid user data')
+        }
         nuxtApp.$setAccessToken(user.accessToken)
         authStore.setUser(user)
       },
-      logout() {
+      async logout(): Promise<void> {
         nuxtApp.$setAccessToken('')
+        accessToken.value = null
         authStore.logout()
+        await navigateTo('/login')  // Redirect to login page
       },
     },
   }
 })

Also, consider adding JSDoc comments to document the usage of these methods:

/**
 * Returns the current access token from the cookie
 * @returns {string | null} The access token or null if not set
 */
getAccessToken(): string | null

/**
 * Sets the access token in the cookie
 * @param {string} token - The access token to store
 * @throws {Error} If the token cannot be set
 */
setAccessToken(token: string): void

Loading