Setting up Azure B2C with React

Question

I am trying to configure my react/.NET 5.0 application to work with Azure B2C. I have everything set up , I have tried to run this against an MVC application and I get the login screen. But for some reason, when I try to redirect from a react page, I keep getting the same error. There appears to be almost no real good documentation for this as well. This is my authConfig file.

export const msalConfig = {

    auth: {
        clientId: process.env.REACT_APP_ADB2C_CLIENT_ID
        , authority: process.env.REACT_APP_ADB2C_AUTHORITY
        , knownAuthorities: [process.env.REACT_APP_KNOWN_AUTH]
        , clientSecret: process.env.REACT_APP_CLIENT_SECRET
        , reponseType: 'code'
      },
    cache: {
        cacheLocation: 'sessionStorage'
        ,storeAuthStateInCoolie: false
    }
};

const b2cPolicies = {
    name: {
        signUpSignIn: "B2C_1_cp_signin_up"
        , forgotPassword: "B2C_1_cp_forgot_pwd"
        , editProfile: "B2C_1_cp_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: `https://${process.env.REACT_APP_TENANT_LOGIN}/${process.env.REACT_APP_TENANT}/${process.env.REACT_APP_SIGNUP_POLICY}`,
        },
        forgotPassword: {
            authority: `https://${process.env.REACT_APP_TENANT_LOGIN}/${process.env.REACT_APP_TENANT}/${process.env.REACT_APP_FORGOT_POLICY}`,
        },
        editProfile: {
            authority: `https://${process.env.REACT_APP_TENANT_LOGIN}/${process.env.REACT_APP_TENANT}/${process.env.REACT_APP_EDIT_POLICY}`
        }
    },
    authorityDomain: process.env.REACT_APP_TENANT_LOGIN
}

export const loginRequest = {
    scopes: ["openid", "profile"],
};

I keep running into this error when I click on the link to redirect.

Any help with this would be great.

Answer 1

1. The reply URL must begin with the scheme https. Please check if reply urls are configured correctly which must be same in azure portal and in code .

2. Check if the callback path is set to identity provider something like /signin-oidc for redirect url .(And make sure you have unique callback if multiple urls are used. such as https://contoso.com/signin-oidc.

3. The CallbackPath is the path where server will redirect during authentication. It's automatically handled by the OIDC middleware itself, that means we can't control the logic by creating a new controller/action and set CallbackPath to it

4. If you have check marked id_token in portal, try redirecting to home page ,instead of api actions directly.

5. Change the cookies to be set as secure using this in start up class

   services.Configure(options => { options.CheckConsentNeeded = context => true;//add if consent needed options.MinimumSameSitePolicy = SameSiteMode.None; // else try SameSiteMode.Lax; options.Secure = CookieSecurePolicy.Always;

   });

6. use Microsoft.AspNetCore.HttpOverrides; reference in startup.cs class, by including the nuget package.

7. Also check and Add > app.UseHttpsRedirection(); above app.authentication(); in startup configure method.

then try again.

If not try to set ProtocolMessage.RedirectUri to the HTTPS url

services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(options =>
{   
Configuration.Bind("AzureAdB2C", options);
options.Events = new OpenIdConnectEvents
{
    OnRedirectToIdentityProvider = async ctx =>
    {
        /* Redirect Uri modified for https protocol */
        ctx.ProtocolMessage.RedirectUri = urlWithHttps
    }
}
});

Or you can pass login hint :Please refer this doc.

References:

1. Tutorial: Register an application - Azure AD B2C | Microsoft Docs
2. Configure authentication in a sample web application by using Azure Active Directory B2C | Microsoft Docs