How can I retrieve all users from Azure Active Directory

Question

I'm new to Azure. I want to create a dropdownlist that contains all the user's display name from the Azure's Active Directory but I'm not sure how to do it.

I want to populate a dropdown list with their display names in the React JS Application

Answer 1

To fetch all the users from Azure Active Directory, you can call Microsoft Graph API.

Make sure to grant User.Read.All API permission:

Add redirect URL:

authConfig.js file

// src/authConfig.js
export const msalConfig = {
    auth: {
      clientId: "ClientID",
      authority: "https://login.microsoftonline.com/TenantID",
      redirectUri: "http://localhost:3000",
    },
    cache: {
      cacheLocation: "localStorage",
      storeAuthStateInCookie: false,
    },
  };
  
  export const loginRequest = {
    scopes: ["User.Read.All"],
  };

index.js file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { MsalProvider } from '@azure/msal-react';
import { PublicClientApplication } from '@azure/msal-browser';
import App from './App';
import { msalConfig } from './authConfig';

const msalInstance = new PublicClientApplication(msalConfig);

ReactDOM.render(
  <MsalProvider instance={msalInstance}>
    <App />
  </MsalProvider>,
  document.getElementById('root')
);

App.js file:

import React from 'react';
import Users from './Users';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Azure AD Users</h1>
      </header>
      <main>
        <Users />
      </main>
    </div>
  );
}

export default App;

Create a src/Users.js file and use the below code to fetch users:

import React, { useState, useEffect } from 'react';
import { MsalAuthenticationTemplate, useMsal } from '@azure/msal-react';
import { InteractionType } from '@azure/msal-browser';
import { loginRequest } from './authConfig';
import axios from 'axios';

const Users = () => {
  const { instance, accounts } = useMsal();
  const [users, setUsers] = useState([]);

  useEffect(() => {
    if (accounts.length > 0) {
      instance.acquireTokenSilent({
        ...loginRequest,
        account: accounts[0],
      }).then(response => {
        axios.get('https://graph.microsoft.com/v1.0/users', {
          headers: {
            Authorization: `Bearer ${response.accessToken}`,
          },
        }).then(response => {
          setUsers(response.data.value);
        }).catch(error => {
          console.error(error);
        });
      });
    }
  }, [instance, accounts]);

  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect} authenticationRequest={loginRequest}>
      <div>
        <h2>Users</h2>
        <ul>
          {users.map(user => (
            <li key={user.id}>{user.displayName}</li>
          ))}
        </ul>
      </div>
    </MsalAuthenticationTemplate>
  );
};

export default Users;

The users listed successfully like below:

Reference:

List users - Microsoft Graph v1.0 | Microsoft