How to replace AuthProvider with Microsoft Authentication Library for React (msal-react)?
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
The first thing I did was to wrap like this:
createRoot(container).render(
)
Is this the correct place to add ?
Or where would you put it?
Is needed at all if I use ?
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
createRoot(container).render(
)
Is this the correct place to add
Or where would you put it?
Is
Replies (4)
Sorry for the double post - it would not let me edit my original question.
The first thing I did was to wrap
like this:
Is this the correct place to add
?
Or where would you put it?
Is
needed at all if I use
?
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>?
Hi,
We aren"t experts in
From my point of you, would be better to copy AuthProvider and rewrite it in the msal way (and then use it), instead of wrapping AuthProvider.
Regards,
Keenthemes support
We aren"t experts in
msal.From my point of you, would be better to copy AuthProvider and rewrite it in the msal way (and then use it), instead of wrapping AuthProvider.
Regards,
Keenthemes support
When you say copy and rewrite AuthProvider. Exactly which components are you referring to?
I mean this
Regards,
Keenthemes support
src/app/modules/auth/core/Auth.tsx file.Regards,
Keenthemes support
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
