ERROR Cannot set headers after they are sent to the client

[frederikpyt]

I have an issue where if i reload the page im standing on in my nuxt app it redirects me to the login redirect i declared in my nuxt.config.js. I want to fix this.

I've actually fixed it by doing so in my store/index.js

async nuxtServerInit ({
    state
  }, {
    req
  }) {
    let auth = null
    if (req.headers.cookie) {
      try {
        auth = await this.$axios.$get('/user')
      } catch (err) {
        auth = null
      }
    }

    this.$auth.setUser(auth)
  },

However this spams my server console with the following:

ERROR  Cannot set headers after they are sent to the client
   at new NodeError (node:internal/errors:329:5)
   at ServerResponse.setHeader (node:_http_outgoing:573:11)
   at Storage.setCookie (server.js:3694:20)
   at Storage.setUniversal (server.js:3555:10)
   at Storage.syncUniversal (server.js:3582:12)
   at Token._syncToken (server.js:4289:26)
   at Token.sync (server.js:4241:24)
   at Oauth2Scheme.check (server.js:4575:30)
   at server.js:4177:23

Commenting out the this.$auth.setUser(auth) makes the errors go away, but also the reloading stops working as intended.
I've also tried replacing this.$auth.setUser(auth) with:

state.auth.user = auth
state.auth.loggedIn = (auth !== null)

it also fixed the reloading, but still produced the same errors

EDIT:
Found a temporary fix. It sets a auth.redirect with route i was standing on when reloading.

Adding this to my login redirect works:

created () {
    if (this.$auth.loggedIn) {
      if (this.$auth.$storage.getCookies()['auth.redirect']) {
        this.$router.replace(this.$auth.$storage.getCookies()['auth.redirect'])
      }
    }
  }

[Msmicha200]

Try to use default endpoint property for getting user. Or you have any reasons not to use it?

[frederikpyt]

Try to use default endpoint property for getting user. Or you have any reasons not to use it?

Same issue

[frederikpyt]

I found a temporary fix, adding this to my login redirect page fixes it:

created () {
    if (this.$auth.loggedIn) {
      if (this.$auth.$storage.getCookies()['auth.redirect']) {
        this.$router.replace(this.$auth.$storage.getCookies()['auth.redirect'])
      }
    }
  }

[JoaoPedroAS51]

Hi @frederikpyt! Can you share your auth config?

EDIT: Also the responses of your login and user endpoints.

[frederikpyt]

Hi @frederikpyt! Can you share your auth config?

EDIT: Also the responses of your login and user endpoints.

auth: {
    redirect: {
      login: '/',
      logout: '/',
      callback: '/auth',
      home: '/overview'
    },
    strategies: {
      freyrsoft: {
        scheme: 'oauth2',
        endpoints: {
          authorization: process.env.PASSPORT_URL + '/oauth/authorize',
          token: process.env.PASSPORT_URL + '/oauth/token',
          userInfo: process.env.PASSPORT_URL + '/api/user',
          logout: process.env.PASSPORT_URL + '/logout'
        },
        token: {
          property: 'access_token',
          type: 'Bearer',
          maxAge: 60 * 60 * 24 // 1 day
        },
        refreshToken: {
          property: 'refresh_token',
          maxAge: 60 * 60 * 24 * 10 // 10 days
        },
        responseType: 'code',
        grantType: 'authorization_code',
        accessType: 'offline',
        clientId: process.env.PASSPORT_CLIENT_ID,
        codeChallengeMethod: 'S256',
        scope: null,
        autoLogout: false
      }
    }
  }

User endpoint response:

{
    created_at: "2021-03-27T12:02:55.000000Z",
    email: "example@example.com",
    email_verified_at: null,
    id: 1,
    name: "frederikpyt",
    updated_at: "2021-04-12T19:33:48.000000Z",
}

Login endpoint response: will provide this tomorrow

[JoaoPedroAS51]

Thank you, I will see if I can find out what's going on here :)

[frederikpyt]

Hi @frederikpyt! Can you share your auth config?

EDIT: Also the responses of your login and user endpoints.

I can't seem to find the response of my login endpoint? Any ideas?

[caglarduman]

I had the same error.

if you are using auth module and fetching the data on initial : Use mounted instead of created

created() { this.search(); //--> Axios get request },
This will cause Error => Cannot set headers after they are sent to the client.

mounted() { this.search(); //--> Axios get request },
It's OK :)