"Sign in with Microsoft" implementation on a ReactJS/NestJS app ?

Question

Hello,

First of all, I am sorry if the tags aren't appropriate. I couldn't find the right tags. Please let me know if there are more appropriate ones.

I would like to implement a "Sign in with Microsoft" button on my React app and I have been lost in the documentation and the multiple configurations possible. My app is quite basic, and I am surprised I haven't been able to implement it easily.

My use case :
I would like to add a "Sign in with Microsoft" button on my React app, that will redirect the user to a login with Microsoft form. Once he logs in, I would like him to be redirected on my app and then send the token to a backend (in NestJS) to verify if this user exists in our own database. If not, we reject his login request. If he is, we generate a JWT token, send it to him and he can use the app. The frontend doesn't rely on the ones sent by Microsoft.

To make sure I get everything right, I have installed this sample project and I have been following this tutorial : Single-page app > Browser delegated authentication but I am stuck to an error after being redirected after logging in. The call to

https://login.microsoftonline.com/consumers/oauth2/v2.0/token?client-request-id=<clientRequestId>

sends an error :

AADSTS70002: The provided request must include a 'client_secret' input parameter.

I can't find any way to fix this error.

For reference, here are my settings :

I have an external tenant,

The app created has :

• Supported account types : "All Microsoft account users", 
• The redirect url on the Entra config dashboard and in the msalConfig are the same,
• I have tried with and without a "client secret" set up,
• I have granted Admin consent on the API permission "User.Read",
• The "authority" in the msalConfig is "https://login.microsoftonline.com/consumers/"

Did I miss anything in the configuration ? How do I fix this error ?

Answer 1

It sounds like you want users to login with their Microsoft account, not just users of your Active Directory.

did you setup signup user flow:

https://learn.microsoft.com/en-us/entra/external-id/customers/how-to-user-flow-sign-up-sign-in-customers?source=recommendations

then add app:

https://learn.microsoft.com/en-us/entra/external-id/customers/how-to-user-flow-add-application

you should only need the client (application) and you tenant domain.