login with gmail with keyclock

app/login/page.tsx

@@ -4,6 +4,14 @@ import React, { useState, useEffect } from "react";
 import { useGoogleLogin } from "@react-oauth/google";
 import { useTheme } from 'next-themes';
 import { Sun, Moon } from 'lucide-react'; // Optional: install lucide-react for clean icons
+import Keycloak from "keycloak-js";
+
+
+const keycloak = new Keycloak({
+  url: "https://keycloak.petermaquiran.xyz",
+  realm: "tvone", // ✅ IMPORTANT
+  clientId: "tvone-web", // must match Keycloak client
+});
 
 interface GoogleAuthResponse {
   access_token: string;
@@ -34,6 +42,16 @@ export default function AppleStyleAuth() {
 
   // Avoid hydration mismatch by waiting for mount
   useEffect(() => {
+    keycloak.init({
+      onLoad: "check-sso", // or "login-required"
+      pkceMethod: "S256",
+    }).then((authenticated) => {
+      if (authenticated) {
+        localStorage.setItem("token", keycloak.token!);
+        console.log("Logged in", keycloak.token);
+        localStorage.setItem("token", keycloak.token as string);
+      }
+    });
     setMounted(true);
   }, []);
 
@@ -173,7 +191,7 @@ export default function AppleStyleAuth() {
 
         {/* 4. BOTÃO GOOGLE */}
         <button
-          onClick={() => googleLogin()}
+          onClick={() => keycloak.login()}
           className="group flex w-full items-center justify-center gap-3 rounded-2xl border border-neutral-200 bg-white px-6 py-3.5 transition-all hover:bg-neutral-50 active:scale-[0.98] dark:border-neutral-800 dark:bg-transparent dark:hover:bg-neutral-900"
         >
           <svg className="h-5 w-5" viewBox="0 0 24 24">