I’m trying to create a log-in flow similar to the OAuth2 Facebook Login example in the documentation, but I need to use Azure AD. Microsoft has quite a few OAuth2.0 protocols ( OAuth 2.0 and OpenID Connect protocols on the Microsoft identity platform - Microsoft identity platform | Microsoft Docs), but recommends using Authorization Code Flow for SPAs (I’m using nodejs).
I need to get a token to call the Microsoft graph api (https://graph.microsoft.com/v1.0/me) and get the user’s email and ID. I am able to get to the Microsoft sign-in page and it successfully redirected back to my app login page. After the redirect back to my app, I am getting the code
, state
, and session_state
in the url query, but I’m not getting a response from the graph api and I’m also not getting any errors.
I’m new to this, so I may be misinterpreting it, but it looks like the authentication is being returned, but another call is not being made to the token endpoint to get the access token. I’m also confused as to why the graph api response is empty, but I’m not getting an error from the api call that the access token is empty.
Here’s what I’ve set up:
-
Per Microsoft’s instructions registered my app as an SPA, set up the redirect uri, and changed the manafest’s
replyUrlsWithType
'stype
tospa
, and created a client_secret:
-
Entered all the info in a custom OAuth2 Provider:
-
Added the Authorize step with the code_challenge parameter as a plain string for development (it’s 104 characters long). The other option is SHA256 base64url encoding, but I kept getting errors of invalid length, so for development I think the plain string will be fine.
-
Call the microsoft graph api:
I also set up a route to the api so I can call it from an anchor button for login, and have a paragraph with the email in the graph response binded to the inner text to see if the api successfully retrieved the user’s data.
Please let me know what I’m doing wrong here, or if I should be using one of the other protocols. This is the last thing I need to figure out for a POC to convince a client to move from Power Apps to Wappler!