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
- 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");
})
})
}
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
- Response
- res.url
Thanks