9

I try to setup authentification for an Angular app using authorization code and Azure AD B2C (oidc-client on client side), but I'm getting these errors from Angular:

enter image description here

After looking in B2C audit logs, I found this error message:

Clients must send a client_secret when redeeming a confidential grant.

Here's my client side configuration:

const settings = {
  stsAuthority: 'https://supportodqqcdev.b2clogin.com/supportodqqcDev.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_SignUpSignInOdqPlatine',
  clientId: '8447df5b-35a0-40a7-944f-5dcce87a2193',
  clientRoot: 'https://localhost:4200',
  scope: 'openid https://supportodqqcDev.onmicrosoft.com/platineclientdev/read',
};
this.userManager = new UserManager({
  authority: settings.stsAuthority,
  client_id: settings.clientId,
  redirect_uri: `${settings.clientRoot}/signin-callback`,
  scope: settings.scope,
  response_type: 'code',
  post_logout_redirect_uri: `${settings.clientRoot}/signout-callback`,
  automaticSilentRenew: true,
  silent_redirect_uri: `${settings.clientRoot}/assets/signin-silent-callback.html`,
});

If I switch the above configuration to use a local IdentityServer instance, everthings works has expected.

Is someone able to point me out where or how I should investigate this?

Maxime Gélinas
  • 1,516
  • 12
  • 31
  • 1
    Who will redeem code for you? I guess you are using SPA and trying to integrate Auth Code flow. If you are using SPA then you must use implicit flow. B2C is showing **client_secret is must** because it needs that to redeem code. replace response_type value with 'token' and see what it is doing – Ramakrishna Dec 04 '19 at 01:47
  • 1
    B2C currently supporting PKCE flow for Native Applications but not for Web. Native Applications can redeem auth code by using PKCE flow but not web applications. – Ramakrishna Dec 05 '19 at 10:43

3 Answers3

15

I had the exact same issue as you and was just able to resolve it.

AD is requesting the client_secret from you, because it isn't configured for PKCE yet. To tell AD that you want to use PKCE for a specific redirect url you need to set its type from 'Web' to 'Spa'. This can be done in the manifest.

Search for the property replyUrlsWithType in the Manifest and look for your .../signin-callback url. Change its type to 'Spa' and you should be good.

eg.:

"replyUrlsWithType": [
    {
        "url": "http://localhost:8080/signin-callback",
        "type": "Spa"
    },
]

The configured url will now disappear from your Authorization page but thats ok -> it's still present in the Manifest. The MS team is working on this new type.

Also make sure you marked your application as a public client.

For more information, see my answer here: Is Active Directory not supporting Authorization Code Flow with PKCE?

chrsi
  • 672
  • 5
  • 19
0

Your image shows a CORS error.

I'm not sure if oidc-client works OOTB with B2C. It's more for identityserver.

Have a look at the msal.js sample.

rbrayb
  • 40,518
  • 31
  • 108
  • 154
0

I suspect that your code is fine but ...

The last I heard, Azure AD does not allow cross origin calls to the token endpoint - and therefore does not support the Authorization Code Flow (PKCE) that SPAs should use in 2019.

Unless I'm mistaken this will mean you need to use the (unrecommended) implicit flow when integrating with Azure AD. There have been problems for SPAs for a couple of years now.

Out of interest I wrote a couple of posts on Azure SPA workrounds a couple of years ag - I suspect some of this is still relevant: https://authguidance.com/2017/11/30/azure-active-directory-setup/

Gary Archer
  • 6,221
  • 2
  • 5
  • 10
  • When I get the well known config at `https://supportodqqcdev.b2clogin.com/supportodqqcDev.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_SignUpSignInOdqPlatine`, `code` is included in the supported response types. It doesn't meen that Authorization Code Flow is supported? – Maxime Gélinas Dec 04 '19 at 01:11
  • In theory, it should but there are differences. You'll probably find msal.js won't work OOTB with identityserver. Also, I think that MSAL.js uses implicit flow not authorisation code grant. – rbrayb Dec 04 '19 at 01:25
  • @MaximeGélinas, you should not use Auth Code flow for SPA apps, out of the box B2C supports Auth Code flow from SPA apps but we should not use that because of high security risk (risk is because, you need to expose client id and secret in client script and any one can easily read that from web). – Ramakrishna Dec 04 '19 at 01:52
  • 1
    @Ramakrishna Authz Code Flow is the new way for SPA. Implicit flow is deprecated since summer 2019. See: https://www.pluralsight.com/courses/openid-and-oauth2-securing-angular-apps. – Maxime Gélinas Dec 04 '19 at 13:09
  • Just to be clear - Authorization Code Flow (PKCE) is recommended for SPAs and Maxime's code looks fully correct. But Azure AD incorrectly block the request to the token endpoint. I would aim to resolve it by double hopping the request to the token endpoint via a back end API. I will update my sample to do this when I get some time. – Gary Archer Dec 05 '19 at 08:10
  • PKCE is fully supported - and of course the client secret only needs to be supplied for web apps - not for SPAs: https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow – Gary Archer Dec 05 '19 at 08:23
  • Hmm - Microsoft articles still indicate that only (unrecommended) implicit flow is supported - as in my sample above: https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa – Gary Archer Dec 05 '19 at 08:32
  • So worst case scenario set response type to token id_token and you'll get your app working - as in my sample. This will not affect code in other parts of your SPA: https://github.com/gary-archer/authguidance.websample.azure/blob/master/spa/src/plumbing/oauth/authenticator.ts – Gary Archer Dec 05 '19 at 08:34
  • I also agree with your choice of oidc client library - the best option out there - and enables you to easily switch your app to a different authorization server if needed. – Gary Archer Dec 05 '19 at 08:37