get token inside the app

app/create-news/page.tsx

@@ -1,15 +1,47 @@
 "use client";
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
 import { 
   LayoutDashboard, Newspaper, Users, BarChart3, 
   Settings, HelpCircle, Image as ImageIcon, 
   Type, Calendar, Clock, Tag, User, Save, Eye, Send
 } from 'lucide-react';
+import Keycloak from "keycloak-js";
 
 // Importe o componente que criámos (ajuste o caminho se necessário)
 import MultiAspectEditor from '../components/MultiAspectEditor'; 
-import { Editor } from '@tinymce/tinymce-react';
+import dynamic from "next/dynamic";
+const Editor = dynamic(
+  () => import("@tinymce/tinymce-react").then((mod) => mod.Editor),
+  { ssr: false }
+);
+
+const keycloak = new Keycloak({
+  url: "https://keycloak.petermaquiran.xyz",
+  realm: "tvone", // ✅ IMPORTANT
+  clientId: "tvone-web", // must match Keycloak client
+});
+
+interface GoogleAuthResponse {
+  access_token: string;
+  token_type: string;
+  expires_in: number;
+  scope: string;
+  authuser?: string;
+  prompt?: string;
+}
+
+interface KeycloakTokenResponse {
+  access_token: string;
+  expires_in: number;
+  refresh_expires_in: number;
+  refresh_token: string;
+  token_type: string;
+  id_token?: string;
+  "not-before-policy": number;
+  session_state: string;
+  scope: string;
+}
 
 const CreateNewsPage = () => {
 
@@ -76,6 +108,26 @@ const CreateNewsPage = () => {
     fileInputRef.current?.click();
   };
 
+    // 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);
+  
+          fetch("http://localhost:3001/profile/", {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          });
+        }
+      });
+    }, []);
+
   return (
     <div className="flex h-screen bg-slate-100/50 text-slate-900 font-sans">
       

app/login/page.tsx

@@ -4,6 +4,35 @@ 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;
+  token_type: string;
+  expires_in: number;
+  scope: string;
+  authuser?: string;
+  prompt?: string;
+}
+
+interface KeycloakTokenResponse {
+  access_token: string;
+  expires_in: number;
+  refresh_expires_in: number;
+  refresh_token: string;
+  token_type: string;
+  id_token?: string;
+  "not-before-policy": number;
+  session_state: string;
+  scope: string;
+}
 
 export default function AppleStyleAuth() {
   const [email, setEmail] = useState("");
@@ -13,14 +42,98 @@ 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);
+
+        fetch("http://localhost:3001/profile/", {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        });
+      }
+    });
     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 (
@@ -84,7 +197,7 @@ export default function AppleStyleAuth() {
 
         {/* 4. BOTÃO GOOGLE */}
         <button
-          onClick={() => googleLogin()}
+          onClick={() => keycloak.login({ redirectUri: "http://localhost:3000/create-news" })}
           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