Implementing SSO for Azure AD B2C

I need to implement a Microsoft SSO process for my Azure AD B2C app and then store the account details in my database. For simple testing, I am doing it in a React App just to see the flow.

I've got a simple React App and I want to implement Microsoft SSO here for Azure AD B2C. I've got my tenant name, ID, secret etc. I've also set the redirect URI to "http://localhost:5000" (For my react app).

When the SSO sign up pop up opens, it says:

The provided application with ID is not valid against this service. Please use an application created via the B2C portal and try again.

export const msalConfig = {
    auth: {
        clientId: '<clientId>',
        authority: `https://<tenantName>.b2clogin.com/<tenantName>.onmicrosoft.com/<policy>/v2.0/`,
        redirectUri: 'http://localhost:5000',
        knownAuthorities: ['<tenantName>.b2clogin.com'],
    },
};

export const loginRequest = {
    scopes: ['openid', 'profile', 'User.Read'],
};

After initializing msal and when the browser window for Microsoft SSO opens, it just says:

The provided application with ID is not valid against this service. Please use an application created via the B2C portal and try again.

What I essentially wanna do is that I get that OAuth2 Microsoft SSO Sign Up/Sign In screen and then I enter my microsoft account details (either oganization or personal) and I am logged in.

Initially, I too got same error when I used application with Account type other than the one that supports user flows:

To resolve the error, make sure to register application with below Account type that supports user flows option in your B2C tenant:

When I updated the config file with above application ID and run the project, I got the pop-up with Sign Up and Sign In flow screen successfully: