How can I retrieve all users from Azure Active Directory

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

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