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

@@ -197,7 +197,7 @@ export default function AppleStyleAuth() {
 
         {/* 4. BOTÃO GOOGLE */}
         <button
-          onClick={() => keycloak.login()}
+          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">