How to integrate Azure Ad B2C login in my Electron React App?

user_3604823 0
Viewed 347

I am trying to integrate Azure Ad B2C login in my Electron React App. I have used the MSAL-React Wrapper library for the Login authentical and it works fine in dev mode because of webserver but in production it doesn't work because no webserver in production. I even tried running this example https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-node-samples/ElectronTestApp but it doesnt work for Azure AD B2c tenant. Also, which redirect uri should i use for my Electron app on windows http://localhost:3333/ or msal3cb5f0ac-afd2-4579-9369-b26bc7212f69://auth. I tried both and both showed an empty screen after azure login screen is success.

Now the question is: what library should i use to integrate azure AD B2c login in my Electron(backend)+React(frontend) App ? So that the user login with azure portal and my app get a valid token.

I have used the following MSAL Configuration

export const msalConfig: Configuration = {
  auth: {
    clientId: '3cb5f0ac-afd2-4579-9369-b26bsc7212f69',
    authority:
      'https://kazureapps.b2clogin.com/kaszureapps.onmicrosoft.com/B2C_1_SignIn',
    knownAuthorities: ['kazureapps.b2clogin.com'],
    redirectUri: 'msal3cb5f0ac-afd2-4579-9369-b2s6bc7212f69://auth',
    postLogoutRedirectUri: 'msal3cb5f0ac-afd2-4579-9369-b26bc7212f69://auth',
  },
};
msal-react msal.js electron azure-active-directory azure
1 Answers

• You can try the sign-in with redirect method that uses the MSAL React Wrapper element that allows you to protect specific components by wrapping them in the ‘MsalAuthenticationTemplate’ component. This component will invoke login if a user is not already signed in or render child components otherwise.

  ‘ import { InteractionType } from "@azure/msal-browser";
    import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";

    function WelcomeUser() {
const { accounts } = useMsal();
const username = accounts[0].username;

return <p>Welcome, {username}</p>
}

 // Remember that MsalProvider must be rendered somewhere higher up in the component tree
 function App() {
return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
        <p>This will only render if a user is signed-in.</p>
        <WelcomeUser />
    </MsalAuthenticationTemplate>
  )
    }; ’

Also, once the above has been done to allow Azure AD B2C MSAL authentication, ensure that implicit grant flow in your Azure AD B2C app registration has been allowed and a custom public client protocol as the redirect URI has been added like ‘company://auth’ or ‘msal://redirect’. While the ‘ADAL config’ for local development should be as below: -

 ‘ adalConfig: {
tenant: 'XXXXXXXXXXX',
clientId: 'XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
redirectUri: 'company://auth'
} ’

• The recommended approach to invoke login because of user interaction such as a button click is to use the ‘@azure/msal-browser’ directly paired with the AuthenticatedTemplate and/or UnauthenticatedTemplate components to render specific contents to signed-in or signed-out users respectively as shown in below example: -

  ‘ import { useMsal, AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";

   function signInClickHandler(instance) {
    instance.loginRedirect();
  }

   // SignInButton Component returns a button that invokes a popup login when clicked
   function SignInButton() {
  // useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
const { instance } = useMsal();

return <button onClick={() => signInClickHandler(instance)}>Sign In</button>
 };

  function WelcomeUser() {
const { accounts } = useMsal();
const username = accounts[0].username;

return <p>Welcome, {username}</p>
 }

  // Remember that MsalProvider must be rendered somewhere higher up in the component tree
  function App() {
   return (
    <>
        <AuthenticatedTemplate>
            <p>This will only render if a user is signed-in.</p>
            <WelcomeUser />
        </AuthenticatedTemplate>
        <UnauthenticatedTemplate>
            <p>This will only render if a user is not signed-in.</p>
            <SignInButton />
        </UnauthenticatedTemplate>
       </>
       )
    } ’

• Thus, by following the above specified modifications, you should be able to integrate Azure AD B2C with Electron react app correctly since, electron app uses javascript as its base. Please refer the below links for more information: -

https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in?tabs=react#sign-in-with-redirect

https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/324

user_165268950
Related