I'm trying to implement msal-react in Metronic so that my customers can log in and log out using Microsoft's Azure AD B2C like in this example:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-react-spa-app

Microsoft Authentication Library for JavaScript (MSAL.js):
https://github.com/AzureAD/microsoft-authentication-library-for-js

Microsoft Authentication Library for React (msal-react) repo:
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react

Tutorial: Enable your React single-page application to sign-in users and call APIs with the Microsoft identity platform:
https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial

React single-page application using MSAL React to sign-in users against Azure AD B2C sample:
https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/1-Authentication/2-sign-in-b2c

The quickest way to understand how this library works is to clone and run the following sample:

https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/1-Authentication/2-sign-in-b2c/SPA

You can then just npm run it and then you can try to login using your Google account by clicking the login button in the navbar in the header.

The first thing I did was to wrap <AuthProvider> like this:

createRoot(container).render(
<QueryClientProvider client={queryClient}>
<MetronicI18nProvider>
<MsalProvider instance={msalInstance}>
<AuthProvider>
<AppRoutes />
</AuthProvider>
</MsalProvider>
</MetronicI18nProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)

Is this the correct place to add <MsalProvider instance={msalInstance}> ?

Or where would you put it?

Is <AuthProvider> needed at all if I use <MsalProvider>?