Full size picture from Facebook Graph API with Firebase Authentication

350 views Asked by At

I am creating a Web app using ReactJS and Firebase. I am using Firebase Authentication for login

I have implemented FB Auth using Firebase Auth Successfully. Now what i want to accomplish is to get a larger size profile image rather than the default one. I have tried different techniques but unable to get the desired result. The Graph API i want to hit

  1. Firebase Auth Function

const signUpWithFb = async ()=>{
    console.log("\n Auth Provider Function Start \n");
    const provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('email');
    await firebase.auth().signInWithPopup(provider).then(async (result)=> {
        console.log("\n Auth Provider before Fetch Function \n");
        await fetch(`https://graph.facebook.com/v11.0/me?fields=name,picture.width(960)
        .height(960),first_name,last_name,email&access_token=${result.credential.accessToken}`)
        .then((res)=>{
            console.log(res);
            console.log("Response Status:  "+res.status);
            console.log("Response Type:  "+res.type);
            console.log("Response Status Text:  "+res.statusText);
            console.log("Response Body:  ");
            console.log(res.body);
            console.log("Response URL:  "+res.url);
            console.log(res.picture); // give me undefined
            console.log("\n Auth Provider Function End After Fetch Function \n");
        })
    })
}

  1. Response i am getting

The Problem i am facing is that when i try to hit the Graph API using JavaScript Fetch Method Or react-axios. It gives me `Response Status: 200 Response Type: cors Response Body:
body: ReadableStream locked: false

-> On Clicking the url form res.url.


Please Check the attached Images for Referencing

  1. Response
  2. res.url

Thanks

0

There are 0 answers