Azure Oauth2 Issue

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.
redirect_url_query

redirect_query_response

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:

  1. Per Microsoft’s instructions registered my app as an SPA, set up the redirect uri, and changed the manafest’s replyUrlsWithType's type to spa, and created a client_secret:

  2. Entered all the info in a custom OAuth2 Provider:

  3. 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.

  4. 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!

Also, if it matters, I’m using docker hosting.

@psweb, you were a great help in my last post. Any idea about this OAuth issue? Or know who I can message for help?

Let me take a look and come back to you.

The first thing right away that I notice is that you are doing everything via localhost, not always an issue in some sandbox type API environment, but often that can be one of the first things to give you grief. Many APIs want a minimum of a domain name as well as HTTPS, SSL.
Certainly if they have a callback URL in the API. I think I only found 3 APIs so far that allow localhost as a callback address.

My suggestion setup a digital ocean account with 100 dollars free credit, go to API, Click Generate New Token, give it a name, keep both scopes selected, click generate token.

Open Wappler, create a new project as NodeJS, Docker Hosting, once its finished its initial setup, click project settings, set up a new target for Digital Ocean, add your API key, choose the cheapest account, and setup NodeJS14, MariaDB 10.5.x, save.

Get a dummy domain name from wherever and set the nameserver to point to you digital ocean account, in digital ocean set the A record to the domain.

Back in Wappler, Project Settings, Targets, Manage the remote connection and add Portainer and Traefik, which you need for the SSL certificate.

And now you have a solid testing environment ready for API integration. Maybe start with that and see how you go.

Thank you. I know that azure allows local host redirects (as it’s in their documentation and most online tutorials for development), but I will try out your suggestion to cover all bases! I do already have a version of the app running on a DO droplet so that shouldn’t be too much more work.

I had SalesForce docs also saying they accept localhost:8100, but could not get it to work, then reading deeper I saw they were specifically talking about https://localhost, which to be honest I did not even know existed, after trying to add https to localhost unsuccessfully I just went the docker route.
Just helped cut out one possible cause of problems.

@wappler_ambassadors, anyone know how to get localhost with SSL https://localhost just out of interest.
Moved this last part to a new thread, because I did not want to hijack this one.

4 posts were split to a new topic: Localhost with and without SSL?

So I created a test app just to test Azure OAuth2.0 and followed your instructions and I ran into the same issue. No difference from localhost. Were you able to find anything out?

Are the screenshots in the first post still relevant with your tests you did, so i can scan through those to look for a possible reason?

I think I know whats wrong to be honest, can you send a piece of the code you get back please, want to see the start and end of the 104 character long code.

Everything is exactly the same except for the redirect uri in both the scope table in wappler and in the azure app registration portal.

The same thing happened where it successfully redirected, but it looks like it either didn’t get go to the token url to get the token, or wasn’t successful. I’m also not getting any errors like before, but also no response from the graph api (using the oauth2 provider). I tried executing the graph api in a separate server action using the oauth2 provider, but got an error that the access token was empty.

I set up another button on the redirect page (/dashboard) to execute the oauth login again to see the network history. It auto redirects me after I click the button without taking me to the microsoft login page, but it’s not showing my username after “Hello” that I should be getting from the graph api. oauth_login is the same server action in my pictures above. The authorize is the authorize endpoint that responded with the code for the token endpoint, and then there’s the dashboard redirect, but shouldn’t I be seeing something from the token endpoint?

Have you got that piece of the code handy

Sorry, I didn’t see that before. Are you talking about the code query parameter Azure sent back or or the code challenge string?

it was probably sent back in the URL, it may be far far longer than 108 characters, more like 1080 or something silly

This what you mean? Here’s part of it

Oh sorry you need to see the end too

Yup, looks good, lets try

  1. You have your OAuth2 Provider under Globals
  2. You have your OAuth2 Provider under your API Action
  3. You have your OAuth2 Authorise step after
  4. You have your actual API Action, and this is where I think you have a setup issue, the Action has the Authorization set to the OAuth2, and OAuth2 is set to your provider, but you seem to be missing the Headers.

Add a Header
#1
Name: Authorization
Value: Bearer {{YOUR_CODE}}

It should look something like this

Try it like that and see if it works, or if you get a different error at least, it may say the code is incorrect, as it may have to be encoded.

And… is it working or giving any new error, or hasn’t changed at all?

It hasn’t changed, but I’m triple checking I have everything set up right

Yeah, everything is the same, no different errors, no difference in the network, and the api isn’t responding with a username.