How to setup external identity provider for MSAL js react spa?

Question

I am trying to authenticate using msal js for my react application (Azure AD B2C). Microsoft authentication works perfectly. But I need to add more external identity providers such as Google to my authentication. I have followed the steps given in the official documentation https://learn.microsoft.com/en-gb/azure/active-directory-b2c/identity-provider-google?WT.mc_id=Portal-Microsoft_AAD_B2CAdmin&pivots=b2c-user-flow

When I Run user flow I am able to sign in google but the user is not authenticated.

screen when user sign into google

This is the screen that is given. And the other thing is only if use Run user flow in Azure AD B2C I am able to do this. If I normally use the sign in button it only shows microsoft authentication.

What am I missing?

Can someone please help on this if possible?

Answer 1

Issues may arise as a result of previous Microsoft configuration under App registrations . Verify below three configurations once whether those are mapped to google identify provider or not

Client ID and Client secret and Authorized redirect URIs

here I found one blog relates to Google Identity Provider with Azure AD B2C configuration and implementation.