Azure AD Example JavaScript SPA Error that it wants a 'client_secret'

ajc63298 1 Reputation point
2022-10-09T12:07:12.767+00:00

I've created an application for the Azure AD Example/Guide JavaScript SPA application as per instructions and downloaded and built the application and ran it (npm start). I have made no modification to the JavaScript SPA application as no guidance was given to make any changes. The application should work out-of-the box.

I am getting the following error when it runs. It calls MS Authenticate yet provides this error in the Browser developer console when authentication returns. 

authPopup.js:51 ServerError: invalid_client: 70002 - [2022-10-09 11:48:41Z]: AADSTS70002: The provided request must include a 'client_secret' input parameter.  
Trace ID: 4419e366-5175-47e7-b4ab-3a6ba7358600  
Correlation ID: 1117d0f0-1f2f-4d04-8bcd-3b871a1343ca  
Timestamp: 2022-10-09 11:48:41Z - Correlation ID: 1117d0f0-1f2f-4d04-8bcd-3b871a1343ca - Trace ID: 4419e366-5175-47e7-b4ab-3a6ba7358600  
    at ServerError.AuthError [as constructor] (AuthError.js:27:24)  
    at new ServerError (ServerError.js:16:28)  
    at ResponseHandler.validateTokenResponse (ResponseHandler.js:74:19)  
    at AuthorizationCodeClient.<anonymous> (AuthorizationCodeClient.js:70:41)  
    at step (_tslib.js:75:23)  
    at Object.next (_tslib.js:56:53)  
    at fulfilled (_tslib.js:46:58)

The client_secret is only mentioned in documentation at a vague conceptual level, with no specific details given exactly where it appears in the code. I know based on experience using other servers how it is used and where it should go, yet that is not the point.

The Azure AD JavaScript SPA example/guide code is intended to be a reliably working code that does not need any changes to work. It is failing to do what it is required to do.

Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
19,454 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Akshay-MSFT 16,026 Reputation points Microsoft Employee
    2022-10-10T10:03:10.277+00:00

    Hello @ajc63298 / @ajc63298,

    Thanks for posting your query. For single-page apps (SPA) via the authorization code flow the app must be registered as SPA with port 3000 and not as web app. As per: https://learn.microsoft.com/en-us/azure/active-directory/develop/single-page-app-quickstart?pivots=devlang-javascript#step-1-register-your-application

    248992-image.png

    • Sign in to the Azure portal.
    • If you have access to multiple tenants, use the Directories + subscriptions filter in the top menu to switch to the tenant in which you want to register the application.
    • Search for and select Azure Active Directory.
    • Under Manage, select App registrations > New registration.
    • Enter a Name for your application. Users of your app might see this name, and you can change it later.
    • Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
    • Select Register. On the app Overview page, note the Application (client) ID value for later use.
    • Under Manage, select Authentication.
    • Under Platform configurations, select Add a platform. In the pane that opens select Single-page application.
    • Set the Redirect URI value to http://localhost:3000/.
    • Select Configure.
    • Also ensure that implicit grant is not enabled. MSAL.js 2.0 does not support implicit grant. Enable implicit grant settings only if your app is using MSAL.js 1.0

    248858-image.png

    Please "Accept the answer" if the information helped you. This will help us and others in the community as well.

    Thanks,
    Akshay Kaushik

    0 comments