I'm attempting to integrate the 'Nuxt Auth Module' into my Nuxt App.

/

I have configured my Proxy & Auth Modules and have setup the 'Local Strategy'.

.html

My 'Login' endpoint works fine, and I set the 'propertyName' to 'access_token' as that is where the value for my token lives. I see 'Vuex' update my 'LoggedIn' status to true and I can also see the Token Response in the 'Network' tab of Chrome.

However I'm really struggling to understand how the 'User' endpoint works.

The example given:

auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
        logout: { url: '/api/auth/logout', method: 'post' },
        user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
      },
      tokenRequired: true,
      tokenType: 'bearer'
    }
  }
}

The above is pretty much identical to mine, how does the 'User' endpoint, know which user is logged in?

I am using a third-party system for my authentication as I'm integrating an application into the third-party system. Their 'User' endpoint for REST requires an 'ID' or 'UserName' to return details about a particular user.

My 'Login' response contains 'UserName' which I could use to call the subsequent User endpoint (If I knew how).

Does anyone know how the User endpoint works? Essentially I need to call something like this:

          user: {
            url: '/users/${userId}',
            method: 'get',
            propertyName: 'data'
          }

I'm attempting to integrate the 'Nuxt Auth Module' into my Nuxt App.

https://auth.nuxtjs/

I have configured my Proxy & Auth Modules and have setup the 'Local Strategy'.

https://auth.nuxtjs/schemes/local.html

My 'Login' endpoint works fine, and I set the 'propertyName' to 'access_token' as that is where the value for my token lives. I see 'Vuex' update my 'LoggedIn' status to true and I can also see the Token Response in the 'Network' tab of Chrome.

However I'm really struggling to understand how the 'User' endpoint works.

The example given:

auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
        logout: { url: '/api/auth/logout', method: 'post' },
        user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
      },
      tokenRequired: true,
      tokenType: 'bearer'
    }
  }
}

The above is pretty much identical to mine, how does the 'User' endpoint, know which user is logged in?

I am using a third-party system for my authentication as I'm integrating an application into the third-party system. Their 'User' endpoint for REST requires an 'ID' or 'UserName' to return details about a particular user.

My 'Login' response contains 'UserName' which I could use to call the subsequent User endpoint (If I knew how).

Does anyone know how the User endpoint works? Essentially I need to call something like this:

          user: {
            url: '/users/${userId}',
            method: 'get',
            propertyName: 'data'
          }

• javascript
• vue.js
• authentication
• vuex
• nuxt.js

• Could you share your proxy configuration etc? I'm trying to set it up too, but unfortunately the API route doesn't exist for me and I don't receive a token. Would appreciate it – user5582011 Commented Jan 19, 2021 at 19:31

1 Answer 1

Faced to this problem, too.

My solution:

1. Set user property of auth endpoint to false

auth: { 
    strategies: {
      local: {
        endpoints: {
          // login api
          login: {  
            url: '/api/v1/users/login',
            method: 'post',
            propertyName: 'token'
          },
          // logout api
          logout: {
            url: '/api/v1/users/logout',
            method: 'post'
          },
          user: false // setting user fetch api to false
        },
        redirect: {
          login: '/login',
          logout: '/login',
          callback: '/login',
          home: '/'
        },
      }
    }
  },

2. After loginWith() You can use function setUniversal(key, value, isJson) to save fetched user and get it with function getUniversal(key)

  async login(user) {
    await this.$auth.loginWith('local', {
      data: user
    }).then(res => {

      let user = res.data.data.user // getting user (yours can be different)
      this.$auth.$storage.setUniversal('user', user, true) // setting user in Vuex, cookies and localstorage

      user = this.$auth.$storage.getUniversal('user') // getting user (you can use it anywhere in your app)
      console.log(user) // checking user

      this.$router.push('/') // redirecting after login
    }).catch(err => {
      console.log(err.response)
    })
  }

3. That's all, you have your user in vuex, cookies, and localstorage you can get it in puted like this:

puted: {
  user() {
    return this.$auth.$storage.getUniversal('user');
  }
}

P.S: to logout, use logout() function, and in the callback use this.$auth.$storage.removeUniversal('user') to remove it from everywhere