I'm currently working on a React application that integrates Facebook login using the Facebook SDK. However, I'm encountering an error when trying to initialize the SDK. The error message I receive is:
init not called with valid version
SDK Version: I’m using version v20.0 for the SDK.
Here's how I'm initializing the Facebook SDK in my FacebookLogin component:
// src/FacebookLogin.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const FacebookLogin = () => {
const [user, setUser] = useState(null);
const [pages, setPages] = useState([]);
const [selectedPage, setSelectedPage] = useState('');
useEffect(() => {
// Load the Facebook SDK asynchronously
window.fbAsyncInit = function () {
window.FB.init({
appId: 1201806491140204, // Your app ID from Facebook
cookie: true,
xfbml: true,
version: 'v20.0'
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')
);
}, []);
const handleFBLogin = () => {
window.FB.login(response => {
if (response.authResponse) {
fetchUserData(response.authResponse.accessToken);
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, { scope: 'email,public_profile,pages_show_list' });
};
const fetchUserData = async (accessToken) => {
try {
const res = await axios.post('http://localhost:5000/api/auth/facebook', { accessToken });
setUser(res.data);
} catch (error) {
console.error('Error fetching user data:', error);
}
};
return (
<div>
<h1>Facebook Login</h1>
{user ? (
<div>
<h2>Welcome, {user.name}!</h2>
<img src={user.picture} alt={user.name} />
</div>
) : (
<button onClick={handleFBLogin}>Login with Facebook</button>
)}
</div>
);
};
export default FacebookLogin;
I tried to search on web and documentation i didnt fing the answer, can anyone help me out??