0

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??

1
  • I'd start by adding a console.log to window.fbAsyncInit, to see if that actually fires. (If it doesn't, then the SDK might try to initialize itself when you call the login method, but then it won't have the necessary parameters.)
    – C3roe
    Commented Sep 5 at 5:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.