CORS issue

[TomTomDam]

Hi, I am trying to get a working example of this package as outlined in the README and using a fresh React app, but I am getting a CORS issue. Am I missing a step?

My code:

import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { FetchRequestAdapter } from "@microsoft/kiota-http-fetchlibrary";
import { createGraphServiceClient } from "@microsoft/msgraph-sdk";
import "@microsoft/msgraph-sdk-users";
import { ClientSecretCredential } from "@azure/identity";
import { AzureIdentityAuthenticationProvider } from "@microsoft/kiota-authentication-azure";

function App() {
  const [count, setCount] = useState(0);

  const getUsers = async () => {
    // @azure/identity
    const credential = new ClientSecretCredential(
      "TENANT ID",
      "CLIENT ID",
      "CLIENT SECRET"
    );

    // @microsoft/kiota-authentication-azure
    const authProvider = new AzureIdentityAuthenticationProvider(credential, [
      "https://graph.microsoft.com/.default",
    ]);

    const requestAdapter = new FetchRequestAdapter(authProvider);
    const graphServiceClient = createGraphServiceClient(requestAdapter);

    try {
      const users = await graphServiceClient.users.get();
      console.log(JSON.stringify(users));
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div>
        <button onClick={getUsers}>Get users</button>
      </div>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

I have also made sure to set up my Azure app registration and I have added a SPA redirect URL, the URL being http://localhost:5173/ which is my app's URL.

[baywet]

Hi @TomTomDam
Thank you for using the SDK and for reaching out.

My guess is that your application registration is not enabled for SPA OR you have not registered your redirect uris.

more information

Let us know if you have any additional comments or questions.

[TomTomDam]

@baywet I already created the app registration and registered the redirect URL using this step: Redirect URI: MSAL.js 2.0 with auth code flow. I ticked "Access tokens" for this.

I also have my Supported account types set to: Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant)

But I am still getting the same issue. Would the options I mentioned affect anything?