Connect auth to backend and persist theme preference

webui/src/app/components/ClientLayoutEffect.js

@@ -0,0 +1,21 @@
+'use client';
+
+import { useEffect } from 'react';
+import axios from 'axios';
+
+export default function ClientLayoutEffect() {
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                const res = await axios.get('/token');
+                console.log('Token response:', res.data);
+            } catch (error) {
+                console.error('Token fetch error:', error);
+            }
+        }
+
+        fetchData().then(r => console.log("Ok"));
+    }, []);
+
+    return null;
+}

webui/src/app/components/ImprinkAppBar.js

@@ -0,0 +1,66 @@
+'use client'
+
+import {AppBar, Button, Toolbar, Typography, Avatar, Box} from "@mui/material";
+import { useUser } from "@auth0/nextjs-auth0";
+import ThemeToggleButton from "@/app/components/theme/ThemeToggleButton";
+
+export default function ImprinkAppBar() {
+    const { user, error, isLoading } = useUser();
+
+    return (
+        <AppBar position="static">
+            <Toolbar>
+                <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                    Modern App
+                </Typography>
+                <ThemeToggleButton />
+
+                {isLoading ? (
+                    <Box sx={{ ml: 2 }}>
+                        <Typography variant="body2">Loading...</Typography>
+                    </Box>
+                ) : user ? (
+                    <Box sx={{ display: 'flex', alignItems: 'center', ml: 2 }}>
+                        <Avatar
+                            src={user.picture}
+                            alt={user.name}
+                            sx={{ width: 32, height: 32, mr: 1 }}
+                        />
+                        <Typography variant="body2" sx={{ mr: 2, color: 'inherit' }}>
+                            {user.name}
+                        </Typography>
+                        <Button
+                            color="inherit"
+                            href="/auth/logout"
+                        >
+                            Logout
+                        </Button>
+                    </Box>
+                ) : (
+                    <Box sx={{ ml: 2 }}>
+                        <Button
+                            color="inherit"
+                            href="/auth/login"
+                            sx={{ mr: 1 }}
+                        >
+                            Login
+                        </Button>
+                        <Button
+                            variant="contained"
+                            href="/auth/login"
+                            sx={{
+                                bgcolor: 'primary.main',
+                                color: 'primary.contrastText',
+                                '&:hover': {
+                                    bgcolor: 'primary.dark'
+                                }
+                            }}
+                        >
+                            Sign Up
+                        </Button>
+                    </Box>
+                )}
+            </Toolbar>
+        </AppBar>
+    )
+}

webui/src/app/components/theme/ThemeContext.js

@@ -1,16 +1,58 @@
 'use client';
 
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
 
 const ThemeContext = createContext({ isDarkMode: true });
 
