What is the alternative method to using "client_secret" when authenticating to Microsoft identity platform using auth code flow in single-page app?

Pitawat 351 Reputation points
2021-11-11T12:37:59.177+00:00

I'm implementing a Vue webapp that has Azure AD login and it calls an API which hosts on Azure App Service via Azure API Management. Since I have to hard-code APIM subscription key in the Vue app, I am authenticating my Vue app when it calls APIM using access_token from Microsoft identity platform.

I see that OAuth 2.0 authorization code flow is the most preferred method for authenticating users, but according to the Request an access token with a client_secret section, it says that I should not use client_secret in a single page app because it can't be reliably stored on web pages. It doesn't say what I should be using instead.

Below that section, there is another method which is certificate credential. This method requires a self-signed certificate to be uploaded to App registration in Azure and does not require client_secret to be supplied. However, according to this documentation, the JWT must be signed with certificate private key. How does the Vue app sign it as the private key must be used and Vue is client-side app?

I'm new to all of this. What do people normally do in this situation? Do I actually need a server-side app to handle this?

Thanks.

Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
23,177 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Pitawat 351 Reputation points
    2021-11-24T08:32:15.457+00:00

    Any suggestions?

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.