add google

app/login/page.tsx

@@ -37,11 +37,79 @@ export default function AppleStyleAuth() {
     setMounted(true);
   }, []);
 
+  const handleExchange = async (googleResponse: GoogleAuthResponse): Promise<void> => {
+    try {
+      const details: Record<string, string> = {
+        grant_type: 'urn:ietf:params:oauth:grant-type:token-exchange',
+        client_id: 'tvone-web', // Replace with your actual Keycloak Client ID
+        subject_token: googleResponse.access_token,
+        subject_token_type: 'urn:ietf:params:oauth:token-type:access_token',
+        subject_issuer: 'google', // Ensure this matches your Keycloak IdP Alias
+      };
+
+      const formBody = new URLSearchParams(details).toString();
+
+      const response = await fetch(
+        'https://keycloak.petermaquiran.xyz/realms/tvone/protocol/openid-connect/token', 
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          body: formBody,
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`Keycloak exchange failed: ${response.statusText}`);
+      }
+
+      const data: KeycloakTokenResponse = await response.json();
+
+      // Store the Keycloak token to send to your NestJS API
+      localStorage.setItem("token", data.access_token);
+      console.log("Authenticated with Keycloak:", data.access_token);
+      
+      // Redirect user or update Global Auth State here
+    } catch (error) {
+      console.error("Authentication Flow Error:", error);
+    }
+  };
+  
   const googleLogin = useGoogleLogin({
-    onSuccess: (res) => console.log("Google Success", res),
+    onSuccess: (res) =>  {
+      handleExchange(res)
+      console.log("Google Success", res) 
+    },
     onError: () => console.log("Google Failed"),
   });
 
+  const handleManualLogin = async (): Promise<void> => {
+    const details: Record<string, string> = {
+      grant_type: 'password',
+      client_id: 'tvone-web-client',
+      username: email,
+      password: password,
+      scope: 'openid',
+    };
+
+    try {
+      const response = await fetch(
+        'https://keycloak.petermaquiran.xyz/realms/<realm>/protocol/openid-connect/token', 
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          body: new URLSearchParams(details).toString(),
+        }
+      );
+
+      const data: KeycloakTokenResponse = await response.json();
+      if (data.access_token) {
+        localStorage.setItem("token", data.access_token);
+      }
+    } catch (err) {
+      console.error("Login failed", err);
+    }
+  };
+
   if (!mounted) return null;
 
   return (