Nasr galal Comments - Answer Overflow

That's correct, on server, we can have a more granular control over the data. Since the browser is not the secure place to store the data in. As per OWASP security standards, It is highly recommended not to store any confidential or privacy data as it is exposed to be breached. https://owasp.org/www-project-mobile-top-10/2014-risks/m2-insecure-data-storage Sometimes, one little code mistake in the client code could lead to data leakage somehow. That's why I do strongly agree with your thoughts around making it on server side. However, some simple apps don't need server-side approach, that's why I am trying to be wise when choosing which matches which. As a world class level approach, for sure it should be a back-and-forth between client and server.

15 replies

NNuxt

•Created by StilauGamer on 5/10/2024 in #❓・help

Localstorage + JWT

yeah encryption is a powerful way too. Let's keep this ticket open, we may learn something new out of it 🙂

15 replies

NNuxt

•Created by StilauGamer on 5/10/2024 in #❓・help

Localstorage + JWT

I am not a Pentester 😄 however, I do prefer server-side. Despite its complexity, but it is handy when it comes to security stuff. 🙂

15 replies

NNuxt

•Created by StilauGamer on 5/10/2024 in #❓・help

Localstorage + JWT

hmm, yeah, I think you may choose the best fit depending on the highest priorities. Both approaches have pros and cons. Sometimes it puts us on a trap trying to choose between both of them. I would say if your app is a Data-Driven one, we may think of Server-sided way. In the mean time, I came across Web Application Firewall (WAF) which sounds a nice addon for adding a protection layer. may be something like this: https://github.com/timokoessler/easy-waf and here is the thinking emojie of mine 🤔 😄

15 replies

NNuxt

•Created by StilauGamer on 5/10/2024 in #❓・help

Localstorage + JWT

hmm, using XSS attacks, yes, if an attacker tries to get it, he can go through. Your approach has advantages though: - Improved Security: Not storing access tokens or refresh tokens on the server reduces the attack surface and potential data breaches. - Scalability: This approach can be more scalable as it doesn't require server-side storage for user tokens. Talking about disadvantages: - Security Concerns: a. Cookie Theft: If an attacker steals the JWT cookie, they can potentially impersonate the user. b. XSS Attacks: Cross-site scripting vulnerabilities could allow attackers to steal the JWT from the client-side. c. Limited Functionality: Storing only the Discord ID in the database limits what information you can access about the user without making additional API calls to Discord. d. Revocation Challenges: Revoking stolen JWTs can be more difficult as they are stored on the client-side. --- For now, on the client-side, Here are some ways to mitigate the security risks: --- 1. HttpOnly Flag: Set the HttpOnly flag on the cookie to prevent JavaScript from accessing it directly, reducing the risk of XSS attacks. 2. Secure Flag (HTTPS): Ensure your website uses HTTPS to encrypt communication between the browser and server, protecting the cookie during transmission. 3. Shorter Expiration: Set a shorter expiration time for the JWT to limit the potential damage if it's stolen. 4. Refresh Token Management: Implement a mechanism to refresh the access token before it expires using the refresh token obtained from Discord. Store the refresh token securely on the server (not in a cookie). there are alternatives, but will need server side work though 🙂

15 replies

NNuxt

•Created by Muhammad Awais on 5/10/2024 in #❓・help

Run time config visible in page source

export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys are only available on the server
    apiSecret: '123',

    // Public keys that are exposed to the client
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys are only available on the server
    apiSecret: '123',

    // Public keys that are exposed to the client
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

13 replies

NNuxt

•Created by Bobakanoosh on 5/10/2024 in #❓・help

nuxt-i18n dynamically load translations