+function getInitialTheme() {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    const savedTheme = localStorage.getItem('theme-preference');
+    if (savedTheme) {
+        return savedTheme === 'dark';
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 export function ThemeContextProvider({ children }) {
     const [isDarkMode, setIsDarkMode] = useState(true);
+    const [isInitialized, setIsInitialized] = useState(false);
+
+    useEffect(() => {
+        const initialTheme = getInitialTheme();
+        if (initialTheme !== null) {
+            setIsDarkMode(initialTheme);
+        }
+        setIsInitialized(true);
+    }, []);
 
     const toggleTheme = () => {
-        setIsDarkMode(!isDarkMode);
+        const newTheme = !isDarkMode;
+        setIsDarkMode(newTheme);
+
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('theme-preference', newTheme ? 'dark' : 'light');
+        }
     };
 
+    if (!isInitialized) {
+        return (
+            <div style={{
+                visibility: 'hidden',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%'
+            }}>
+                {children}
+            </div>
+        );
+    }
+
     return (
         <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
             {children}

webui/src/app/components/theme/ThemeToggleButton.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { IconButton } from '@mui/material';
-import { useTheme } from './theme/ThemeContext';
+import { useTheme } from './ThemeContext';
 
 export default function ThemeToggleButton() {
     const { isDarkMode, toggleTheme } = useTheme();

webui/src/app/layout.js

@@ -2,6 +2,8 @@ import { Inter } from 'next/font/google';
 import MuiThemeProvider from './components/theme/MuiThemeProvider';
 import { ThemeContextProvider } from './components/theme/ThemeContext';
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
+import ImprinkAppBar from "@/app/components/ImprinkAppBar";
+import ClientLayoutEffect from "@/app/components/ClientLayoutEffect";
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -17,6 +19,8 @@ export default function RootLayout({children}) {
                 <AppRouterCacheProvider>
                     <ThemeContextProvider>
                         <MuiThemeProvider>
+                            <ClientLayoutEffect/>
+                            <ImprinkAppBar />
                             {children}
                         </MuiThemeProvider>
                     </ThemeContextProvider>

webui/src/app/page.js

@@ -9,25 +9,12 @@ import {
     CardContent,
     TextField,
     Chip,
-    AppBar,
-    Toolbar,
     Grid,
 } from '@mui/material';
-import ThemeToggleButton from './components/ThemeToggleButton';
 
 export default function HomePage() {
-    return (
-        <>
-            <AppBar position="static">
-                <Toolbar>
-                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-                        Modern App
-                    </Typography>
-                    <ThemeToggleButton />
-                    <Button color="inherit" sx={{ ml: 2 }}>Login</Button>
-                </Toolbar>
-            </AppBar>
 
+    return (
             <Container maxWidth="lg" sx={{ py: 4 }}>
                 <Box sx={{ mb: 6, textAlign: 'center' }}>
                     <Typography variant="h1" gutterBottom>
@@ -100,6 +87,5 @@ export default function HomePage() {
                     </Grid>
                 </Grid>
             </Container>
-        </>
     );
 }

webui/src/app/token/route.js

@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server';
 import {auth0} from "@/lib/auth0";
-import api from "@/lib/api";
+import serverApi from "@/lib/serverApi";
 
 export async function GET() {
     try {
@@ -8,13 +8,13 @@ export async function GET() {
 
         if (!token) { return NextResponse.json({ error: 'No access token found' }, { status: 401 }); }
 
-        await api.post('/users/sync', {}, {
-            headers: { Cookie: `access_token=${token}` }
+        await serverApi.post('/users/me/sync', null, {
+            headers: { Authorization: `Bearer ${token}`}
         });
 
-        return NextResponse.json({ access_token: token });
+        return NextResponse.json("Ok");
     } catch (error) {
-        console.error('Error in /api/token:', error);
+        console.error('Error in /serverApi/token:', error);
         return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
     }
 }

webui/src/lib/api.js

@@ -1,22 +0,0 @@
-import axios from "axios";
-
-const api = axios.create({
-    baseURL: process.env.NEXT_PUBLIC_API_URL,
-    withCredentials: true,
-});
-
-api.interceptors.request.use((config) => {
-    if (typeof window !== 'undefined') {
-        const token = localStorage.getItem('access_token');
-        if (token) {
-            config.headers.Authorization = `Bearer ${token}`;
-        } else {
-            console.log("Token not found in localStorage, please auth!");
-        }
-    }
-    return config;
-}, (error) => {
-    return Promise.reject(error);
-});
-
-export default api;

webui/src/lib/clientApi.js

@@ -0,0 +1,31 @@
+import axios from "axios";
+
+const clientApi = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_URL,
+    withCredentials: true,
+});
+
+clientApi.interceptors.request.use(async (config) => {
+    if (typeof window === 'undefined') return config;
+
+    try {
+        const res = await fetch('/auth/access-token');
+        if (!res.ok)
+            throw new Error('Failed to fetch token');
+        const data = await res.json();
+
+        if (data.token) {
+            config.headers.Authorization = `Bearer ${data.token}`;
+        } else {
+            console.warn('No token received from /auth/access-token');
+        }
+    } catch (err) {
+        console.error('Error fetching token:', err);
+    }
+
+    return config;
+}, error => {
+    return Promise.reject(error);
+});
+
+export default clientApi;

webui/src/lib/serverApi.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const serverApi = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_URL,
+    withCredentials: true,
+});
+
+export default serverApi;