How to implement Azure AD B2C Login in Angular v17 standalone

Question

I was able to implement my Login into a no-standalone project by using this documentation:. For a standalone version I used this sample. I'm hardly trying to configure the application right, to connect to my B2C-Tenant.

I replaced the environmet.dev.ts with something like this:

export const environment = {
    production: false,
    msalConfig: {
        auth: {
            clientId: 'b5c2e510-4a17-4feb-b219-e55aa5b74144',
            authority: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2'
        }
    },
    apiConfig: {
        scopes: ['user.read'],
        uri: 'https://graph.microsoft.com/v1.0/me'
    }
};

When I try to login I get this Error: ClientAuthError: endpoints_resolution_error: Endpoints cannot be resolved

Answer 1

For an B2C-Login update the environment.dev.ts to something like that:

export const environment = {
    production: false,
    msalConfig: {
        auth: {
            clientId: 'b5c2e510-4a17-4feb-b219-e55aa5b74144',
            authority: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2',
            authorityDomain: "your-tenant-name.b2clogin.com"
        }
    },
    apiConfig: {
        scopes: ['user.read'],
        uri: 'https://graph.microsoft.com/v1.0/me'
    }
};

Than in your app.config.ts update the MSALInstanceFactory() like that:

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: environment.msalConfig.auth.clientId,
      authority: environment.msalConfig.auth.authority,
      knownAuthorities: [environment.msalConfig.auth.authorityDomain],
      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage
    },
    system: {
      allowNativeBroker: false, // Disables WAM Broker
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}