If you need to have a JSON editor as a front-end solution, you may check these libraries: --> JSONEditor (https://jsoneditoronline.org/) --> Monaco Editor (https://microsoft.github.io/monaco-editor/) (more complex but offers advanced features) ----- On the other hand 🙂 If your site is open-source, and you need a fancy solution, I highly recommend Crowdin https://crowdin.com/ You can have one private project there. Vuetify team are using this platform to translate the documentation hope this might help giving some keys to what you are looking for, please forgive If I misunderstood your question 🙂

23 replies

NNuxt

•Created by StilauGamer on 5/10/2024 in #❓・help

Localstorage + JWT

4. Data Store like Vuex/Pinia/...

//  This is a VueX example
// store/auth.js
export default {
  state: {
    token: null,
    currentUser: null,
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    setUser(state, user) {
      state.currentUser = user;
    },
  },
  actions: {
    login({ commit }, { username, password }) {
      // ... login logic
      commit('setToken', token); // Update token in store
      commit('setUser', user); // Update user data in store
    },
    // ... other actions
  },
};

//  This is a VueX example
// store/auth.js
export default {
  state: {
    token: null,
    currentUser: null,
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    setUser(state, user) {
      state.currentUser = user;
    },
  },
  actions: {
    login({ commit }, { username, password }) {
      // ... login logic
      commit('setToken', token); // Update token in store
      commit('setUser', user); // Update user data in store
    },
    // ... other actions
  },
};

Hope that helps a bit 😄

15 replies

NNuxt

•Created by StilauGamer on 5/10/2024 in #❓・help

Localstorage + JWT

oh interesting! so in Server side, we could use the localStorage.setItem('set_name_token_here') method, this should save the token in a key-pair value and if you like to get the stored token, just use localStorage.getItem('the-name-we-specified-before') ---- If you care about security, here are few other alternative approaches you may look into: 1. Session Storage: provides temporary storage for data specific to a browser tab or window. Data is cleared when the user closes the tab or window. Implementation:

// services/auth.js (updated)
const token = sessionStorage.getItem('auth_token');
sessionStorage.setItem('auth_token', token);
sessionStorage.removeItem('auth_token');

// services/auth.js (updated)
const token = sessionStorage.getItem('auth_token');
sessionStorage.setItem('auth_token', token);
sessionStorage.removeItem('auth_token');

2. Cookies: They are small pieces of data sent from the server to the user's browser and stored locally. They are often used for session management and can be configured with specific expiration times and security flags like HttpOnly. Implementation (requires backend integration to set and retrieve cookies):

// services/auth.js (updated)
const token = document.cookie.split(';').find(c => c.startsWith('auth_token='));
// Set cookie on login from backend response
document.cookie = `auth_token=${token}; HttpOnly; Path=/`; // Assuming backend sets the cookie
document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; Path=/'; // Clear cookie

// services/auth.js (updated)
const token = document.cookie.split(';').find(c => c.startsWith('auth_token='));
// Set cookie on login from backend response
document.cookie = `auth_token=${token}; HttpOnly; Path=/`; // Assuming backend sets the cookie
document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; Path=/'; // Clear cookie

3. IndexedDB: It is a more robust client-side database that allows structured data storage with indexes for efficient retrieval. It's suitable for storing larger amounts of user data or complex objects. Implementation(requires using a library like idb-keyval for easier use):

// services/auth.js (updated)
import { get, set } from 'idb-keyval';

const token = await get('auth_token');
await set('auth_token', token);
await remove('auth_token');

// services/auth.js (updated)
import { get, set } from 'idb-keyval';

const token = await get('auth_token');
await set('auth_token', token);
await remove('auth_token');

15 replies

NNuxt

•Created by _castro on 5/10/2024 in #❓・help

NuxtImg Image Shrinking

To make it simple: - If you want to control how the image scales within a container while maintaining aspect ratio, use fit prop. You can check here: https://image.nuxt.com/usage/nuxt-img#fit - If you need responsive image sizing based on screen size, use sizes prop. You can check here: https://image.nuxt.com/usage/nuxt-img#sizes - And finally, If you want to display the images at a specific static size (which I think you might not want), use width and height props. Hope this helps 🙂

5 replies

NNuxt

•Created by StilauGamer on 5/10/2024 in #❓・help

Localstorage + JWT

May I ask which Auth module are you using? 🙂

15 replies

NNuxt

•Created by rotx on 5/10/2024 in #❓・help

Initiating Project Fails

what happens when you use this command:

npx nuxi@latest devtools enable
# OR
npx nuxi@latest devtools disable

npx nuxi@latest devtools enable
# OR
npx nuxi@latest devtools disable

7 replies

NNuxt

•Created by JV on 5/10/2024 in #❓・help

useNuxtApp inside pinia action

you can access useNuxtApp() in the following locations: - Any Vue component/page - Any Composable function - Any Middleware function so I guess, you may utilize that as it is not possible to use composables outside the specified locations

3 replies

NNuxt

•Created by Philword on 5/10/2024 in #❓・help

Logout NUXT SSR Issue

if there is no error and the only issue for you is that it doesn't route, I could suggest to enforce external routing like so:

return navigateTo('/route-path-here ', { external: true })

return navigateTo('/route-path-here ', { external: true })

3 replies

NNuxt

•Created by stefanpeev on 4/29/2024 in #❓・help

New at nuxt.. and frontend as a whole.

Here is the playgorund local example: https://github.com/sidebase/nuxt-auth/tree/main/playground-local in the server endpoint of login, all you need to do is to get the token from your backend and return it. usually the format look like this:

return {
  token: '@$%$@%@$$^@'
}

//  OR
return {
  accessToken: '@$%$@%@$%',
  refreshToken: 'adfdafaffdfa'
}

return {
  token: '@$%$@%@$$^@'
}

//  OR
return {
  accessToken: '@$%$@%@$%',
  refreshToken: 'adfdafaffdfa'
}

If you would like to check the authenticated status, you can use the status composable for that:

<script>
const { status } = useAuth()
</script>

<template>
  status: {{ status }}
</template>

<script>
const { status } = useAuth()
</script>

<template>
  status: {{ status }}
</template>

once the token is returned in the proposed format, nuxt auth captures it and stores the session in a session composable

42 replies

NNuxt

•Created by stefanpeev on 4/29/2024 in #❓・help

New at nuxt.. and frontend as a whole.

worked?

42 replies

Gaming

Programming