CODEWITHSUNDEEP
azure-active-directoryazure-ad-b2cazure-ad-msalmsal.js
JoeD
JoeD

Reputation: 87

POST oauth2/v2.0/token 400 (Bad Request) when following the official MSAL React tutorial

I am at a loss with just the README. It mentions nothing of this. I downloaded this project and followed the tutorial to customize authConfig.js, I even removed everything except my sign in policy in authConfig.js. It will not work.

https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/1-Authentication/2-sign-in-b2c

It will go to my b2c login page and after setting the redirect URI takes me back to localhost:3000, but it won't show as authenticated. I am just getting the error in console:

FetchClient.ts:58          POST https://<domain>.b2clogin.com/<domain>.onmicrosoft.com/b2c_1_sign_in/oauth2/v2.0/token 400 (Bad Request)

My authConfig.js b2cPolicies and config:

export const b2cPolicies = {
    names: {
        signUpSignIn: "B2C_1_Sign_in"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://<domain>.b2clogin.com/<domain>.onmicrosoft.com/B2C_1_Sign_in",
        }
    },
    authorityDomain: "<domain>.b2clogin.com"
}

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */
export const msalConfig = {
    auth: {
        clientId: "<ID>", // This is the ONLY mandatory field that you need to supply.
        authority: b2cPolicies.authorities.signUpSignIn.authority, // Use a sign-up/sign-in user-flow as a default authority
        knownAuthorities: [b2cPolicies.authorityDomain], // Mark your B2C tenant's domain as trusted.
        redirectUri: "/", // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: "/", // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: "sessionStorage", // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {   
        loggerOptions: {    
            loggerCallback: (level, message, containsPii) => {  
                if (containsPii) {      
                    return;     
                }       
                switch (level) {        
                    case LogLevel.Error:        
                        console.error(message);     
                        return;     
                    case LogLevel.Info:     
                        console.info(message);      
                        return;     
                    case LogLevel.Verbose:      
                        console.debug(message);     
                        return;     
                    case LogLevel.Warning:      
                        console.warn(message);      
                        return;     
                }   
            }   
        }   
    }
};

It works with the default still on the page. What would be wrong?

Solution It was an issue in my manifest for app registration.. Azure AD B2C: Clients must send a client_secret when redeeming a confidential grant

Upvotes: 0

Views: 1576

Answers (1)

jasonnutter
jasonnutter

Reputation: 678

Your redirect URI must be of type "spa" for MSAL.js, so please verify your app registration. You should not provide a client secret for MSAL.js, as this will be viewable in the browser by anyone.

Upvotes: 2

Related Questions