chore(js): Updated federatedSignIn docs for new Google client (#5136)

* chore(js): Updated federatedSignIn docs for new Google client

* CR: formatting and null checks

* appsec recommendation 1

* PR suggestion 2

Author: haverchuck

src/fragments/lib/auth/js/advanced.mdx

@@ -169,74 +169,63 @@ const App = () => {
 
 ### Google sign-in (React)
 
-```js
+
+```jsx
 import React, { useEffect } from 'react';
+import jwt from 'jwt-decode';
 import { Auth } from 'aws-amplify';
-// To federated sign in from Google
-const SignInWithGoogle = () => {
-
-    useEffect(() => {
-        const ga = window.gapi && window.gapi.auth2 ? 
-            window.gapi.auth2.getAuthInstance() : 
-            null;
-
-        if (!ga) createScript();
-    }, [])
-
-    const signIn = () => {
-        const ga = window.gapi.auth2.getAuthInstance();
-        ga.signIn().then(
-            googleUser => {
-                getAWSCredentials(googleUser);
-            },
-            error => {
-                console.log(error);
-            }
-        );
-    }
-
-    const getAWSCredentials = async (googleUser) => {
-        const { id_token, expires_at } = googleUser.getAuthResponse();
-        const profile = googleUser.getBasicProfile();
-        let user = {
-            email: profile.getEmail(),
-            name: profile.getName()
-        };
-        
-        const credentials = await Auth.federatedSignIn(
-            'google',
-            { token: id_token, expires_at },
-            user
-        );
-        console.log('credentials', credentials);
-    }
 
-    const createScript = () => {
-        // load the Google SDK
-        const script = document.createElement('script');
-        script.src = 'https://apis.google.com/js/platform.js';
-        script.async = true;
-        script.onload = initGapi;
-        document.body.appendChild(script);
-    }
+const SignInWithGoogle = () => {
+  useEffect(() => {
+  // Check for an existing Google client initialization
+    if (!window.google && !window.google?.accounts) createScript();
+  }, []);
+
+  // Load the Google client
+  const createScript = () => {
+    const script = document.createElement('script');
+    script.src = 'https://accounts.google.com/gsi/client';
+    script.async = true;
+    script.defer = true;
+    script.onload = initGsi;
+    document.body.appendChild(script);
+  }
 
-    const initGapi = () => {
-        // init the Google SDK client
-        const g = window.gapi;
-        g.load('auth2', function() {
-            g.auth2.init({
-                client_id: 'your_google_client_id',
-                // authorized scopes
-                scope: 'profile email openid'
-            });
-        });
+  // Initialize Google client and render Google button
+  const initGsi = () => {
+    if (window.google && window.google?.accounts) {
+      window.google.accounts.id.initialize({
+        client_id: process.env.GOOGLE_CLIENT_ID,
+        callback: (response: any) => {
+          getAWSCredentials(response.credential)
+        },
+      });
+      window.google.accounts.id.renderButton(
+        document.getElementById("googleSignInButton"),
+        { theme: "outline", size: "large" }
+      );
     }
+  }
 
-    return (
-        <div>
-            <button onClick={signIn}>Sign in with Google</button>
-        </div>
+  // Exchange Google token for temporary AWS credentials
+  const getAWSCredentials = async (credential: string) => {
+    const token = jwt(credential) as any;
+    const user = {
+      email: token.email,
+      name: token.name
+    };      
+    await Auth.federatedSignIn(
+      'google',
+      { token: credential, expires_at: token.exp },
+      user
     );
+  }
+
+  return (
+    <div>
+      <button id="googleSignInButton"/>
+    </div>
+  );
 }
 ```