CODEWITHSUNDEEP
azurevue.jsauthentication
stoicalpirate
stoicalpirate

Reputation: 358

Configuring an Azure Static Web App to authenticate using Azure AD B2C

I've built a basic Vue web app using Azure Static Web Apps, and I'm trying to configure custom authentication. I've already managed to get everything (mostly) working using Auth0 by following the documentation and referencing this handy blog post.

For Auth0, I added AUTH0_ID=<my-auth0-id> and AUTH0_SECRET=<my-auth0-secret> to the local.settings.json file. My staticwebapp.config.json looked like this:

...
"auth": {
      "identityProviders": {
        "customOpenIdConnectProviders": {
          "auth0": {
            "registration": {
              "clientIdSettingName": "AUTH0_ID",
              "clientCredential": {
                "clientSecretSettingName": "AUTH0_SECRET"
              },
              "openIdConnectConfiguration": {
                "wellKnownOpenIdConfiguration": "https://<my-auth0-tenant>/.well-known/openid-configuration"
              }
            },
            "login": {
              "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
              "scopes": ["openid", "profile"]
            }
          }
        }
      }
    }

I'm now trying to set up authentication using Azure AD B2C. My understanding is that Azure Static Web Apps handles a portion of the authentication such that I should configure the ID provider to work with a web app rather than with a single page app framework. This is what I did when using Auth0 and it seemed to work.

I've added AADB2C_ID=<my-azure-ad-b2c-id> and AADB2C_SECRET=<my-azure-ad-b2c-secret> to the local.settings.json file. In staticwebapp.config.json I replaced ClientIdSettingName to AADB2C_ID, clientSecretSettingName to AADB2C_SECRET, and wellKnownOpenIdConfiguration to https://<my-azure-ad-b2>.b2clogin.com/<my-azure-ad-b2c>.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_signupsignin1. This references the 'signupsignin' user flow on my B2C tenant.

At this point I can visit /login which points to /.auth/login/aadb2c, initiates the user flow, and lets me sign up and verify as expected. The test user is then created in my Azure AD B2C tenant. However, B2C then tries to redirect me to /.auth/complete which throws a 403 error:

We need an email address or a handle from your login service. To use this login, please update your account with the missing info.

I've tried adding /.auth/complete as an allowed redirect URI in Azure AD B2C but this doesn't fix things. What am I missing here?

Upvotes: 0

Views: 3223

Answers (1)

Hags
Hags

Reputation: 26

Try changing to this: "nameClaimType": "emails". Sourced from staticwebapp.config.json in here: https://github.com/Azure/static-web-apps/issues/457

Upvotes: 1

Related Questions