[solved]fetch API call timeout error https://graph.facebook.com/v10.0/oauth/access_token

Anyone from the wix technical team, can you please look into this?
As part of my custom login module I have been using facebook’s graph API, which has been working fine until it stopped now:
My backend code:


const data = client_id= ${ fbAppCred . appId } &redirect_uri=https://www.*******.*****/processfbsociallogin&client_secret= ${ fbAppCred . appSecret } &code= ${ code } ;

const wixFetchRequest = {
“body” : data ,
“method” : “get”
}
fetch ( ‘https://graph.facebook.com/v10.0/oauth/access_token?’ , wixFetchRequest ). then (( jsonResponse ) => { console . log ( "Response from fetch " , jsonResponse ) })
. catch (( fetchError )=>{ console . log ( "Error from fetch " , fetchError )});


Output:
Error from fetch ","request to https://graph.facebook.com/v10.0/oauth/access_token ? failed, reason: connect ETIMEDOUT 31.13.77.17:443

The same call works standalone from a browser or as a curl request, but fails from the wix backend.
I have also tried with axios and facebook-node-sdk ( with timeout of upto 30 secs). I receive similar timeout errors only from wix.

Tagging in @shantanukumar847 as I see you had used facebook oauth as part of your custom login in an earlier post. Wondering if you still use it and if it works.

I have raised this with the wix technical support team as well (#211943126)

Thanks

What are you trying to do here? Custom login?

If so, this is how I get the data from facebook. A button will redirect the user to fb to login and provide access via the **getLink** function. Fb will send the user back to the redirect page along with a code parameter in the URL. Use that code in the **processCode** function to exchange it in return for user data like first name, last name, email and account id

import * as queryString from 'query-string';
import { fetch } from 'wix-fetch';

const stringifiedParams = queryString.stringify({
    client_id: 'XXXXXXXXX',
    redirect_uri: 'https://www.domain.com/redirect-page',
    scope: ['email'].join(','),
    response_type: 'code',
    auth_type: 'rerequest'
});

export function getLink() {
 const facebookLoginUrl = `https://www.facebook.com/v10.0/dialog/oauth?${stringifiedParams}`;
 return facebookLoginUrl;
}

export async function processCode(code) {
 const response = await fetch(`https://graph.facebook.com/v10.0/oauth/access_token?client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}&redirect_uri=https://www.domain.com/redirect-page&code=` + code, {
        method: "get"
 });
 let result = await response.json();
 return getBasicDetails(result);
}

async function getBasicDetails(result) {
 const response = await fetch("https://graph.facebook.com/me?fields=id,email,first_name,last_name&access_token=" + result.access_token, {
        method: "get"
 });
 let data = await response.json();
 return data; // Over here we receive the email, first name, last name and account id from facebook, now how you use that is up to you
}

Thank you Shan, I am doing almost exactly the same. And it was working for about 6 months until it suddenly stopped.
Your ’ processCode ’ method is where it’s failing for me with a time out.
But the same url works fine when I call it from outside of Wix.
Have you had to setup anything on the Facebook developer console (apart from the Client OAuth Settings) to allow these queries originating from WIX?

try the exact code i have written, i think there is a bug in yours. if it doesnt work lemme know and ill share my facebook app side of things

Thanks Shan.
I have tried afresh with hardcoding all the parameters from a test function.
To be double sure, I ran the same test function from both the server side and client side.
Server side - times out almost always.
Client side - works as expected
curl - works as expected
I am absolutely convinced this is a WIX server side network/firewall/whitelisting issue.

The reason I say this is once out of the blue Yesterday I did get a Facebook error on the serverside and all of it was in Mandarin / Taiwanese.

"["Result “,{“error”:{“message”:“無法載入網址: 這個網址的網域未包含在應用程式的網域中。若要載入這個網址,請在應用程式設定的「應用程式網域」欄位中新增應用程式的所有的網域及子網域。”,“type”:“OAuthException”,“code”:191,“fbtrace_id”:“A7MTKxbGU8ET5FaU_bfFMyy”}}]”

I have no option other than hosting this OAuth component elsewhere, sigh.


Here is the code, (note: everything is hardcoded for testing).

let url = “https://graph.facebook.com/v10.0/oauth/access_token?client_id=xxxxxx&client_secret=xxxxxxx&redirect_uri=https://my.domain.xyz/processfbsociallogin&code=AQCCZUNjiZh5hX6F5fruAB8o5IcNON39tVAuOnRV2jAqFxJWtcz1JjrDP90VVu49pBVx-5hTR2RZ3823Eh9Pgd4kROsSXs_QE0KtFG2I_HX76r6Vk-JFq0iFtwlUPs7skRPRi7sSxOOGKPoS00Scc_GPHpq7SN05Bfc39RN1L4vDtYlrkkh8En8tpbjABtEt-l020DEVVj4m_DI49LbHMHUwJzLzuH2vOKVu4KNNX-pwj5mLYabhmoICDwKB_j3zYeO-fMKaXQVrcsFDs2DTVApUmSNvYd_LQ96Zuf6UuwN8gQCi7uhibcs2HdMPmjSdtoVj3ybUs1ZP_31rRoAp_K81&state=gpkszrfnshmvwgxt0va2”

const response = await fetch ( url , { method : “get” });
let result = await response . json ();
console . log ( "Resilt " , result );


Server side output:
“[“Error “,”{"error":{"code":"ETIMEDOUT","connect":true}}”]”
-or-
“[“WebMethod request timed-out after 14 seconds… Did you forget to resolve a promise?”]”


Client side:
“Resilt {“access_token”:“EAANHy9B9hMIBAB3fUcg19yYkAJWRqfBvqgHGOZAtRZC4duiHOajGcMkoZCwWZB8yFNOUUeqDtCcP4nE70Uy3UOrtKc2BQAWZC2cO80aoKH0qUw1d9PoTdRvdc9xzxZAMqOJbYtWPD6GsDn0HZAJegxZBy9KPoIooH8dXVigoxTrrAxIVd2KcbRZBW00AnbOW9Jw5YD6pHwF0yTwZDZD”,“token_type”:“bearer”,“expires_in”:5119595}”


curl output :
curl -X get “https://graph.facebook.com/v10.0/oauth/access_token?client_id=xxxxxx&client_secret=xxxxx&redirect_uri=https://my.domain/processfbsociallogin&code=AQBmEx3gpImkUEvgTGSCKGwIZMgwJoAsHxwK2wmdGgsbieeQTTQAu2jEEKWRFaIrixIQMLc1AzZzL1aq7AFxpMIFUtPCoSMCpFwhW3dDhjIt0RGRYBU2lNJ8yqai3rUJZgE7VgmKZ32L3MVtlx_OhIGJI6nTRBlwszYgGnelNA6NTV6uNL7F1JpVR_CqjjgWKZ8OJwPXHMVoUcZbOhlh7_K4qBp9mVckzr3XVQgNJj01Ytzr5l-rPGsNX7ILLqgd10MEDS7PyOB9EaVUAc-hjb1E8UElAV5XOscUbwvPvtKxMSpJ36Jc6bu2f_uGAjKxfc1kp9IIPg1it6R01FK6UiG1&state=gx61xmn8bdgs4rmd4o8kqd
{“access_token”:“EAANHy9B9hMIBABdcZCULQAYOTG1pheHVqPnZAiIXxiIVb6qHGnouYB21CPSZAkr9nmVlLcG67qj8kpJ0Ct2UVcwo3nNpL5mHzEoAZBiVQdlXkOzPvWCFZB6rYQbBE4iKDE4Vy6ajui3BKYqMoohvxGj0dAGQaKZCNZCI0xmKsc2T3Ri4KqaL995TW4IAeRFjRwbPSeThTTfgwZDZD”,“token_type”:“bearer”,“expires_in”:5120072}

@shantanukumar847 here is the response I received from Velo Product Support Specialist team
:rofl:


I ran a few quick tests on your site and could see that, indeed, the timeout error appeared a couple of times for me. However, it only happened in the Editor backend functions testing tool, and not on the live site. Kindly note that the functions testing tool is just a local testing tool, and may not reflect the proper functionality when it comes to interacting with browser settings and reaching out to other platforms.

Therefore, I would suggest you to call the function in the frontend, publish your site and try again.

Besides, using aync/await may be convenient for data management, however, it is not the most efficient method when it comes to errors handling. I would recommend using .then() and .catch() blocks instead of async/await, so that we are able to track the errors and their nature.


As a fix, I have moved this call out of Wix as a firebase cloud function.
So my call sequence is :-
Fetch call from wix backend
If successful, proceed
if failure call firebase cloud function & proceed

And oh, btw in my production code I am using .then() and .catch()

wix finally solved this problem for me. Here is their response:


While we were trying to arrange the call, our developers actively continued the investigation process. Eventually, they were able to recreate the issue on their end once, and identify the root cause of it.

They have immediately implemented the fix, and the functionality should work now. Please, let us know if you are still experiencing an issue on your end, since the errors seem to have been connected to the specific IP addresses.