marvin Posts - Answer Overflow

marvin

•Created by marvin on 12/11/2024 in #❓・help

Where to store Accesstoken for SSR?

Hi, I am trying to upgrade my Nuxt App + external REST API to OAuth. I tried a few Nuxt OAuth options listed on the Nuxt Modules Page, but all of them seem to be designed for the built-in Nuxt API. I then decided to use nuxt-auth-utils. I found no way to access the OAuth Accesstoken on client side, so because I needed the OAuth Accesstoken for my API I also added an Nuxt-API endpoint which returns the accessToken. The client can call that, gets identified via its nuxt-auth-utils session, and gets the Accesstoken, which is currently cached in localStorage to not strain the Nuxt-API on every useFetch request which handles getting the Accesstoken. I also added Accesstoken refreshing via an Nuxt-API endpoint, but that works without problem so I will not go deeper into that. Problem: It of course has no access to the localStorage in SSR, and because of that the custom useApiFetch composable (which handles getting the AccessToken and adds it to the Authorization headers) tries to call the "get Accesstoken from Nuxt-API" endpoint first, and after that it injects the accessToken into the header options and finally the custom useFetch composable returns a new return useFetch(url, options) so that the vue components can work with the returned data. This unfortunately gives me the following error:

A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug

. I tracked it down to be caused by multiple useFetch usages within the composable: 1) useFetch to fetch the accesstoken endpoint to get the accesstoken because there is no localStorage, and 2) the return statement which has a useFetch. When not fetching the Accesstoken endpoint or alternately return null instead of useFetch, this error doesn't occur. This crashes only on backend, and not on client side. I don't quite understand why this is happening. Does anybody have an idea about the error? Thanks!

6 replies

NNuxt

•Created by marvin on 12/7/2024 in #❓・help

Nuxt Auth

Hi, I am currently struggling with implementing OAuth2 for my application. I have added @sidebase/nuxt-auth with a NuxtAuthHandler with Authentik as following:

export default NuxtAuthHandler({
  secret: useRuntimeConfig().auth.secret,
  providers: [
    AuthentikProvider.default({
      clientId: useRuntimeConfig().auth.clientId,
      clientSecret: useRuntimeConfig().auth.clientSecret,
      issuer: useRuntimeConfig().auth.issuer
    })
  ],
  callbacks: {
    jwt (data) {
      const { token, account } = data
      if (account) {
        token.accessToken = account.access_token
      }
      return token
    },
    session ({ session, token }) {
      session.accessToken = token.accessToken
      return session
    }
  }
})

export default NuxtAuthHandler({
  secret: useRuntimeConfig().auth.secret,
  providers: [
    AuthentikProvider.default({
      clientId: useRuntimeConfig().auth.clientId,
      clientSecret: useRuntimeConfig().auth.clientSecret,
      issuer: useRuntimeConfig().auth.issuer
    })
  ],
  callbacks: {
    jwt (data) {
      const { token, account } = data
      if (account) {
        token.accessToken = account.access_token
      }
      return token
    },
    session ({ session, token }) {
      session.accessToken = token.accessToken
      return session
    }
  }
})

The defined callbacks functions allow me to use the accessToken from Authentik in the frontend and therefore as a header in useFetch to my external (Spring Boot) API. The problem I have is the accessToken being valid for only 5 minutes by default. However @sidebase/nuxt-auth doesn't recognise this. The state keeps staying on "authenticated", and the accessToken doesn't get refreshed in any way. The user has to sign out completely and then sign in again to get a new accessToken for the next 5 minutes. Of course I could increase the accessToken lifetime, but that wouldn't fix the bad user experience. How can I fix this problem, or what am I doing wrong here?

6 replies

NNuxt

•Created by marvin on 5/16/2024 in #❓・help

Best practice for using the Route for storing state

Given a page /items which has a grid of the available items fetched from the api, I want a modal for adding/creating a new item. I would like to make the modal appearance (including transitions, if possible) dependent on the route. The modal should show when the url is /items/create, and don't show when the url is just /items. I looked for a solution, but - maybe because of wrong search terms - found no nice and clean solution. Are there any best practices for this?

3 replies

NNuxt

•Created by marvin on 4/12/2024 in #❓・help

Cannot read properties of null (reading 'previousSibling')

6 replies

NNuxt

•Created by marvin on 4/10/2024 in #❓・help

Nuxt environment variables load array of objects

I have a runtimeConfig which includes a list of my projects. They are accessible via NUXT_PUBLIC_PROJECTS env variable. Is it possible to load them directly as an object, or do I have to create a composable useProjects() which returns the projects if they are an array, or parses them via JSON.parse if it is a string?

3 replies

Gaming

Programming