Retrieving data for Power Apps Person Card from MS GraphAPI

I’m working on a project using Power Pages where I need to display person cards. These cards should pull user information via an API call, specifically using Microsoft Graph API to get details like name, email, and job title. Here’s what I have tried so far:

const options = {
    authProvider,
};

const client = Client.init(options);

let user = await client.api('/users/email.de').get();

<div id="email-container" data-email="{{ employee.new_email }}">
  Email: {{ employee.new_email }}
</div>
<div id="user-info"></div> <!-- Hier wird das API-Ergebnis angezeigt -->

I’m not sure how to correctly authenticate and connect to the API in Power Pages using JavaScript. Specifically, I don’t know how to implement the authProvider in this context to get access to Microsoft Graph without requiring user login each time.

I would also like to display the result dynamically once the API call is made.

How do I authenticate correctly within Power Pages using the Microsoft Graph API? Can I securely make API calls from the client side, or do I need a server-side implementation for this?

Is there a best practice for handling authentication when working with APIs in Power Pages?

Any guidance or examples would be much appreciated!