microsoft-authentication-library-for-js: Cannot login on msal-react, error on console.log()

Core Library

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

Core Library Version

^2.14.2

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

MSAL.js for React B2C Sample

Description

I am getting an error in the console.log() FetchClient.ts:24 as the place for the error. Line 24 is the await in the function below /** * Fetch Client for REST endpoints - Get request * @param url * @param headers * @param body */ async sendGetRequestAsync<T>(url: string, options?: NetworkRequestOptions): Promise<NetworkResponse<T>> { let response; try { response = await fetch(url, { method: HTTP_REQUEST_TYPE.GET, headers: this.getFetchHeaders(options) }); } catch (e) { if (window.navigator.onLine) { throw BrowserAuthError.createGetRequestFailedError(e, url); } else { throw BrowserAuthError.createNoNetworkConnectivityError(); } }

Error Message

The resulting error from the console.log();

GET https://promise%20ltd.b2clogin.com/promise%20ltd.onmicrosoft.com/b2c_1_signin_signout/v2.0/.well-known/openid-configuration net::ERR_NAME_NOT_RESOLVED

Msal Logs

not sure

MSAL Configuration

// Config object to be passed to Msal on creation
export const msalConfig = {
    auth: {
        clientId: "3a68f70e-c7c9-4115-9b55-7bf1da0d366f",
        authority: "https://Promise Ltd.b2clogin.com/Promise Ltd.onmicrosoft.com/B2C_1_signin_signout",
        knownAuthorities: ["Promise Ltd.b2clogin.com"],
        redirectUri: "http://localhost:4200",
        postLogoutRedirectUri: "http://localhost:4200"
    }
};

// Scopes you add here will be prompted for consent during login
export const loginRequest = {
    scopes: ["https://Promise Ltd.onmicrosoft.com/helloapi/demo.read"]
};

Relevant Code Snippets

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { INetworkModule, NetworkRequestOptions, NetworkResponse } from "@azure/msal-common";
import { BrowserAuthError } from "../error/BrowserAuthError";
import { HTTP_REQUEST_TYPE } from "../utils/BrowserConstants";

/**
 * This class implements the Fetch API for GET and POST requests. See more here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
 */
export class FetchClient implements INetworkModule {

    /**
     * Fetch Client for REST endpoints - Get request
     * @param url 
     * @param headers 
     * @param body 
     */
    async sendGetRequestAsync<T>(url: string, options?: NetworkRequestOptions): Promise<NetworkResponse<T>> {
        let response;
        try {
            response = await fetch(url, {
                method: HTTP_REQUEST_TYPE.GET,
                headers: this.getFetchHeaders(options)
            });
        } catch (e) {
            if (window.navigator.onLine) {
                throw BrowserAuthError.createGetRequestFailedError(e, url);
            } else {
                throw BrowserAuthError.createNoNetworkConnectivityError();
            }
        }

        try {
            return {
                headers: this.getHeaderDict(response.headers),
                body: await response.json() as T,
                status: response.status
            };
        } catch (e) {
            throw BrowserAuthError.createFailedToParseNetworkResponseError(url);
        }
    }

    /**
     * Fetch Client for REST endpoints - Post request
     * @param url 
     * @param headers 
     * @param body 
     */
    async sendPostRequestAsync<T>(url: string, options?: NetworkRequestOptions): Promise<NetworkResponse<T>> {
        const reqBody = (options && options.body) || "";

        let response;
        try {
            response = await fetch(url, {
                method: HTTP_REQUEST_TYPE.POST,
                headers: this.getFetchHeaders(options),
                body: reqBody
            });
        } catch (e) {
            if (window.navigator.onLine) {
                throw BrowserAuthError.createPostRequestFailedError(e, url);
            } else {
                throw BrowserAuthError.createNoNetworkConnectivityError();
            }
        }

        try {
            return {
                headers: this.getHeaderDict(response.headers),
                body: await response.json() as T,
                status: response.status
            };
        } catch (e) {
            throw BrowserAuthError.createFailedToParseNetworkResponseError(url);
        }
    }

    /**
     * Get Fetch API Headers object from string map
     * @param inputHeaders 
     */
    private getFetchHeaders(options?: NetworkRequestOptions): Headers {
        const headers = new Headers();
        if (!(options && options.headers)) {
            return headers;
        }
        const optionsHeaders = options.headers;
        Object.keys(optionsHeaders).forEach((key) => {
            headers.append(key, optionsHeaders[key]);
        });
        return headers;
    }

FetchClient.ts 
-----------------------

    private getHeaderDict(headers: Headers): Record<string, string> {
        const headerDict: Record<string, string> = {};
        headers.forEach((value: string, key: string) => {
            headerDict[key] = value;
        });
        return headerDict;
    }
}

Reproduction Steps

https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/b2c-sample

Expected Behavior

this error is not supposed to show

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Internet Explorer

Regression

none

Source

Internal (Microsoft)