CODEWITHSUNDEEP
vue.jsaxiosnuxt.jsauth0
Miroslav
Miroslav

Reputation: 176

How to pass user information from frontend to backend

I have a Ruby on Rails backend API and frontend application written in Nuxt.js integrated with Auth0 for authentication and Axios for API communication.

The authentication works fine, however the frontend does not pass user information to backend. Only user_id and Authorization Bearer token, but not email, name and other attributes. These attributes are however available after authentication in frontend and saved/available in the Vuex store.

How to tell frontend (Axios) to include with every API request to backend, additional user attributes? Is there any syntax to access Vuex store and define global Axios attribute in nuxt.config.js or is there a simpler way to do it?

Nuxt.config.js

auth: {

  redirect: {

    login: '/auth/login',

    callback: '/auth/callback'

  },

  strategies: {

    auth0: {

      domain: config.AUTH.DOMAIN,

      client_id: config.AUTH.CLIENT_ID,

      audience: config.AUTH.AUDIENCE

    }

  }

}

example request to backend and saving results to Vuex store

this.$axios.get('/organizations/4/projects')

    .then(response => {

        this.setProjects(response.data.projects);

})

    .catch(error => {

      console.log(error);

    });

Upvotes: 0

Views: 1291

Answers (1)

Dan Woda
Dan Woda

Reputation: 668

You could add the extra information (in a custom claim) to the access token, then it would be available to the backend when you make the request.

Another strategy would be to make use of the /userinfo endpoint to request the user profile, although this will require an extra call from the backend.

The tradeoffs here are the increased size of the token with custom claims vs the extra API call with the /userinfo endpoint.

Upvotes: 1

Related Questions