Directing callback from OAuth server to Azure Function results in 500 Internal Server Error

Question

I am working on a Static Web App in which we would like to connect to an outside API to access data. I have it set up so that the user logs in on the API providers website, and the callback is directed to an Azure Function, which then uses the authentication code to request and save access tokens.

This approach works fine locally, but when the callback is directed to the deployed Azure Function, the function returns error 500. In App Insights, I can see that the route is matched with function template when the function is called, but there are no further logs. What could be the cause of this error?

Answer 1

@Benoit LeBlanc
The problem was caused by the "code" query parameter in the oauth callback URL. I forget the details exactly as I learned them from Microsoft Tech Support, but the code parameter is used internally within the Static Web App system which causes conflicts when trying to access that parameter in your function.

The solution is to create a proxy which will intercept the callback, change the name of the code parameter, and direct the call to your original function.

In the proxies.json file within your api folder, use this template to solve your problem:

proxies.json

{  
  "$schema": "http://json.schemastore.org/proxies",  
  "proxies": {  
    "callback": {  
      "matchCondition": {  
          "methods": [ "GET" ],  
          "route": "/api/CatchYahooCallbackProxy"  
      },  
      "backendUri": "http://localhost/api/CatchYahooCallback",  
      "requestOverrides": {  
        "backend.request.querystring.code": "",  
        "backend.request.querystring._code": "{request.querystring.code}"  
      }  
  }  
  }  
}