Depends on which services you are employing. Usually the host would resolve issues like those mentioned. Seeing the Azure topic figured may be of relevance to you using their services, not necessarily related to what you are trying to accomplish.
When I originally had my redirect to another dashboard page, I was getting redirected to the Microsoft login. After logging in with Microsoft, I was redirected back to the dashboard page in my app, but with no token. The url when redirected back to my app had query parameters for code, session_state, and state (you can see this in my first post). It looks like it redirected to the auth endpoint, but didn't redirect to the token endpoint (that I copied and pasted directly from the Azure app registration endpoints) before redirecting me to my app.
@psweb suggested that I redirect to my server action script instead of the dashboard page, but when I did that (using the same route I created for the anchor button), I got the 500/404 error.
{"status":"500","message":"Http status code 404. ","stack":"Error: Http status code 404. \n at IncomingMessage. (/opt/node_app/lib/oauth/index.js:95:39)\n at IncomingMessage.emit (events.js:327:22)\n at endReadableNT (internal/streams/readable.js:1327:12)\n at processTicksAndRejections (internal/process/task_queues.js:80:21)"}
@psweb and @patrick, Is this something that the OAuth2 module should be able to accomplish, or should I try my hand at making a custom extension? Microsoft has a javascript library called MSAL for handing authentication and tokens, and I’m wondering if it’s possible to create an extension to implement in wappler.
The standard oauth2 handling should be accomplished by Wappler, sometimes providers don't follow exactly the standard or extended it a bit. Microsoft seems to have added an extra security layer with the PKCE code challenge.
The code exchange probably gives some extra protection, but I've never seen it used in other oauth2 providers. When it is possible to disable the code exchange then it would probably work with the Wappler oauth2, but I don't know if it has some limitations if you disable it.
The normal flow is that when go to the oauth2 enspoint you get redirected to microsoft login. After logging in you get redirected back to the oauth2 endpoint and it will include a code in the querystring. The code is being used by the oauth2 endpoint to connect to the token endpoint to retrieve an access token, this is done from the server (so no redirect). After that it will execute the other steps that you have in the server action, you should add a redirect step there at the end to redirect the user back to the site.
For debugging it is good to disable the redirect and output all steps.
So I shouldn’t redirect to the server action?
You should redirect to the server action, but at the end of the server action after you did something with the access_token that you received you want to redirect the user back to the site again.
Okay, and for the token endpoint, do I need to add parameters in the authorize step to pass the code from the input to the token endpoint (name=code and value={{$_Get.code.urldecode()}}) or does the authorize step handle that automatically?
The authorize step will do the call to the token endpoint with the code you got back after the login, no need to pass this yourself. It also will pass all parameters that where added to the authorize step. From the Microsoft documentation I’ve read that it requires a code_verifier parameter being passed to the token endpoint, so what you can try is adding that parameter to the authorize step. I don’t know what the value of the parameter should be.
I believe the code_verifier is for the code auth flow which requires the code challenge. Verifier is the plain text code before the code challenge was hashed. I’ve changed from SPA to Web so that I don’t need to use the code challenge. I’m still running into the 404 error
I’ve tried both the code auth flow and now the implicit grant flow and I’m still running into the same 404 error after signing in. I’m assuming that is having to do with the redirect to the server action. I have it redirecting to https://www.mywebsite.com/api/oauth_login, and have the route set up. Am I doing anything wrong here?
This suggests the redirect uri in the authorise step needs to be encoded:
‘The redirect_uri of your app, where authentication responses can be sent and received by your app. It must exactly match one of the redirect_uris you registered in the portal, except it must be url encoded. For native & mobile apps, you should use one of the recommended values - https://login.microsoftonline.com/common/oauth2/nativeclient (for apps using embedded browsers) or http://localhost (for apps that use system browsers).’
Taken from:
Looking at the authorise step you’ve posted above I’m not sure yours is?
I’ve not tried it so can’t say if it works or not but may be something to check?
No luck 
I’ve made an update for the oauth module to support pkce, unzip following file to lib/oauth.
index.zip (1.7 KB)
Set in the params a parameter with the name pkce and value 1.
We found the reason of the 404 error with the azure oauth endpoint. We will release a Wappler update today that will contain the fix. PKCE is not required for azure, but the update will also have support for it.
1 Like
Fixed in Wappler 4.0.7
2 Likes
Thank you so much guys! I will be testing this out today!
Hey @patrick, with the new update, do I need to set up my login server action parameters any differently from what we’ve discussed previously? With the new “Use PKCE”, do I need to still generate and pass the code verifier and code challenge, or does the authorize step now handle that?