ra-auth-msal
Advanced tools
Changelog
3.0.1
uninitialized_public_client_application
and interaction_in_progress
errors (#16) (benin-work)Changelog
3.0.0
@azure/msal-browser
to v3In MSAL v3.x, you must initialize the application object by calling the initialize
function asynchronously.
One way to achieve this is by using the useEffect
hook in your main component:
// in src/App.jsx
-import React from 'react';
+import React, { useEffect } from "react";
import { Admin, Resource } from 'react-admin';
import { BrowserRouter } from "react-router-dom";
import { PublicClientApplication } from "@azure/msal-browser";
import { LoginPage, msalAuthProvider } from "ra-auth-msal";
import dataProvider from './dataProvider';
import posts from './posts';
import { msalConfig } from "./authConfig";
const myMSALObj = new PublicClientApplication(msalConfig);
const App = () => {
+ const [isMSALInitialized, setMSALInitialized] = React.useState(false);
+ useEffect(() => {
+ myMSALObj.initialize().then(() => {
+ setMSALInitialized(true);
+ });
+ }, []);
const authProvider = msalAuthProvider({
msalInstance: myMSALObj,
});
+ if (!isMSALInitialized) {
+ return <div>Loading...</div>;
+ }
return (
<BrowserRouter>
<Admin
authProvider={authProvider}
dataProvider={dataProvider}
title="Example Admin"
loginPage={LoginPage}
>
<Resource name="posts" {...posts} />
</Admin>
</BrowserRouter>
);
};
export default App;
See the MSAL upgrade guide for more information.