Forum Discussion

DevElijah's avatar
DevElijah
Copper Contributor
Jul 28, 2023

Microsoft Graph toolkit Person component

Please, I need help with this. I am using the Person component of the Microsoft graph toolkit to render the profile picture of a user signing into my react application. It was displaying but stopped at some point without having any error and I didn't make changes to my code. This is my code snippet =>

 
import { useMsal } from "azure/msal-react";
 
const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState<any | null>(null);
 
function callMsGraph(accessToken: any) {
    const headers = new Headers();
    const bearer = `Bearer ${accessToken}`;

    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers,
    };

    return fetch("https://graph.microsoft.com/v1.0/me", options)
        .then((response) => response.json())
        .catch((error) => console.log(error));
}

    // Function to get and store a logged in user information using Microsoft Graph
    useEffect(() => {
        function RequestProfileData() {
            // Silently acquires an access token which is then attached to a request for MS Graph data
            instance
                .acquireTokenSilent({
                    ...loginRequest,
                    account: accounts[0],
                })
                .then((response) => {
                    console.log(
                        "access token from headers is",
                        response.accessToken
                    );
                    callMsGraph(response.accessToken).then((response) => {
                        setGraphData(response);
                    });
                });
        }

        RequestProfileData();
    }, [accounts, instance]);
 
<Person userId={graphData?.id} />
No RepliesBe the first to reply

Resources