PKCE code flow and React SPA?

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.14.1

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.0.0

Description

What is the guidance for implementing PKCE flow in a react SPA (multitenant) app? I see a number of confusing answers around, including some that seem more like hacks than solutions.

Here’s my problem. I have a service and an app registered in azure.

• If I log in with an admin user, I get the prompt to consent to the usage, and once I agree I end up with “AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption.”. This repeats (including the consent prompt, on every login)

• If I log in with a non-admin user, I get another exception “AADSTS650052: The app needs access to a service (‘api://XXX’) that your organization ‘ca7981a2-…etc’ has not subscribed to or enabled. Contact your IT Admin to review the configuration of your service subscriptions.”

I am using a fairly barebone client downloaded from the azure Quickstart blade. I also added my app to the service as a known client, on the AAD side. I granted admin consent for the default directory (I’m logging in to the same domain where the client and APIs are registered)

So question is, how do I get this set up properly, using best security practices, including not storing secrets in plain text?

I did follow this guide, but I must be missing something.

MSAL Configuration

auth: {
        clientId: "dcbf047b-<REMOVED>",
        authority: "https://login.microsoftonline.com/common",
        redirectUri: "http://localhost:3000/redirect"

    },
    cache: {
        cacheLocation: "sessionStorage", 
        storeAuthStateInCookie: false, Edge
    }

Relevant Code Snippets

{
	"id": "d3fa084d-<REMOVED>",
	"acceptMappedClaims": null,
	"accessTokenAcceptedVersion": null,
	"addIns": [],
	"allowPublicClient": null,
	"appId": "dcbf047b-<REMOVED>",
	"appRoles": [],
	"oauth2AllowUrlPathMatching": false,
	"createdDateTime": "2021-05-27T20:17:42Z",
	"disabledByMicrosoftStatus": null,
	"groupMembershipClaims": "DirectoryRole",
	"identifierUris": [],
	"informationalUrls": {
		"termsOfService": null,
		"support": null,
		"privacy": null,
		"marketing": null
	},
	"keyCredentials": [],
	"knownClientApplications": [],
	"logoUrl": null,
	"logoutUrl": null,
	"name": "Test Client App",
	"oauth2AllowIdTokenImplicitFlow": false,
	"oauth2AllowImplicitFlow": false,
	"oauth2Permissions": [],
	"oauth2RequirePostResponse": false,
	"optionalClaims": {
		"idToken": [
			{
				"name": "groups",
				"source": null,
				"essential": false,
				"additionalProperties": []
			}
		],
		"accessToken": [
			{
				"name": "groups",
				"source": null,
				"essential": false,
				"additionalProperties": []
			}
		],
		"saml2Token": [
			{
				"name": "groups",
				"source": null,
				"essential": false,
				"additionalProperties": []
			}
		]
	},
	"orgRestrictions": [],
	"parentalControlSettings": {
		"countriesBlockedForMinors": [],
		"legalAgeGroupRule": "Allow"
	},
	"passwordCredentials": [
		{
			"customKeyIdentifier": null,
			"endDate": "2021-11-27T21:24:59.409Z",
			"keyId": "f78dc345-c7fe-4233-a9c4-10947afca177",
			"startDate": "2021-05-27T20:24:59.409Z",
			"value": null,
			"createdOn": "2021-05-27T20:25:03.4717029Z",
			"hint": ".oY",
			"displayName": "Default App Secret"
		}
	],
	"preAuthorizedApplications": [],
	"publisherDomain": "<REMOVED>.com",
	"replyUrlsWithType": [
		{
			"url": "http://localhost:3000/redirect",
			"type": "Spa"
		}
	],
	"requiredResourceAccess": [
		{
			"resourceAppId": "600d1c38-<REMOVED>",
			"resourceAccess": [
				{
					"id": "f14dd9fb-<REMOVED>",
					"type": "Scope"
				}
			]
		},
		{
			"resourceAppId": "00000003-0000-0000-c000-000000000000",
			"resourceAccess": [
				{
					"id": "e1fe6dd8-ba31-4d61-89e7-88639da4683d",
					"type": "Scope"
				}
			]
		}
	],
	"samlMetadataUrl": null,
	"signInUrl": null,
	"signInAudience": "AzureADMultipleOrgs",
	"tags": [],
	"tokenEncryptionKeyId": null
}

Identity Provider

Azure AD / MSA

Source

External (Customer)

[vpopescu]

I somehow got part of it to work, but I don’t know how just yet, still looking into it. Could it have something to do with the fact that I was using a Global Admin that was external to the directory? For example, me_live.com#EXT#@mydomain.onmicrosoft.com?

I created a global admin in the domain ([e-mail]), and it still got the PKCE error, but it managed to grant admin consent somehow.

I am sure I am going to run into this again, and I will capture the console log. Thank you!

[msftbot[bot]]

@vpopescu This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.