fix: error when fetching with profile

src/components/facebook-login-button.tsx

@@ -1,20 +1,15 @@
 import { forwardRef, useCallback } from "react";
 import { FacebookLoginProps } from "../types/react-facebook-login";
+import { getUserProfile } from "../utils";
 
 const FacebookLoginButton = forwardRef<HTMLButtonElement, FacebookLoginProps>(
   ({ onSuccess, onError, ...props }, ref) => {
     const handleLogin = useCallback(() => {
-      FB.login((response) => {
+      FB.login(async (response) => {
         if (response.authResponse) {
           if (props.fetchUserProfile) {
-            FB.api(
-              "/me",
-              { fields: ["name", "email", "profile" as any] },
-              (userRes) => {
-                onSuccess(userRes as any);
-                return;
-              }
-            );
+            onSuccess((await getUserProfile()) as any);
+            return;
           }
           onSuccess(response as any);
         }
@@ -25,7 +20,7 @@ const FacebookLoginButton = forwardRef<HTMLButtonElement, FacebookLoginProps>(
     }, [onError, onSuccess, props.fetchUserProfile]);
 
     return props.component ? (
-      <props.component onClick={handleLogin} {...props} />
+      <props.component {...props} onClick={handleLogin} />
     ) : (
       <button
         ref={ref}

src/hook/use-facebook-login.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { UseFacebookLoginOptions } from "../types/react-facebook-login";
+import { getUserProfile } from "../utils";
 
 export const useFacebookLogin = ({
   onSuccess,
@@ -8,17 +9,14 @@ export const useFacebookLogin = ({
 }: UseFacebookLoginOptions) => {
   const cb = useCallback(
     (opt?: fb.LoginOptions) => {
-      FB.login((response) => {
+      FB.login(async (response) => {
         if (response.authResponse) {
           if (rest.fetchUserProfile) {
-            // For params: check https://developers.facebook.com/docs/graph-api/reference/user
-            FB.api(
-              "/me",
-              { fields: ["name", "email", "profile" as any] },
-              (response) => {
-                onSuccess(response as any);
-              }
-            );
+            if (rest.fetchUserProfile) {
+              onSuccess((await getUserProfile()) as any);
+              return;
+            }
+            onSuccess(response as any);
             return;
           }
           onSuccess(response as any);

src/types/react-facebook-login.ts

@@ -1,11 +1,13 @@
 export interface FacebookLoginWithUserProfile {
   fetchUserProfile?: true;
+  scopes?: fb.UserField[];
   onSuccess: (response: fb.UserResponse) => void;
   onError?: (response: fb.StatusResponse) => void;
 }
 
 export interface FacebookLoginWithoutUserProfile {
   fetchUserProfile?: false;
+  scopes?: fb.UserField[];
   onSuccess: (response: fb.StatusResponse) => void;
   onError?: (response: fb.StatusResponse) => void;
 }

src/utils/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Retrieves the user profile from Facebook API.
+ * @returns A promise that resolves to a UserResponse object containing the user's name, email, and picture.
+ * @see {@link https://developers.facebook.com/docs/graph-api/reference/user}
+ */
+export const getUserProfile = () => {
+  return new Promise<fb.UserResponse>((resolve) => {
+    FB.api<fb.UserField>(
+      "/me",
+      { fields: ["name", "email", "picture" as any] },
+      (response) => {
+        resolve(response);
+      }
+    );
+  });
+};