#update: fixed bug pretent click when close window by user

- get info user on google method (new mechanism)
cuongdevjs · Jun 26, 2022 · f8eee2d · f8eee2d
1 parent a798586
commit f8eee2d
Show file tree

Hide file tree

Showing 11 changed files with 192 additions and 226 deletions.
diff --git a/example/src/User.tsx b/example/src/User.tsx
@@ -10,6 +10,7 @@ export const User = memo(({ provider, profile, onLogout }: Props) => {
   const avatar =
     profile?.avatar ||
     profile?.avatar_url ||
+    profile?.picture ||
     profile?.picture?.data?.url ||
     profile?.profile_image_url_https ||
     'https://maxcdn.icons8.com/Share/icon/p1em/users//gender_neutral_user1600.png'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactjs-social-login",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Group social login for ReactJS",
   "author": "Nguyen Manh Cuong ",
   "license": "MIT",

diff --git a/src/LoginSocialAmazon/index.tsx b/src/LoginSocialAmazon/index.tsx
@@ -55,7 +55,6 @@ export const LoginSocialAmazon = forwardRef(
   ) => {
     const [isLogged, setIsLogged] = useState(false)
     const [isSdkLoaded, setIsSdkLoaded] = useState(false)
-    const [isProcessing, setIsProcessing] = useState(false)
 
     useEffect(() => {
       !isSdkLoaded && load()
@@ -103,20 +102,19 @@ export const LoginSocialAmazon = forwardRef(
             onReject(err)
           })
           .finally(() => {
-            setIsProcessing(false)
             setIsLogged(true)
           })
       },
       [onReject, onResolve]
     )
 
-    const handleResponse = useCallback((res: objectType) => getUserInfo(res), [
-      getUserInfo
-    ])
+    const handleResponse = useCallback(
+      (res: objectType) => getUserInfo(res),
+      [getUserInfo]
+    )
 
     const handleError = useCallback(
       (err: objectType | string) => {
-        setIsProcessing(false)
         onReject(err)
       },
       [onReject]
@@ -134,10 +132,8 @@ export const LoginSocialAmazon = forwardRef(
     }, [checkIsExistsSDKScript, client_id, insertScriptGoogle])
 
     const onLogin = useCallback(() => {
-      if (isProcessing || !isSdkLoaded) return
-      setIsProcessing(true)
+      if (!isSdkLoaded) return
       if (!_window.amazon) {
-        setIsProcessing(false)
         load()
         onReject("Google SDK isn't loaded!")
       } else {
@@ -151,7 +147,6 @@ export const LoginSocialAmazon = forwardRef(
         )
       }
     }, [
-      isProcessing,
       isSdkLoaded,
       load,
       onReject,

diff --git a/src/LoginSocialFacebook/index.tsx b/src/LoginSocialFacebook/index.tsx
@@ -66,7 +66,6 @@ const LoginSocialFacebook = forwardRef(
   ) => {
     const [isLogged, setIsLogged] = useState(false)
     const [isSdkLoaded, setIsSdkLoaded] = useState(false)
-    const [isProcessing, setIsProcessing] = useState(false)
 
     useEffect(() => {
       !isSdkLoaded && load()
@@ -115,7 +114,7 @@ const LoginSocialFacebook = forwardRef(
           { locale: language, fields: fieldsProfile },
           (me: any) => {
             setIsLogged(true)
-            setIsProcessing(false)
+
             onResolve({
               provider: 'facebook',
               data: { ...authResponse, ...me }
@@ -170,10 +169,9 @@ const LoginSocialFacebook = forwardRef(
     ])
 
     const loginFB = useCallback(() => {
-      if (isProcessing || !isSdkLoaded) return
-      setIsProcessing(true)
+      if (!isSdkLoaded) return
+
       if (!_window.FB) {
-        setIsProcessing(false)
         load()
         onReject("Fb isn't loaded!")
       } else {
@@ -185,7 +183,6 @@ const LoginSocialFacebook = forwardRef(
         })
       }
     }, [
-      isProcessing,
       isSdkLoaded,
       load,
       onReject,

diff --git a/src/LoginSocialGithub/index.tsx b/src/LoginSocialGithub/index.tsx
@@ -52,7 +52,6 @@ export const LoginSocialGithub = forwardRef(
     ref: React.Ref<TypeCrossFunction>
   ) => {
     const [isLogged, setIsLogged] = useState(false)
-    const [isProcessing, setIsProcessing] = useState(false)
 
     useEffect(() => {
       const popupWindowURL = new URL(window.location.href)
@@ -76,11 +75,9 @@ export const LoginSocialGithub = forwardRef(
           .then((res) => res.json())
           .then((response: any) => {
             setIsLogged(true)
-            setIsProcessing(false)
             onResolve({ provider: 'github', data: { ...response, ...data } })
           })
           .catch((err) => {
-            setIsProcessing(false)
             onReject(err)
           })
       },
@@ -108,7 +105,6 @@ export const LoginSocialGithub = forwardRef(
         })
           .then((response) => response.text())
           .then((response) => {
-            setIsProcessing(false)
             const data: objectType = {}
             const searchParams: any = new URLSearchParams(response)
             for (const p of searchParams) {
@@ -118,7 +114,6 @@ export const LoginSocialGithub = forwardRef(
             else onReject('no data')
           })
           .catch((err) => {
-            setIsProcessing(false)
             onReject(err)
           })
       },
@@ -138,38 +133,34 @@ export const LoginSocialGithub = forwardRef(
       window.removeEventListener('storage', onChangeLocalStorage, false)
       const code = localStorage.getItem('github')
       if (code) {
-        setIsProcessing(true)
         handlePostMessage({ provider: 'github', type: 'code', code })
         localStorage.removeItem('instagram')
       }
     }, [handlePostMessage])
 
     const onLogin = useCallback(() => {
-      if (!isProcessing) {
-        onLoginStart && onLoginStart()
-        window.addEventListener('storage', onChangeLocalStorage, false)
-        const oauthUrl = `${GITHUB_URL}/login/oauth/authorize?client_id=${client_id}&scope=${scope}&state=${
-          state + '_github'
-        }&redirect_uri=${redirect_uri}&allow_signup=${allow_signup}`
-        const width = 450
-        const height = 730
-        const left = window.screen.width / 2 - width / 2
-        const top = window.screen.height / 2 - height / 2
-        window.open(
-          oauthUrl,
-          'Github',
-          'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' +
-            width +
-            ', height=' +
-            height +
-            ', top=' +
-            top +
-            ', left=' +
-            left
-        )
-      }
+      onLoginStart && onLoginStart()
+      window.addEventListener('storage', onChangeLocalStorage, false)
+      const oauthUrl = `${GITHUB_URL}/login/oauth/authorize?client_id=${client_id}&scope=${scope}&state=${
+        state + '_github'
+      }&redirect_uri=${redirect_uri}&allow_signup=${allow_signup}`
+      const width = 450
+      const height = 730
+      const left = window.screen.width / 2 - width / 2
+      const top = window.screen.height / 2 - height / 2
+      window.open(
+        oauthUrl,
+        'Github',
+        'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' +
+          width +
+          ', height=' +
+          height +
+          ', top=' +
+          top +
+          ', left=' +
+          left
+      )
     }, [
-      isProcessing,
       onLoginStart,
       onChangeLocalStorage,
       client_id,

diff --git a/src/LoginSocialGoogle/index.tsx b/src/LoginSocialGoogle/index.tsx
@@ -39,13 +39,14 @@ interface Props {
 // const JS_SRC = 'https://apis.google.com/js/api.js'
 const JS_SRC = 'https://accounts.google.com/gsi/client'
 const SCRIPT_ID = 'google-login'
+const PREVENT_CORS_URL: string = 'https://cors.bridged.cc'
 const _window = window as any
 
 const LoginSocialGoogle = forwardRef(
   (
     {
       client_id,
-      scope = 'email profile',
+      scope = 'https://www.googleapis.com/auth/userinfo.profile',
       prompt = 'select_account',
       ux_mode,
       className = '',
@@ -67,7 +68,6 @@ const LoginSocialGoogle = forwardRef(
   ) => {
     const [isLogged, setIsLogged] = useState(false)
     const [isSdkLoaded, setIsSdkLoaded] = useState(false)
-    const [isProcessing, setIsProcessing] = useState(false)
     const [instance, setInstance] = useState<any>(null!)
     const [token, setToken] = useState<string>('')
 
@@ -105,22 +105,42 @@ const LoginSocialGoogle = forwardRef(
     const handleResponse = useCallback(
       (res: objectType) => {
         setIsLogged(true)
-        setIsProcessing(false)
         setToken(res?.access_token)
-        // _window.google.accounts.id.initialize({
-        //   client_id,
-        //   auto_select: true,
-        //   callback: (value: any) =>
-        //     console.log('🚀 ~ file: index.tsx ~ line 113 ~ value', value)
-        // })
-        // _window.google.accounts.id.prompt()
-        const data: objectType = res
-        onResolve({
-          provider: 'google',
-          data
-        })
+
+        if (res?.access_token) {
+          const headers = new Headers({
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'x-cors-grida-api-key': '875c0462-6309-4ddf-9889-5227b1acc82c',
+            Authorization: 'Bearer ' + res.access_token
+          })
+
+          fetch(
+            `${PREVENT_CORS_URL}/https://www.googleapis.com/oauth2/v1/userinfo?alt=json`,
+            {
+              method: 'GET',
+              headers
+            }
+          )
+            .then((response) => response.json())
+            .then((response) => {
+              const data: objectType = { ...res, ...response }
+              onResolve({
+                provider: 'google',
+                data
+              })
+            })
+            .catch((err) => {
+              onReject(err)
+            })
+        } else {
+          const data: objectType = res
+          onResolve({
+            provider: 'google',
+            data
+          })
+        }
       },
-      [onResolve]
+      [onReject, onResolve]
     )
 
     const load = useCallback(() => {
@@ -168,17 +188,15 @@ const LoginSocialGoogle = forwardRef(
     ])
 
     const loginGoogle = useCallback(() => {
-      if (isProcessing || !isSdkLoaded) return
-      setIsProcessing(true)
+      if (!isSdkLoaded) return
       if (!_window.google) {
-        setIsProcessing(false)
         load()
         onReject("Google SDK isn't loaded!")
       } else {
         onLoginStart && onLoginStart()
         if (instance) instance.requestAccessToken()
       }
-    }, [instance, isProcessing, isSdkLoaded, load, onLoginStart, onReject])
+    }, [instance, isSdkLoaded, load, onLoginStart, onReject])
 
     useImperativeHandle(ref, () => ({
       onLogout: () => {

diff --git a/src/LoginSocialInstagram/index.tsx b/src/LoginSocialInstagram/index.tsx
@@ -52,7 +52,6 @@ export const LoginSocialInstagram = forwardRef(
     ref: React.Ref<TypeCrossFunction>
   ) => {
     const [isLogged, setIsLogged] = useState(false)
-    const [isProcessing, setIsProcessing] = useState(false)
 
     useEffect(() => {
       const popupWindowURL = new URL(window.location.href)
@@ -78,11 +77,9 @@ export const LoginSocialInstagram = forwardRef(
           .then((res) => res.json())
           .then((res) => {
             setIsLogged(true)
-            setIsProcessing(false)
             onResolve({ provider: 'instagram', data: { ...res, ...data } })
           })
           .catch((err) => {
-            setIsProcessing(false)
             onReject(err)
           })
       },
@@ -115,9 +112,7 @@ export const LoginSocialInstagram = forwardRef(
           .catch((err) => {
             onReject(err)
           })
-          .finally(() => {
-            setIsProcessing(false)
-          })
+          .finally(() => {})
       },
       [client_id, client_secret, getProfile, onReject, redirect_uri]
     )
@@ -135,38 +130,34 @@ export const LoginSocialInstagram = forwardRef(
       window.removeEventListener('storage', onChangeLocalStorage, false)
       const code = localStorage.getItem('instagram')
       if (code) {
-        setIsProcessing(true)
         handlePostMessage({ provider: 'instagram', type: 'code', code })
         localStorage.removeItem('instagram')
       }
     }, [handlePostMessage])
 
     const onLogin = useCallback(() => {
-      if (!isProcessing) {
-        onLoginStart && onLoginStart()
-        window.addEventListener('storage', onChangeLocalStorage, false)
-        const oauthUrl = `${INSTAGRAM_URL}/oauth/authorize?response_type=${response_type}&client_id=${client_id}&scope=${scope}&state=${
-          state + '_instagram'
-        }&redirect_uri=${redirect_uri}`
-        const width = 450
-        const height = 730
-        const left = window.screen.width / 2 - width / 2
-        const top = window.screen.height / 2 - height / 2
-        window.open(
-          oauthUrl,
-          'Instagram',
-          'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' +
-            width +
-            ', height=' +
-            height +
-            ', top=' +
-            top +
-            ', left=' +
-            left
-        )
-      }
+      onLoginStart && onLoginStart()
+      window.addEventListener('storage', onChangeLocalStorage, false)
+      const oauthUrl = `${INSTAGRAM_URL}/oauth/authorize?response_type=${response_type}&client_id=${client_id}&scope=${scope}&state=${
+        state + '_instagram'
+      }&redirect_uri=${redirect_uri}`
+      const width = 450
+      const height = 730
+      const left = window.screen.width / 2 - width / 2
+      const top = window.screen.height / 2 - height / 2
+      window.open(
+        oauthUrl,
+        'Instagram',
+        'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' +
+          width +
+          ', height=' +
+          height +
+          ', top=' +
+          top +
+          ', left=' +
+          left
+      )
     }, [
-      isProcessing,
       onLoginStart,
       onChangeLocalStorage,
       response_type,