5e074956ee8ba1fea26e30d28c190495?s=300 avatar

5e074956ee8ba1fea26e30d28c190495?s=300

Full stack developer creating content at Auth0. I love taking a deep dive into hard-to-understand concepts and creating content that makes them easier to grasp. In my free time you can usually find me reading, hanging out with my dogs, or curling in the squat rack.

Former Developer Content Manager

Holly Guevara

Learn how to use the Auth0 Management API to build an admin dashboard with Express and Vue



<details>
<summary>Starting from this chapter?</summary>

**Setting up**

Clone the application starter repo and check out the `creating-the-backend` branch:

``` bash  
git clone git@github.com:auth0-blog/express-vue-management-api.git --branch creating-the-backend
```

Install the dependencies for both the client and server:

``` bash  
cd server
npm install
cd ../client
npm install
```

**Configure Auth0**

Follow the Auth0 Configuration directions in the [project README of the starter Vue and Express application](https://github.com/auth0-blog/vue-express-auth#configuring-auth0).

**Configure Management API**

In the [Auth0 dashboard](https://manage.auth0.com/dashboard), click on "APIs" in the left menu and then select "Auth0 Management API". From there, select "Machine to Machine Applications" and find the "Vue Express API" you just created. Click the switch next to it so that it says "Authorized".

![Auth0 authorized API](https://images.ctfassets.net/23aumh6u8s0i/3bnn4TcXg4JJ6Ti42f4ymi/1545602b9f43d8c6dcfafda536730d27/auth0-management-api-authorized)

Next, add permissions to the application. Click on the down arrow V next to the authorized switch. Select `read:users`, `delete:users`, and `read:user_idp_tokens` and then click "Update".

Create the `.env` file in the root of the `server` directory:

``` js  
AUTH0_DOMAIN = your-domain.auth0.com
AUTH0_AUDIENCE = https://your-api-audience.com
CLIENT_ID = yourclientid
CLIENT_SECRET = yourclientsecret
```

To find your values, go to the [Auth0 dashboard](https://manage.auth0.com/dashboard) and click:

"APIs" > "Auth0 Management API" > "Test"

Select the Express API from the dropdown then click "Node.JS". You'll find the values for `CLIENT_ID` AND `CLIENT_SECRET` in the resulting code.

`AUTH0_DOMAIN` and `AUTHO_AUDIENCE` can be found by clicking on "APIs" and then selecting the Vue Express API. Then click on "Quick Start" and select "Node.js". You'll see a value for audience, which you can paste directly into AUTH0_AUDIENCE and then another value for issuer. Copy this and paste it into AUTH0_DOMAIN, but leave off the `https://` and the trailing `/` at the end.

**Test it**

Start the Vue app:

``` bash  
cd client
npm run serve
```

Start the Express app:

``` bash  
cd server
npm start
```

Navigate to [http://localhost:8000/users](http://localhost:8000/users) to see an array all of your users from the Express `/users` endpoint.

View the dashboard at: [http://localhost:8080/dashboard](http://localhost:8080/dashboard)

</details>

## Creating the Dashboard with Vue

Here's what needs to be done on the Vue side:

* Create a dashboard route
* Create a new dashboard component
* Create the user service to connect to the Express API
* Make a `GET` request to the Express API's `/users` route
* Loop over and display the users
* Create a delete button and delete method
* Add the delete method to the user service that makes a request to the Express API's `/users/:id/delete` route
* Pass the user's access token along with their Express API requests
* Restrict the route so that unauthenticated users will be kicked to the login screen

I'll go over each step here, but if you'd like a more in-depth explanation about making HTTP requests in Vue, I'd recommend going back and reading through the original article that this application is based on, [Making HTTP Requests with Vue and Express](https://auth0.com/blog/how-to-make-secure-http-requests-with-vue-and-express/). 

If you haven't already, you can start the Vue application by navigating to the `client` directory in the terminal and running:

``` bash  
npm run serve
```

You can view it at [http://localhost:8080](http://localhost:8080)

## Add the Dashboard Route

First, go ahead and create the `/dashboard` route, which is where the user list will be displayed.

Open up `client/src/router/index.js` and paste the following in as the last element in the `routes` array:

``` js  
{
    path: '/dashboard',
    name: 'dashboard',
    component: () => import('../views/Dashboard.vue')
}
```

## Create the Dashboard Component

You'll notice that the `/dashboard` route is using the `Dashboard.vue` component. This doesn't exist yet, so go ahead and create it now.

Under `client/src/views`, create a new file called `Dashboard.vue` and paste in the following:

``` js  

<template>
<div class="container">
  <h2 class="title is-size-3 has-text-centered">Welcome to your dashboard</h2>
  <div class="columns" v-if="message">
    <div class="column is-one-quarter is-offset-8">
      <div class="notification is-success">
        {{ message }}
      </div>
    </div>
  </div>
  <div class="columns is-multiline has-text-centered">
    <div v-for="user in users" :user="user" :key="user.id" class="column is-one-quarter">
      <img :src="user.picture" :alt="user.name" style="width:200px;margin-left:auto;margin-right:auto;"/>
      <h3 class="is-size-6">Name: {{ user.name }}</h3>
      <h3 class="is-size-6">Email: {{ user.email }}</h3>
      <h3 class="is-size-6">Last login: {{ user.last_login }}</h3>
      <h3 class="is-size-6">Login count: {{ user.logins_count }}</h3>
      <button @click="deleteUser(user.user_id)" class="button is-medium is-danger">Delete me 😵</button>
    </div>
  </div>
</div>
</template>
<script>
import UserService from '@/services/UserService.js';
export default {
    name: "Dashboard",
    data() {
    return {
      users: [],
      message: ''
    };
  },
  created() {
    this.getUserData(); // call getEventData() when the instance is created
  },
  methods: {
    async getUserData() {
      // Pass the access token to the getUsers service
      UserService.getUsers()
      .then(
        (users => {
          this.$set(this, "users", users);
        }).bind(this)
      );
    },
    async deleteUser(deleteId) {
      // Pass specified id to the deleteUser service
      UserService.deleteUser(deleteId)
      .then(
        (response => {
          this.message = response; 
          this.getUserData(); // get refreshed users
        })
      );
    }
  }
}
</script>
<style lang="scss" scoped>
  .notification {
    position: fixed;
    top: 800px;
    right: 40px;
  }
  .button {
    margin-top: 15px;
  }
</style>

```

In the script section, you're first importing the `UserService`. This is what your Vue application will use to connect to the Express API defined in the `server` directory. The Express API is responsible for getting the data from the Management API.

> 🧠 Your Vue client cannot reach out to the Management API directly because it would need an access token to do that, and as you saw earlier, that would require the client (Vue) to pass the client secret on the frontend, which isn't secure.

So, instead, the **Express API handles the connection** with the Management API. The Vue application then makes a request to the Express API using the `UserService` and receives the user information that the Express API passes back to it.

Of course, you wouldn't want just *anybody* to be able to access this user information. This is why the **request to the Express API from the Vue client must be authorized**. With the current implementation, anyone will be able to access the Express API endpoints to obtain the list of users and delete a user. Sit tight for now, and you'll be addressing that in an upcoming section.

The next important thing to note here are the 2 methods: `getUserData()` and `deleteUser(deleteId)`. The first method is called when the Dashboard instance is created. It's going to call the `getUsers()` method on the `UserService` and then set the result to the `users` array (defined under `data`). The next method will be called when the user clicks on a "Delete me" button underneath a user. It will send the selected user's `user_id` through to the `UserService.deleteUser()` method as a parameter.

If you glance back up now at the template section, you'll see where that `users` array comes into play. You're looping over it to display each individual user's avatar, name, email, last login date, and login count.

Finally, there's a `message` variable that will let us know that a user has been deleted.

Now, the `UserService` doesn't exist, so none of this is going to work yet. Go ahead and create it now.

## Create the User Service

Create a new file called `UserService.js` under `client/src/services` and paste in the following:

``` js  

import axios from "axios"
export default {
  async getUsers() {
    let res = await axios.get("http://localhost:8000/users");
    console.log(res.data);
    return res.data;
  },
  async deleteUser(id) {
    let res = await axios.get(`http://localhost:8000/users/${id}/delete`);
    return res.data;
  }
}

```

This allows the Vue application to make a `GET` request to the Express API using [axios, a promise-based HTTP client](https://github.com/axios/axios).

You're calling the `/users` and `users/${id}/delete` routes that you built earlier in Express. The `/users` route is the one that returns the user information from the Management API.

So when the Vue application makes a `GET` request to the Express `/users` route, Express reaches out to the Management API and makes a request for the list of users. If the access token that the Express API presents is valid, then the Management API returns the users. Consequently, the Express API will then return that data to the requesting Vue application.

Again, it's important to verify that the Vue application is allowed to access this information. **Whether or not it's allowed to access it is between the Express API and the Vue application, not the Management API**. Currently, there's nothing in place to check that the Vue application is allowed to make this request to the Express API. You'll see how to implement this in the next section.

For now, make sure your Vue application and Express app are both still running in the terminal:

**Vue application:**

``` bash  
npm run serve
```

**Express application:**

``` bash  
npm start
```

Head to [`http://localhost:8080/dashboard`](http://localhost:8080/dashboard), and you should now see your shiny new dashboard with all of your user's avatars and information displayed.

> 🚨 Resist the urge to click the "Delete" button on the accounts you want to keep! I recommend creating test user accounts through the Auth0 dashboard when you want to try out the delete button.

![Vue Express Auth0 management API user dashboard](https://images.ctfassets.net/23aumh6u8s0i/6tjQ9rvSCgOcZ9MIrd9dCx/61d999a28e841ab4aac8a07c547226d0/auth0-user-management-api-dashboard)

<include src="tutorial/NextButton" nextPart="build-an-admin-dashboard-with-express-and-vue-adding-user-authorization/" completedMessage="I've created the Vue dashboard"/>

<include src="tutorial/IssueButton" communityTopic="53302"/>


Build an Admin Dashboard with Express and Vue: Creating the Frontend



<details>
<summary>Starting from this chapter?</summary>

Clone the application starter repo:

``` bash  
git clone git@github.com:auth0-blog/vue-express-auth.git
```

Follow the directions in the [project README](https://github.com/auth0-blog/vue-express-auth#set-up-the-express-server).

In the [Auth0 dashboard](https://manage.auth0.com/dashboard), click on "APIs" in the left menu and then select "Auth0 Management API". From there, select "Machine to Machine Applications" and find the "Vue Express API" you just created. Click the switch next to it so that it says "Authorized".

![Auth0 authorized API](https://images.ctfassets.net/23aumh6u8s0i/3bnn4TcXg4JJ6Ti42f4ymi/1545602b9f43d8c6dcfafda536730d27/auth0-management-api-authorized)

Next, add permissions to the application. Click on the down arrow V next to the authorized switch. Select `read:users`, `delete:users`, and `read:user_idp_tokens` and then click "Update".

</details>


## Calling the Management API with Express

The Express API is now registered in the dashboard, and the Auth0 Management API is set up and ready to issue an access token to the Express API. So what's next? Now, you have to do the [**client credentials**](https://auth0.com/docs/flows/concepts/client-credentials) dance to get an access token.

## Client Credentials Flow

The [OAuth 2.0 RFC 6794](https://tools.ietf.org/html/rfc6749#section-4.4) defines how trusted clients (your Express API) can use the client credentials to request an access token from a resource owner (the Auth0 Management API):

> ❗ The client can request an access token using only its client credentials (or other supported means of authentication) when the client is requesting access to the protected resources under its control, or those of another resource owner that have been previously arranged with the authorization server (the method of which is beyond the scope of this specification).

Because the Management API access token is requested on behalf of the Express application, not a user, it doesn't make sense to ask for a username and password to verify who the requester is. Instead, you can use the Express application's client credentials (`client_id` and `client_secret`) to authenticate the application.

![Machine to machine client credentials grant](https://images.ctfassets.net/23aumh6u8s0i/3nVhN6jBKCjJxpO2BhcxOW/af8eaeabf5529b52e5e5ce865d045045/auth-sequence-client-credentials)
> This diagram depicts the client credentials grant flow described below

* The Express application authenticates with the Auth0 Authorization Server using its `client_id` and `client_secret`
* The Auth0 Authorization Server validates the  `client_id` and `client_secret`
* The Auth0 Authorization Server issues an access token and passes it back to your application
* The Express application passes this token when it makes a request to the Management API
* The Management API responds with the requested data

## Requesting an Access Token  

The Express application needs to request an access token for the Management API from the Auth0 server. There are **three ways** to do this.

1) Make a `POST` request to the token endpoint using your Express API client ID and client secret, as shown below:

<include src="AmpWarning" fullUrl="https://auth0.com/blog/build-an-admin-dashboard-with-express-and-vue-creating-the-backend"/>

``` js  
let request = require("request");

let options = {
    method: 'POST',
    url: 'https://YOUR-DOMAIN.auth0.com/oauth/token',
    headers: { 'content-type': 'application/json' },
    body: '{
        "client_id": "yourclientid",
        "client_secret": "yourclientsecret",
        "audience": "https://YOUR-DOMAIN.auth0.com/api/v2",
        "grant_type": "client_credentials"
    }'
};

request(options, function (error, response, body) {
  if (error) throw new Error(error);
});
```

This will return the **access token** (with a 24-hour expiration) and **token type**:

``` js  
{
  "access_token": "somelongstring",
  "token_type": "Bearer"
}
```

2) Use the [Auth0 Node Authentication API Client](https://www.npmjs.com/package/auth0#authentication-api-client)

``` js  
let AuthenticationClient = require('auth0').AuthenticationClient;
 
let auth0 = new AuthenticationClient({
  domain: '{YOUR_ACCOUNT}.auth0.com',
  clientId: '{CLIENT_ID}',
  clientSecret: '{CLIENT_SECRET}'
});
 
auth0.clientCredentialsGrant(
  {
    audience: 'https://{YOUR_ACCOUNT}.auth0.com/api/v2/',
    scope: '{MANAGEMENT_API_SCOPES}'
  },
  function(err, response) {
    if (err) {
      // Handle error.
    }
    console.log(response.access_token);
  }
);
```

This performs a Client Credentials Grant using the `clientId` and `clientSecret` of the client that was registered in the Auth0 dashboard, in this case, the Express API. This will return the **access token**, **scopes**, **expiration**, and **token type**. You'll then send this access token along with every request you make to the Management API.

3) Use the [Auth0 Node Management API Client](https://www.npmjs.com/package/auth0#management-api-client)

``` js  
let ManagementClient = require('auth0').ManagementClient;

let auth0 = new ManagementClient({
  domain: '{YOUR_ACCOUNT}.auth0.com',
  clientId: '{YOUR_CLIENT_ID}',
  clientSecret: '{YOUR_CLIENT_SECRET}',
  scope: 'read:users delete:users'
});
```

Finally, there also exists an option to **automatically receive an access token in the background** using the [Auth0 Node Management API Client](https://www.npmjs.com/package/auth0#management-api-client). This is similar to option 2. The Client Credentials Grant still takes place behind the scenes and will retrieve a Management API access token along with its expiration. It then automatically caches this access token for the time specified in the expiration.

For this tutorial, you'll be using the third option. This option allows you to use the [Management Client to easily make requests to the Management API](https://auth0.github.io/node-auth0/module-management.ManagementClient.html).

## Getting your Access Token in Express

Now that you know how the client credentials flow works and how you're going to implement it in your application, it's finally time to write some code!

Head back to your code editor and open `server/server.js` from the [Vue Express application you cloned earlier](https://github.com/auth0-blog/vue-express-auth).

📝 Here's an overview of what you're going to do:

- Install and import the Auth0 `ManagementClient`
- Create a `.env` file for your confidential values
- Add `clientId` and `clientSecret` to your `authConfig` object
- Create a new instance of the `ManagementClient` with your `domain`, `clientId`, and `clientSecret`

Make sure you're in the `server` directory in your terminal and install the [`node-auth0`](https://www.npmjs.com/package/auth0) package by running:

``` bash  
npm install auth0
```

Find the `require` functions at the top of your `server/server.js` file and add the following line to import `ManagementClient`.

``` js  
// ...
// import statements
const ManagementClient = require('auth0').ManagementClient;
// app.use 
```

Next, toward the top of the file, you should see an `authConfig` object directly underneath the `require` and `use` methods. This needs to be modified to include your client secret and client ID from the Express API.

Because these are sensitive values, you should not save them directly in the code. If you ever share this code or upload it to GitHub, you [risk leaking your client secret](https://auth0.com/blog/developers-guide-to-common-vulnerabilities-and-how-to-prevent-them/#Mishandling-Sensitive-Data). Instead, it's best to create a `.env` file and add this file to your `.gitignore`. To do this, navigate to the `server` directory and run the following command in your terminal: 

``` bash  
npm install dotenv
```

At the top of your `server/server.js` file add this line:

``` js  
require('dotenv').config();
```

Now create a file in the root of the `server` directory called `.env` and add the following to it:

``` js  
AUTH0_DOMAIN = your-domain.auth0.com
AUTH0_AUDIENCE = https://your-api-audience.com
CLIENT_ID = yourclientid
CLIENT_SECRET = yourclientsecret
```

The values for `CLIENT_ID` and `CLIENT_SECRET` can be found back in the [Auth0 dashboard](https://manage.auth0.com/dashboard) on the Auth0 Management API page that you set up earlier.

If you already closed this tab, just click on "**APIs**" > "**Auth0 Management API**" > "**Test**" and then select the Express API from the dropdown. Next, click on "**Node.JS**", and you can copy the `client_id` and `client_secret` from the resulting code below.

If you followed the setup instructions from the README, you should already have an object in `server.js` called `authConfig` that contains the audience and domain values. Grab those and paste them into their corresponding spots in `.env`.

If you don't have the domain and audience values, they can be found by clicking on "**APIs**" in the left-hand menu and then selecting the Vue Express API. Next, click on "**Quick Start**" and then select "**Node.js**". You'll see a value for `audience`, which you can paste directly into `AUTH0_AUDIENCE` and then another value for `issuer`. Copy this and paste it into `AUTH0_DOMAIN`.

> ⚠️ Important: For `AUTH0_DOMAIN`, omit the `https://` and the trailing `/`. It should be formatted exactly as shown above.

Next, modify the `authConfig` object in `server/server.js` to use those environment variables as follows:

``` js  
// Set up Auth0 configuration
const authConfig = {
  domain: process.env.AUTH0_DOMAIN,
  audience: process.env.AUTH0_AUDIENCE,
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET
};
```

And finally, you'll create a new instance of the `ManagementClient`, which takes an object that contains your Auth0 domain, client ID, and client secret.

Paste this just below the `authConfig` object in `server/server.js`:

``` js  
const managementAPI = new ManagementClient({
  domain: authConfig.domain,
  clientId: authConfig.clientId,
  clientSecret: authConfig.clientSecret
});
```

Now, when you use `managementAPI`, it will automatically perform the Client Credentials Grant in the background using the domain, client ID, and the client secret, which will result in an access token that can be used to make requests to the Management API.

Now it's time to test it out.

## Calling the Management API

Back in `server/server.js`, scroll down to where the `events` array is defined. Paste in the following code right below it:

``` js  
app.get('/users', (req, res) => {
  managementAPI
    .getUsers()
    .then(function(users) {
      res.send(users);
    })
    .catch(function(err) {
      console.log(err);
    });
});
```

This will create an API route in your Express application that calls the [Management API Node Client to get all users](https://auth0.github.io/node-auth0/module-management.ManagementClient.html#getUsers) whenever that route is accessed.

To verify that it's working, switch to your terminal and start your Express application if you haven't already by running:

``` bash  
npm start
```

Navigate to [`http://localhost:8000/users`](http://localhost:8000/users) in your browser, and you should see all of the users that have signed up for your application! 💃

If you're getting an error, **reach out in the comments below**, and I'll try to help troubleshoot.

You're also going to need a route to delete a user, so since you're here, just set that up now. Below the previous route, paste in:

``` js  
app.get('/users/:id/delete', (req, res) => {
  managementAPI
  .deleteUser({ id: req.params.id })
  .then(response => {
    res.send('User deleted!');
  })
  .catch(function(err) {
    res.send(err);
  });
});
```

This will grab the `id` of the user, which will be passed to the server from the Vue client. Then it will call the Management API to do the deletion.

Now that you're able to pull all of your users into the application and delete a user, it's time to switch to the frontend.

<include src="tutorial/NextButton" nextPart="build-an-admin-dashboard-with-express-and-vue-creating-the-frontend/" completedMessage="I've set up the Express backend"/>

<include src="tutorial/IssueButton" communityTopic="53302"/>


Build an Admin Dashboard with Express and Vue: Creating the Backend



The **Auth0 dashboard** has extensive tools that you can use to manage your application's authentication and authorization. You can create users, delete users, assign roles to users, ban IPs, and much more. While it's great to have the option to manage users straight from the dashboard, you might sometimes run into a scenario where you need to have that control straight from your own application.

Consider this use case. You're building a blogging platform for a client, and you're using Auth0 as an identity solution. The client has a few employees that will need full admin access to the blog. They'll have the ability to make updates to any users that sign up, ban users, view user data, and more.

Here's the caveat: the client doesn't want her employees to have to sign into another platform to do this. She wants you to build a dashboard on the blogging platform that will give administrators the capability to manage users straight from the blogging application. Lucky for you, you can do all of this using the [Auth0 Management API](https://auth0.com/docs/api/management/v2)! 

In this article, you'll learn how to **build a simple user management dashboard** using Vue.js, Node.js, and [Auth0](https://auth0.com). You'll be using the Auth0 Management API to pull all of your application's users into your Vue Express application. You'll also add a delete button so that you can delete users straight from your own dashboard. You can check out the final [User Management Dashboard code here](https://github.com/auth0-blog/express-vue-management-api).

![Auth0 user dashboard Management API](https://images.ctfassets.net/23aumh6u8s0i/6tjQ9rvSCgOcZ9MIrd9dCx/61d999a28e841ab4aac8a07c547226d0/auth0-user-management-api-dashboard)

## Getting Started

To keep this focused on user management, you're going to be building the dashboard from an existing application that was built in two previous tutorials: [Beginner Vue.js Login Tutorial](https://auth0.com/blog/beginner-vuejs-tutorial-with-user-login/) and [Making HTTP Requests with Vue and Express](https://auth0.com/blog/how-to-make-secure-http-requests-with-vue-and-express/).

You don't need to read those to follow along with this tutorial, but you should be familiar with Vue and Express. If not, those two tutorials will be a great starting point, even for a beginner!

To begin, clone the [Vue and Express Events app repository](https://github.com/auth0-blog/vue-express-auth) and follow the instructions in the README to get everything set up. You'll also need to <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account</a>. The [Auth0 configuration details](https://github.com/auth0-blog/vue-express-auth#configuring-auth0) are also in the README.

Without further ado, let's dive into the Management API!

## Using the Management API

This will be covered step by step, but here's a quick overview of what you'll need to do to get access to the Auth0 Management API:

* Create a Machine-to-Machine Application in the Auth0 dashboard
* Connect it to your Express API
* Get a short-lived access token for production

[In the Auth0 dashboard](https://manage.auth0.com/dashboard/), click on "APIs" in the left menu and then select "Auth0 Management API". This is a pre-configured Auth0 system API that you can use to connect to the Management API.

To use the Management API, you first need to get an access token called the *Auth0 Management API Token*. This token is used to **authorize your application to access the Management API**. As you'll see soon, whenever you make a request to the API, you'll send this token along with it, and the Auth0 server will check that it's valid.

You can get this token straight from the dashboard so that you can immediately experiment with the API. This method is for testing only. Let's play around with the API this way first, and then you'll generate an API access token on the fly from your own application afterward.

## Get a Token from the Dashboard

Make sure you're still on the Auth0 Management API page and click on "**API Explorer**" from there. Next, click the blue button that says "**CREATE & AUTHORIZE TEST APPLICATION**". A test access token will then be generated for you. Copy this token and head to the [Auth0 Management API Explorer](https://auth0.com/docs/api/management/v2). In the top left corner, you should see a button that says "**SET API TOKEN**." Click on this, paste your token in, and click "Set Token."

![Auth0 Management API explorer](https://images.ctfassets.net/23aumh6u8s0i/5DOSy4hJXfauYKGrRojrbv/31ba756ff4cdf854c3f9c7a848c755cc/auth0-api-explorer)

The API explorer provides a convenient way to test out any API calls that you might need to use once you start working on your application. You can scroll through the API Reference in the left menu to see everything you can do with the Management API.

Go ahead and test out one of the requests you'll be making in this tutorial. Scroll down to [List or search users](https://auth0.com/docs/api/management/v2#!/Users/get_users). You'll see some documentation and optional parameters that you can use to build your request. Just leave all of these blank for now and press the blue button that says "Try" (you'll have to scroll down a bit).

The response will be an array of objects, where each object contains information about an individual user such as name, email, number of logins, when their account was created, and more.

![Auth0 management API explorer - get all users](https://images.ctfassets.net/23aumh6u8s0i/2wnwGQAykgydsRq9lgi8WT/4c7f5a42fa1c3049ed5587ab1ee85620/auth0-management-api-explorer)

Feel free to experiment with the Management API here. You can always get a new token from the dashboard whenever yours expires.

## Setup to Get a Token Programmatically

Since the point of this tutorial is to streamline some of this user management process, you're going to want to be able to **automatically generate** a new Auth0 Management API Token straight from your application.

To do this, you need to connect your client application to the Auth0 Management API in the dashboard so that it knows who it's issuing an access token to. In this case, **the client application is your Express API**.

> Note: If you're scratching your head wondering how an Express application is the client, don't worry, you're not alone. It seems strange, but Express is the client in relation to the Auth0 Management API. Your Express application will be the one requesting access to a resource from the Management API.

Make sure you're still on the Auth0 Management API page [in the Auth0 dashboard](https://manage.auth0.com/dashboard/) and click on "**Machine to Machine Applications**". Click on the switch next to "**Vue Express API**" or whatever you named your Express API when you set it up in Auth0 from the [Vue and Express Events app repository README](https://github.com/auth0-blog/vue-express-auth). It should now be green and say "Authorized."

![Auth0 Management API authorized client](https://images.ctfassets.net/23aumh6u8s0i/3bnn4TcXg4JJ6Ti42f4ymi/1545602b9f43d8c6dcfafda536730d27/auth0-management-api-authorized)

You'll also need to add permissions to this application, so go ahead and handle that now. Click on the down arrow `V` next to the authorized switch. For the purpose of this application, select `read:users`, `delete:users`, and `read:user_idp_tokens` and then click "Update".

* `read:users` &mdash; Read your Auth0 application's users
* `delete:users` &mdash; Delete your Auth0 application's users
* `read:user_idp_tokens` &mdash; Read the [identity provider](https://auth0.com/docs/identityproviders) access token

If you scroll back up, you'll see a tab titled "**Test**" next to "**Machine to Machine Applications**". Click on "**Test**", and you should see your API in the dropdown right underneath "Asking Auth0 for tokens from my application". Select the "**Vue Express API**" and then click on "**Node.JS**" underneath it. This will give you the code for the API call that will allow the Express API to request a token from the Auth0 Management API.

Leave this page open, as you'll be using it in the next section.

<include src="tutorial/NextButton" nextPart="build-an-admin-dashboard-with-express-and-vue-creating-the-backend/" completedMessage="I've set up my application in the Auth0 dashboard"/>

<include src="tutorial/IssueButton" communityTopic="53302"/>


"client-credentials-grant"