Getting AADSTS70002: The provided request must include a 'client_secret' input parameter in the sample project

[lazydreamerbliss]

Library

@azure/msal-browser": "^2.1.0

Description

Trying to do OAuth with react SPA as the sample project demonstrated, but getting the following error message.

The react SPA project in the sample mentions no client secret, and only client ID is required. I registered my SPA APP and fulfilled the authConfig.js with info provided in AAD, and logged in via the following code:

    signIn = async(redirect) => {
        if (redirect) {
            return msalApp.loginRedirect(loginRequest);
        }

        return msalApp.loginPopup(loginRequest)
            .then(res => {
                console.info(res)
                return this.handleResponse
            })
            .catch(err => {
                console.info(err)
                this.setState({error: err.errorMessage});
            });
    }

The popup window displayed correct stuff and asked me if I agree to allow my APP to access my data. But after my confirmation, the login progress failed with the following error message.

Wondering Is there something I missed or doing wrongly in configuring the sample project?

Error Message

ServerError: invalid_client: 70002 - [2020-09-15 05:42:02Z]: AADSTS70002: The provided request must include a 'client_secret' input parameter.
Trace ID: e4cd2ef4-dd68-48fe-b61f-269d4ca30500
Correlation ID: 87b76c67-1b1b-4b88-b489-05c690f52498
Timestamp: 2020-09-15 05:42:02Z - Correlation ID: 87b76c67-1b1b-4b88-b489-05c690f52498 - Trace ID: e4cd2ef4-dd68-48fe-b61f-269d4ca30500
    at ServerError.AuthError [as constructor] (http://localhost:3000/static/js/1.chunk.js:450:20)
    at new ServerError (http://localhost:3000/static/js/1.chunk.js:3905:24)
    at ResponseHandler.validateTokenResponse (http://localhost:3000/static/js/1.chunk.js:4418:13)
    at AuthorizationCodeClient.<anonymous> (http://localhost:3000/static/js/1.chunk.js:4652:29)
    at step (http://localhost:3000/static/js/1.chunk.js:398:17)
    at Object.next (http://localhost:3000/static/js/1.chunk.js:329:14)
    at fulfilled (http://localhost:3000/static/js/1.chunk.js:281:24)

[lazydreamerbliss]

Ok I found the reason, the APP I registered is "Web APP", it will work if I change it to "Single Paged App"

[giogokul13]

Thanks mate that helped me a lot

[andyhong0122]

Commenting to seek any sort of clarification on this matter.

Why is this the case? Is there no way around this issue other than registering the app as a SPA?

[derisen]

@andyhong0122 so this is because msal-browser library is using authorization code with PKCE flow for authentication, which requires a special setup on Azure AD's part, so this new "Single-page application" platform is introduced. And yes it's the only way (unless you want to use implicit flow, which msal-browser does not support, and I won't recommend anyway)

[andyhong0122]

@derisen Thanks, my project is using React as frontend and .NET as backend and deployed as a web app. I was not able to find any documentation on implementing msal for this structure so was having a tough time.

[derisen]

@andyhong0122 make sure to take a look at these samples here and here. We usually pair React with Node.js, but there's lots of .NET examples as well.

[jatuAbdullah]

I am developing this in my localhost using PHP . is there anyway around it. without changing from web app to single paged application ??

[muhammadasfar]

@jatuAbdullah did you find any solution?