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">

package.json

@@ -12,6 +12,7 @@
     "@react-oauth/google": "^0.13.5",
     "@tinymce/tinymce-react": "^6.3.0",
     "framer-motion": "^12.38.0",
+    "keycloak-js": "^26.2.3",
     "lucide-react": "^1.8.0",
     "next": "16.2.1",
     "next-themes": "^0.4.6",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       framer-motion:
         specifier: ^12.38.0
         version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      keycloak-js:
+        specifier: ^26.2.3
+        version: 26.2.3
       lucide-react:
         specifier: ^1.8.0
         version: 1.8.0(react@19.2.4)
@@ -1448,6 +1451,9 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  keycloak-js@26.2.3:
+    resolution: {integrity: sha512-widjzw/9T6bHRgEp6H/Se3NCCarU7u5CwFKBcwtu7xfA1IfdZb+7Q7/KGusAnBo34Vtls8Oz9vzSqkQvQ7+b4Q==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -3514,6 +3520,8 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  keycloak-js@26.2.3: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1