chore: get token from google, add the thalos connector and get and persist the thalos token id for future use in other endpoints

src/private/LoginPage.jsx

@@ -1,46 +1,56 @@
+import React, { useState } from 'react';
 import { GoogleLogin } from '@react-oauth/google';
 import { jwtDecode } from 'jwt-decode';
+import ThalosTokenConnector from '../auth/ThalosTokenConnector';
 import { useAuth } from '../context/AuthContext';
+import { Box, Paper, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
-import { Box, Typography } from '@mui/material';
 
 export default function LoginPage() {
+    const [googleIdToken, setGoogleIdToken] = useState(null);
+    const [googleProfile, setGoogleProfile] = useState(null);
     const { login } = useAuth();
     const navigate = useNavigate();
 
-    const handleSuccess = (credentialResponse) => {
-        try {
-            const token = credentialResponse.credential;
-            const decoded = jwtDecode(token);
-            console.log('Google user decoded:', decoded);
-
-            // save user in context
-            login({
-                name: decoded.name,
-                email: decoded.email,
-                picture: decoded.picture,
-                token,
-            });
-            console.log('User logged in and saved to context token:', token);
-        } catch (err) {
-            console.error('Token decode failed:', err);
-        }
-    };
-
-    const handleError = () => {
-        console.error('Google login failed');
-    };
-
     return (
-        <Box display="flex" flexDirection="column" alignItems="center" mt={10}>
-            <Typography variant="h4" gutterBottom>
-                Sign in with Google
-            </Typography>
+        <Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
+            <Paper sx={{ p: 4, borderRadius: 2, boxShadow: 3, textAlign: 'center' }}>
+                <Typography variant="h5" mb={2}>Login with Google</Typography>
 
-            <GoogleLogin
-                onSuccess={handleSuccess}
-                onError={handleError}
-            />
+                <GoogleLogin
+                    onSuccess={(cred) => {
+                        const idToken = cred?.credential;
+                        if (!idToken) return;
+
+                        const decoded = jwtDecode(idToken);
+                        setGoogleIdToken(idToken);
+                        setGoogleProfile({
+                            name: decoded?.name || '',
+                            email: decoded?.email || '',
+                            picture: decoded?.picture || '',
+                        });
+                    }}
+                    onError={() => console.error('Google login failed')}
+                />
+
+                {googleIdToken && (
+                    <ThalosTokenConnector
+                        googleIdToken={googleIdToken}
+                        onSuccess={(payload) => {
+                            login({
+                                ...googleProfile,
+                                idToken: googleIdToken,
+                                thalosToken: payload?.token || '',
+                            });
+                            navigate('/');
+                        }}
+                        onError={(err) => {
+                            console.error('Thalos exchange failed:', err);
+                            localStorage.removeItem('thalosToken');
+                        }}
+                    />
+                )}
+            </Paper>
         </Box>
     );
 }