conscious-sapphire•2y ago

AzureB2C MsalProvider issues

Hi. I'm using Azure B2C (Microsoft provides MsalProvider for react apps) as the auth provider for my application but I keep getting this error in the console below when running the app. I think this is also causing some other problems, i.e. double requests when changing between pages. I understand this is a fairly vague question I just wondered if anybody had hit similar issues or knew of something I could try?

react-dom.development.js:86 Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see https://reactjs.org/link/rules-of-hooks
    at mn (http://localhost:3000/static/js/bundle.js:130292:19)
    at SnackbarProvider (http://localhost:3000/static/js/bundle.js:172181:24)
    at http://localhost:3000/static/js/bundle.js:26377:66
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:87859:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:86859:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:87879:5)
    at App (http://localhost:3000/static/js/bundle.js:62:65)
    at MsalProvider (http://localhost:3000/static/js/bundle.js:25279:5)

My index.tsx is using the MsalProvider (from Microsoft) like this:

const msalInstance = new PublicClientApplication(msalConfig);

root.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <App />
    </MsalProvider>
  </React.StrictMode>
);

6 Replies

Omer•2y ago

Hey @jn 👋 , Welcome, we are glad to see you! Hmm apparently this seems to be related to notificationProvider. Give me some time and I'll review it for you ⚡

conscious-sapphire•2y ago

Thanks @Omer . Let me know if I can provide any more information.

Omer•2y ago

refine runs your authProvider's checkAuth function on every page change https://refine.dev/docs/api-reference/core/providers/auth-provider/#checkauth

Auth Provider | refine

refine let's you set authentication logic by providing the authProvider property to the `` component.

Omer•2y ago

btw We've added it to our backlog to fix the warning you mentioned, but this warning isn't causing a problem

conscious-sapphire•2y ago

Okay thanks. I'll just ignore that warning for now then. Would an Azure B2C auth provider example be useful if I get a chance to raise a PR?

Omer•2y ago

It would be great! parrot