Data stored in app_metadata cannot be edited by users. For this, we’re going to assume you have a Nuxt.js application installed. Once we are logged in we will have a value in our vuex state that will look like: We are verified and we have our auth.user object filled in our Vuex store, but we are missing our user’s app_metadata as that is not returned through the Authentication API (though the endpoint call, but rather the Management API. So let’s add the auth middleware to the profile page. When the request is returned we are destructuring to the get the user’s app_metadata and we’re storing it in an object appMetaData and using res.json(appMetadata) to return the user’s app_metadata to the client side to be stored. Once logged in we will be directed to our Dashboard where we’ll be able to create a new “Application”. Now that we have a “shorted lived” access token for our Management API we can finally make a request call to the Management API to get the user’s app_metadata information and send that back to our client to set in our vuex store. The auth module that we have included in our project will automatically register a namespaced module named auth with the vuex store. oauth2 supports various oauth2 login flows. You get paid, we donate to tech non-profits. Sign up for Infrastructure as a Newsletter. For the name we can call it “Nuxt App” and for the application type we can pick “Single Page Web Application”. Then, you redirect the user to the homepage. Update the script section as below: Now when a user that is not logged in tries to visit the profile page, the user will be redirected to the login page. Each field is bound to a corresponding data on the component. From the “Dashboard” or “Application” tab in you Auth0 account, click on “Create New Application”. Luckily for us, you can achieve that with the Auth module. There are many pre-configured providers like auth0 that you may use instead of directly using this scheme. The first one (isAuthenticated) will return the authentication status of a user and the second (loggedInUser) will return the details or the logged in user. Our first step will be adding the Nuxt Auth Module to our application and configuring our auth0 provider for the Nuxt Auth module. Once the app is created you can click on the “Settings” tab for the application and you will want to scroll down to the “Allowed Callback URLs”. Next, let’s update the Navbar component to make use of the getters. In this tutorial we are going to discuss how to use Auth0 identity provider service as a Nuxt authentication provider and extend the auth0 library to use the Management API to get roles and permissions for a user. You can view the application in a web browser to see the default Vue application created by vue-cli. So how do we make a call to the Management API to receive the user’s app_metadata? (read more ), ← Otherwise, you allow the normal execution of the request. Refer the documentation for more information. You can access the currently logged strategy from nuxt-auth via (app.$ login: { url: 'login', method: 'post', propertyName: 'data.token' }. oauth2 supports various oauth2 login flows. Then we are defining our plugin functionality and checking if the user is logged in with if(!$auth.loggedIn). Then, run npm install. Open a new terminal window and use vue-cli to initialize a new Vue project with the Nuxt starter template: Note: At the time of testing, vue-cli is deprecated. Then, you define the authentication endpoints for the local strategy corresponding to those on your API: To style your app, you can make use of Bulma. By default is set to refresh_token_key: 'refresh_token'.