Google innlogging

client/.env.example

@@ -1,2 +1,5 @@
 # Adressen til Graphql backend. Kopier dette til .env.local
-VITE_GRAPHQL_URL=/project2/graphql
+VITE_GRAPHQL_URL=/project2/graphql
+# Client ID fra Google Cloud 
+# jeg trenger en google bruker fra dere hvis dere ønsker å teste google innlogging
+VITE_GOOGLE_CLIENT_ID=1070343515871-rvhhskd48nla3u2p3bsp7b1sl2st385m.apps.googleusercontent.com

client/package.json

@@ -13,6 +13,7 @@
     "@apollo/client": "^4.3.1",
     "@mui/icons-material": "^9.4.0",
     "@radix-ui/react-dialog": "^1.1.23",
+    "@react-oauth/google": "^0.13.5",
     "@tailwindcss/vite": "^4.3.3",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",

client/src/main.tsx

@@ -2,18 +2,25 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router';
 import { ApolloProvider } from '@apollo/client/react';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 import './index.css';
 import client from './lib/apolloClient.ts';
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    {/* Gir tilgang til Apollo klienten */}
-    <ApolloProvider client={client}>
-      {/* gjør at basename matcher base i vite config */}
-      <BrowserRouter basename={import.meta.env.BASE_URL}>
-        <App />
-      </BrowserRouter>
-    </ApolloProvider>
+    {/* gir tilgang til google innlogging */}
+    <GoogleOAuthProvider
+      clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}
+      locale="no"
+    >
+      {/* Gir tilgang til Apollo klienten */}
+      <ApolloProvider client={client}>
+        {/* gjør at basename matcher base i vite config */}
+        <BrowserRouter basename={import.meta.env.BASE_URL}>
+          <App />
+        </BrowserRouter>
+      </ApolloProvider>
+    </GoogleOAuthProvider>
   </StrictMode>,
 );

client/src/routes/LoginPage.tsx

@@ -1,10 +1,36 @@
 import { useNavigate } from 'react-router';
 import { Button } from '../components/ui/Button';
+import { GoogleLogin, type CredentialResponse } from '@react-oauth/google';
+import { useEffect, useRef, useState } from 'react';
 
 // Innloggingsside
 export default function LoginPage() {
   const navigate = useNavigate();
 
+  //Midlertidig. token skal sendes til backend senere
+  function handleGoogleSuccess(response: CredentialResponse) {
+    console.log('Google-token:', response.credential);
+  }
+
+  // for å måle bredden rundt google kanpp
+  const googleBoxRef = useRef<HTMLDivElement>(null);
+  const [googleButtonWidth, setGoogleButtonWidth] = useState(400);
+
+  // måler hver gang den endrer størrelse
+  useEffect(() => {
+    const box = googleBoxRef.current;
+    if (!box) return;
+
+    const observer = new ResizeObserver(() => {
+      // google tillater maks 400 px
+      setGoogleButtonWidth(Math.min(box.offsetWidth, 400));
+    });
+    observer.observe(box);
+
+    // slutter å måle når man forlater siden
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div className="mx-auto mt-12 flex max-w-lg flex-col gap-4 rounded-large bg-peach p-10 shadow-lg">
       <h1 className="font-heading text-6xl font-bold">Velkommen tilbake</h1>
@@ -14,13 +40,16 @@ export default function LoginPage() {
 
       {/* Midlertidig: Google og gjest kobles til backend senere */}
       <div className="mt-2 flex flex-col gap-2">
-        <Button
-          variant="primary"
-          className="font-bold"
-          onClick={() => console.log('google')}
-        >
-          Logg inn med Google
-        </Button>
+        <div ref={googleBoxRef} className="flex justify-center">
+          <GoogleLogin
+            onSuccess={handleGoogleSuccess}
+            onError={() => console.log('Google innlogging feilet')}
+            text="signin_with"
+            size="large"
+            width={googleButtonWidth}
+            shape="rectangular"
+          />
+        </div>
         <p className="text-center text-sm">
           Lagre favorittene dine og del egne oppskrifter.
         </p>
@@ -35,7 +64,7 @@ export default function LoginPage() {
 
       <div className="flex flex-col gap-2">
         <Button
-          variant="secondary"
+          variant="primary"
           className="font-bold"
           onClick={() => console.log('gjest')}
         >