From 4e7794476b7f35edca20e464913479dda7683a4b Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Fri, 17 Apr 2026 10:48:36 +0100
Subject: [PATCH] login with gmail with keyclock

---
 app/login/page.tsx | 20 +++++++++++++++++++-
 package.json       |  1 +
 pnpm-lock.yaml     |  8 ++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/app/login/page.tsx b/app/login/page.tsx
index 1a710f4..9aae938 100644
--- a/app/login/page.tsx
+++ b/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">
diff --git a/package.json b/package.json
index 79d6c20..075d6d2 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b1c2d00..6a9c447 100644
--- a/pnpm-lock.yaml
+++ b/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