Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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 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>?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi,

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 src/app/modules/auth/core/Auth.tsx file.

Regards,
Keenthemes support



Sorry for the double post - it would not let me edit my original question.

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>
?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(