How to integrate azure b2c with react

Your coordinates for the b2c instance are not correct (see note). You can find more details: https://docs.microsoft.com/en-us/azure/active-directory-b2c/b2clogin

If you like you can use this sample, which shows how to use B2C policy from React application using oidc-client.js library. By default it is configured to use PKCE but you can configure it to use implicit flow instead if needed (not recommended).

Complete instructions provided in the git repo but here is the high level overview.

• You need to first create application in b2c along with the policy (not shown). You should add two redirect uris -- https://localhost:3000 and https://localhost:3000/callback.html

• You can also add permissions in case you like to receive an access_token in addition to the id_token.

• Your manifest should look similar to:

{    "id": "443ca8db-7bd1-4ebd-9671-ce94e006a18a",    "acceptMappedClaims": null,    "accessTokenAcceptedVersion": 2,    "addIns": [],    "allowPublicClient": null,    "appId": "50d2c416-a5ad-4c5c-b36a-0d1ac5b48167",    "appRoles": [],    "oauth2AllowUrlPathMatching": false,    "createdDateTime": "2020-09-02T00:11:35Z",    "groupMembershipClaims": null,    "identifierUris": [],    "informationalUrls": {        "termsOfService": null,        "support": null,        "privacy": null,        "marketing": null    },    "keyCredentials": [],    "knownClientApplications": [],    "logoUrl": null,    "logoutUrl": null,    "name": "OIDC-Test-APP",    "oauth2AllowIdTokenImplicitFlow": false,    "oauth2AllowImplicitFlow": false,    "oauth2Permissions": [],    "oauth2RequirePostResponse": false,    "optionalClaims": null,    "orgRestrictions": [],    "parentalControlSettings": {        "countriesBlockedForMinors": [],        "legalAgeGroupRule": "Allow"    },    "passwordCredentials": [],    "preAuthorizedApplications": [],    "publisherDomain": "contoso.onmicrosoft.com",    "replyUrlsWithType": [        {            "url": "http://localhost:3000/signin-callback.html",            "type": "Spa"        },        {            "url": "http://localhost:3000/",            "type": "Spa"        }    ],    "requiredResourceAccess": [        {            "resourceAppId": "00000003-0000-0000-c000-000000000000",            "resourceAccess": [                {                    "id": "37f7f235-527c-4136-accd-4a02d197296e",                    "type": "Scope"                },                {                    "id": "7427e0e9-2fba-42fe-b0c0-848c9e6a8182",                    "type": "Scope"                }            ]        },        {            "resourceAppId": "18ac2afe-2c1f-4ea8-8d63-14dd50ee4f85",            "resourceAccess": [                {                    "id": "d5515006-5646-4398-ad59-fffc357f3423",                    "type": "Scope"                }            ]        }    ],    "samlMetadataUrl": null,    "signInUrl": null,    "signInAudience": "AzureADandPersonalMicrosoftAccount",    "tags": [],    "tokenEncryptionKeyId": null}

• Clone the repo and update the settings present inside AuthSettings.ts to match your tenant. You must update client_id and contoso which is the tenant name.

const settings = {      // This is  the metadata endpoint      authority: 'https://contoso.b2clogin.com/contoso.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1A_signup_signin',            // Turn off calls to user info since CORS will block it      loadUserInfo: false,       // The URL where the Web UI receives the login result      redirect_uri: 'http://localhost:3000/signin-callback.html',      // The no longer recommended implicit flow must be used if CORS is disabled      // If you want to use impicit flow use id_token instead of code for the return type.      response_type: 'code',      // Other OAuth settings      client_id: '18ac2afe-2c1f-4ea8-8d63-14dd50ee4f85',            // openid is required, remove https://contoso.onmicrosoft.com/test/Read if access_token is not required.      scope: 'openid https://contoso.onmicrosoft.com/test/Read',        // Supply these details explicitly. Directly copied from azure ad b2c policy metadata endpoint.       metadata: {        issuer: 'https://contoso.b2clogin.com/9859cd0c-9d99-4683-abcc-87462f67a0bc/v2.0/',        authorization_endpoint: 'https://contoso.b2clogin.com/contoso.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1a_signup_signin',        token_endpoint: 'https://contoso.b2clogin.com/contoso.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1a_signup_signin',        jwks_uri : 'https://contoso.b2clogin.com/contoso.onmicrosoft.com/discovery/v2.0/keys?p=b2c_1a_signup_signin',        end_session_endpoint: "https://contoso.b2clogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?p=b2c_1a_signup_signin&post_logout_redirect_uri=http%3A%2F%2Flocalhost:3000%2F"    },  } as UserManagerSettings;

• Build and run the app using yarn or npm

• Application will launch by default on http://localhost:3000

• Click Login and it should take you to the b2c policy to complete the journey.

• After you complete the journey in the b2c policy you will be redirected back to the application.