From 96e2fadf81108c18d1027a81b284de069b854577 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 20:45:48 +0200
Subject: [PATCH 1/9] Add login

---
 .env.example                                  |   6 +-
 src/components/Header/Navbar.component.tsx    |  38 ++++-
 .../User/CustomerAccount.component.tsx        |  61 ++++++++
 src/components/User/UserLogin.component.tsx   |  85 +++++++++++
 src/components/User/withAuth.component.tsx    |  25 ++++
 src/pages/logg-inn.tsx                        |  15 ++
 src/pages/min-konto.tsx                       |  16 +++
 src/utils/apollo/ApolloClient.js              |  23 ++-
 src/utils/auth.ts                             | 134 ++++++++++++++++++
 src/utils/gql/GQL_MUTATIONS.ts                |  20 +++
 src/utils/gql/GQL_QUERIES.ts                  |  16 +++
 11 files changed, 431 insertions(+), 8 deletions(-)
 create mode 100644 src/components/User/CustomerAccount.component.tsx
 create mode 100644 src/components/User/UserLogin.component.tsx
 create mode 100644 src/components/User/withAuth.component.tsx
 create mode 100644 src/pages/logg-inn.tsx
 create mode 100644 src/pages/min-konto.tsx
 create mode 100644 src/utils/auth.ts

diff --git a/.env.example b/.env.example
index aad4da7ae..d1903cf48 100644
--- a/.env.example
+++ b/.env.example
@@ -4,4 +4,8 @@ NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL="https://res.cloudinary.com/placeholder-
 NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL="https://via.placeholder.com/600"
 NEXT_PUBLIC_ALGOLIA_APP_ID = "changeme"
 NEXT_PUBLIC_ALGOLIA_PUBLIC_API_KEY = "changeme"
-NODE_ENV="development"
\ No newline at end of file
+NODE_ENV="development"
+NEXT_PUBLIC_AUTH_TOKEN_SS_KEY="auth-token"
+NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY="refresh-token"
+NEXT_PUBLIC_SESSION_TOKEN_LS_KEY="session-token"
+NEXT_PUBLIC_AUTH_KEY_TIMEOUT="300000"
diff --git a/src/components/Header/Navbar.component.tsx b/src/components/Header/Navbar.component.tsx
index 4d498ce81..a27acc232 100644
--- a/src/components/Header/Navbar.component.tsx
+++ b/src/components/Header/Navbar.component.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
-
+import { useEffect, useState } from 'react';
+import { hasCredentials } from '../../utils/auth';
 import Cart from './Cart.component';
 import AlgoliaSearchBox from '../AlgoliaSearch/AlgoliaSearchBox.component';
 import MobileSearch from '../AlgoliaSearch/MobileSearch.component';
@@ -9,6 +10,12 @@ import MobileSearch from '../AlgoliaSearch/MobileSearch.component';
  * Includes mobile menu.
  */
 const Navbar = () => {
+  const [loggedIn, setLoggedIn] = useState(false);
+
+  useEffect(() => {
+    setLoggedIn(hasCredentials());
+  }, []);
+
   return (
     <header className="border-b border-gray-200">
       <nav id="header" className="top-0 z-50 w-full bg-white">
@@ -51,6 +58,35 @@ const Navbar = () => {
             </Link>
             <div className="flex items-center space-x-3">
               <AlgoliaSearchBox />
+              {loggedIn ? (
+                <Link href="/min-konto">
+                  <span className="text-base uppercase tracking-wider group relative">
+                    <span className="relative inline-block">
+                      <span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
+                      Min konto
+                    </span>
+                  </span>
+                </Link>
+              ) : (
+                <>
+                  <Link href="/logg-inn">
+                    <span className="text-base uppercase tracking-wider group relative">
+                      <span className="relative inline-block">
+                        <span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
+                        Logg inn
+                      </span>
+                    </span>
+                  </Link>
+                  <Link href="/registrer">
+                    <span className="text-base uppercase tracking-wider group relative">
+                      <span className="relative inline-block">
+                        <span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
+                        Registrer
+                      </span>
+                    </span>
+                  </Link>
+                </>
+              )}
               <Cart />
             </div>
           </div>
diff --git a/src/components/User/CustomerAccount.component.tsx b/src/components/User/CustomerAccount.component.tsx
new file mode 100644
index 000000000..25e33dff9
--- /dev/null
+++ b/src/components/User/CustomerAccount.component.tsx
@@ -0,0 +1,61 @@
+import { useQuery } from '@apollo/client';
+import { GET_CUSTOMER_ORDERS } from '../../utils/gql/GQL_QUERIES';
+import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
+
+interface Order {
+  id: string;
+  orderNumber: number;
+  status: string;
+  total: string;
+  date: string;
+}
+
+/**
+ * Customer account component that displays user's orders
+ * @function CustomerAccount
+ * @returns {JSX.Element} - Rendered component with order history
+ */
+const CustomerAccount = () => {
+  const { loading, error, data } = useQuery(GET_CUSTOMER_ORDERS);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <p>Error: {error.message}</p>;
+
+  const orders = data?.customer?.orders?.nodes;
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Mine ordre</h1>
+      {orders && orders.length > 0 ? (
+        <div className="overflow-x-auto">
+          <table className="min-w-full bg-white">
+            <thead>
+              <tr>
+                <th className="py-2 px-4 border-b">Ordrenummer</th>
+                <th className="py-2 px-4 border-b">Dato</th>
+                <th className="py-2 px-4 border-b">Status</th>
+                <th className="py-2 px-4 border-b">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              {orders.map((order: Order) => (
+                <tr key={order.id}>
+                  <td className="py-2 px-4 border-b">{order.orderNumber}</td>
+                  <td className="py-2 px-4 border-b">
+                    {new Date(order.date).toLocaleDateString()}
+                  </td>
+                  <td className="py-2 px-4 border-b">{order.status}</td>
+                  <td className="py-2 px-4 border-b">{order.total}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <p>Du har ingen ordre.</p>
+      )}
+    </div>
+  );
+};
+
+export default CustomerAccount;
diff --git a/src/components/User/UserLogin.component.tsx b/src/components/User/UserLogin.component.tsx
new file mode 100644
index 000000000..1730e1eda
--- /dev/null
+++ b/src/components/User/UserLogin.component.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { login } from '../../utils/auth';
+import { InputField } from '../Input/InputField.component';
+import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
+import Button from '../UI/Button.component';
+import { useRouter } from 'next/router';
+
+interface ILoginData {
+  username: string;
+  password: string;
+}
+
+/**
+ * User login component that handles user authentication
+ * @function UserLogin
+ * @returns {JSX.Element} - Rendered component with login form
+ */
+const UserLogin = () => {
+  const methods = useForm<ILoginData>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const onSubmit = async (data: ILoginData) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const customer = await login(data.username, data.password);
+      if (customer) {
+        router.push('/min-konto');
+      } else {
+        throw new Error('Failed to login');
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        setError(error.message);
+      } else {
+        setError('An unknown error occurred.');
+      }
+      console.error('Login error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <section className="text-gray-700 container p-4 py-2 mx-auto mb-[8rem] md:mb-0">
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit(onSubmit)}>
+          <div className="mx-auto lg:w-1/2 flex flex-wrap">
+            <InputField
+              inputName="username"
+              inputLabel="Brukernavn eller e-post"
+              type="text"
+              customValidation={{ required: true }}
+            />
+            <InputField
+              inputName="password"
+              inputLabel="Passord"
+              type="password"
+              customValidation={{ required: true }}
+            />
+
+            {error && (
+              <div className="w-full p-2 text-red-600 text-sm text-center">
+                {error}
+              </div>
+            )}
+
+            <div className="w-full p-2">
+              <div className="mt-4 flex justify-center">
+                <Button variant="primary" buttonDisabled={loading}>
+                  {loading ? <LoadingSpinner /> : 'Logg inn'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </FormProvider>
+    </section>
+  );
+};
+
+export default UserLogin;
diff --git a/src/components/User/withAuth.component.tsx b/src/components/User/withAuth.component.tsx
new file mode 100644
index 000000000..e049e92d1
--- /dev/null
+++ b/src/components/User/withAuth.component.tsx
@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router';
+import { useEffect, ComponentType } from 'react';
+import { hasCredentials } from '../../utils/auth';
+
+const withAuth = <P extends object>(WrappedComponent: ComponentType<P>) => {
+  const Wrapper = (props: P) => {
+    const router = useRouter();
+
+    useEffect(() => {
+      if (!hasCredentials()) {
+        router.push('/logg-inn');
+      }
+    }, [router]);
+
+    if (!hasCredentials()) {
+      return null; // or a loading spinner
+    }
+
+    return <WrappedComponent {...props} />;
+  };
+
+  return Wrapper;
+};
+
+export default withAuth;
diff --git a/src/pages/logg-inn.tsx b/src/pages/logg-inn.tsx
new file mode 100644
index 000000000..3e3c4d493
--- /dev/null
+++ b/src/pages/logg-inn.tsx
@@ -0,0 +1,15 @@
+import Layout from '@/components/Layout/Layout.component';
+import UserLogin from '@/components/User/UserLogin.component';
+import type { NextPage } from 'next';
+
+const LoginPage: NextPage = () => {
+  return (
+    <Layout title="Logg inn">
+      <div className="container mx-auto px-4 py-8">
+        <UserLogin />
+      </div>
+    </Layout>
+  );
+};
+
+export default LoginPage;
diff --git a/src/pages/min-konto.tsx b/src/pages/min-konto.tsx
new file mode 100644
index 000000000..958deb60e
--- /dev/null
+++ b/src/pages/min-konto.tsx
@@ -0,0 +1,16 @@
+import Layout from '@/components/Layout/Layout.component';
+import CustomerAccount from '@/components/User/CustomerAccount.component';
+import type { NextPage } from 'next';
+import withAuth from '@/components/User/withAuth.component';
+
+const CustomerAccountPage: NextPage = () => {
+  return (
+    <Layout title="Min konto">
+      <div className="container mx-auto px-4 py-8">
+        <CustomerAccount />
+      </div>
+    </Layout>
+  );
+};
+
+export default withAuth(CustomerAccountPage);
diff --git a/src/utils/apollo/ApolloClient.js b/src/utils/apollo/ApolloClient.js
index 39b9250e6..f5c4395d6 100644
--- a/src/utils/apollo/ApolloClient.js
+++ b/src/utils/apollo/ApolloClient.js
@@ -1,11 +1,13 @@
 /*eslint complexity: ["error", 6]*/
 
+/* eslint-disable unicorn/no-thenable */
 import {
   ApolloClient,
   InMemoryCache,
   createHttpLink,
   ApolloLink,
 } from '@apollo/client';
+import { getAuthToken } from '../auth';
 
 const SEVEN_DAYS = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
 
@@ -13,7 +15,7 @@ const SEVEN_DAYS = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
  * Middleware operation
  * If we have a session token in localStorage, add it to the GraphQL request as a Session header.
  */
-export const middleware = new ApolloLink((operation, forward) => {
+export const middleware = new ApolloLink(async (operation, forward) => {
   /**
    * If session data exist in local storage, set value as session header.
    * Here we also delete the session if it is older than 7 days
@@ -22,6 +24,8 @@ export const middleware = new ApolloLink((operation, forward) => {
     ? JSON.parse(localStorage.getItem('woo-session'))
     : null;
 
+  const headers = {};
+
   if (sessionData && sessionData.token && sessionData.createdTime) {
     const { token, createdTime } = sessionData;
 
@@ -32,14 +36,21 @@ export const middleware = new ApolloLink((operation, forward) => {
       localStorage.setItem('woocommerce-cart', JSON.stringify({}));
     } else {
       // If it's not, use the token
-      operation.setContext(() => ({
-        headers: {
-          'woocommerce-session': `Session ${token}`,
-        },
-      }));
+      headers['woocommerce-session'] = `Session ${token}`;
     }
   }
 
+  if (process.browser) {
+    const authToken = await getAuthToken();
+    if (authToken) {
+      headers.Authorization = `Bearer ${authToken}`;
+    }
+  }
+
+  operation.setContext({
+    headers,
+  });
+
   return forward(operation);
 });
 
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
new file mode 100644
index 000000000..bb5dc1150
--- /dev/null
+++ b/src/utils/auth.ts
@@ -0,0 +1,134 @@
+import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
+import { LOGIN_USER, REFRESH_AUTH_TOKEN } from './gql/GQL_MUTATIONS';
+
+let tokenSetter: NodeJS.Timeout;
+
+export function hasCredentials() {
+  const authToken = sessionStorage.getItem(
+    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string
+  );
+  const refreshToken = localStorage.getItem(
+    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string
+  );
+
+  if (!!authToken && !!refreshToken) {
+    return true;
+  }
+
+  return false;
+}
+
+export async function getAuthToken() {
+  let authToken = sessionStorage.getItem(
+    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string
+  );
+  if (!authToken || !tokenSetter) {
+    authToken = await fetchAuthToken();
+  }
+  return authToken;
+}
+
+async function fetchAuthToken() {
+  const refreshToken = localStorage.getItem(
+    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string
+  );
+  if (!refreshToken) {
+    // No refresh token means the user is not authenticated.
+    return;
+  }
+
+  try {
+    const client = new ApolloClient({
+      uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
+      cache: new InMemoryCache(),
+    });
+
+    const { data } = await client.mutate({
+      mutation: REFRESH_AUTH_TOKEN,
+      variables: { refreshToken },
+    });
+
+    const authToken = data?.refreshJwtAuthToken?.authToken;
+    if (!authToken) {
+      throw new Error('Failed to retrieve a new auth token');
+    }
+    // Save token.
+    sessionStorage.setItem(
+      process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
+      authToken
+    );
+    if (tokenSetter) {
+      clearInterval(tokenSetter);
+    }
+    tokenSetter = setInterval(
+      async () => {
+        if (!hasCredentials()) {
+          clearInterval(tokenSetter);
+          return;
+        }
+        fetchAuthToken();
+      },
+      Number(process.env.NEXT_PUBLIC_AUTH_KEY_TIMEOUT || 300000)
+    );
+
+    return authToken;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+function saveCredentials(
+  authToken: string,
+  sessionToken: string,
+  refreshToken: string | null = null
+) {
+  sessionStorage.setItem(
+    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
+    authToken
+  );
+  sessionStorage.setItem(
+    process.env.NEXT_PUBLIC_SESSION_TOKEN_LS_KEY as string,
+    sessionToken
+  );
+  if (refreshToken) {
+    localStorage.setItem(
+      process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string,
+      refreshToken
+    );
+  }
+}
+
+export async function login(username: string, password: string) {
+  const headers: { [key: string]: string } = {};
+  const sessionToken = sessionStorage.getItem(
+    process.env.NEXT_PUBLIC_SESSION_TOKEN_LS_KEY as string
+  );
+  if (sessionToken) {
+    headers['woocommerce-session'] = `Session ${sessionToken}`;
+  }
+  try {
+    const client = new ApolloClient({
+      uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
+      cache: new InMemoryCache(),
+      headers,
+    });
+
+    const { data } = await client.mutate({
+      mutation: LOGIN_USER,
+      variables: { username, password },
+    });
+
+    const { authToken, refreshToken, customer } = data.login;
+
+    if (!authToken || !refreshToken || !customer.sessionToken) {
+      throw new Error('Failed to retrieve credentials.');
+    }
+    saveCredentials(authToken, customer.sessionToken, refreshToken);
+    return customer;
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    }
+    throw new Error('An unknown error occurred during login.');
+  }
+}
diff --git a/src/utils/gql/GQL_MUTATIONS.ts b/src/utils/gql/GQL_MUTATIONS.ts
index 12c25ef15..b87a1add8 100644
--- a/src/utils/gql/GQL_MUTATIONS.ts
+++ b/src/utils/gql/GQL_MUTATIONS.ts
@@ -28,6 +28,26 @@ export const CREATE_USER = gql`
   }
 `;
 
+export const LOGIN_USER = gql`
+  mutation Login($username: String!, $password: String!) {
+    login(input: { username: $username, password: $password }) {
+      authToken
+      refreshToken
+      customer {
+        sessionToken
+      }
+    }
+  }
+`;
+
+export const REFRESH_AUTH_TOKEN = gql`
+  mutation RefreshAuthToken($refreshToken: String!) {
+    refreshJwtAuthToken(input: { jwtRefreshToken: $refreshToken }) {
+      authToken
+    }
+  }
+`;
+
 export const ADD_TO_CART = gql`
   mutation ($input: AddToCartInput!) {
     addToCart(input: $input) {
diff --git a/src/utils/gql/GQL_QUERIES.ts b/src/utils/gql/GQL_QUERIES.ts
index b8b2baed4..eb6d6b116 100644
--- a/src/utils/gql/GQL_QUERIES.ts
+++ b/src/utils/gql/GQL_QUERIES.ts
@@ -324,3 +324,19 @@ export const GET_CART = gql`
     }
   }
 `;
+
+export const GET_CUSTOMER_ORDERS = gql`
+  query GET_CUSTOMER_ORDERS {
+    customer {
+      orders {
+        nodes {
+          id
+          orderNumber
+          status
+          total
+          date
+        }
+      }
+    }
+  }
+`;

From 7da2a350bf7f493394b9b8a54decb9366f4a4768 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 20:59:31 +0200
Subject: [PATCH 2/9] Fix errors

---
 src/pages/logg-inn.tsx           | 1 +
 src/pages/min-konto.tsx          | 3 ++-
 src/utils/apollo/ApolloClient.js | 3 +--
 src/utils/auth.ts                | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/logg-inn.tsx b/src/pages/logg-inn.tsx
index 3e3c4d493..465370e7a 100644
--- a/src/pages/logg-inn.tsx
+++ b/src/pages/logg-inn.tsx
@@ -1,5 +1,6 @@
 import Layout from '@/components/Layout/Layout.component';
 import UserLogin from '@/components/User/UserLogin.component';
+
 import type { NextPage } from 'next';
 
 const LoginPage: NextPage = () => {
diff --git a/src/pages/min-konto.tsx b/src/pages/min-konto.tsx
index 958deb60e..698731f30 100644
--- a/src/pages/min-konto.tsx
+++ b/src/pages/min-konto.tsx
@@ -1,8 +1,9 @@
 import Layout from '@/components/Layout/Layout.component';
 import CustomerAccount from '@/components/User/CustomerAccount.component';
-import type { NextPage } from 'next';
 import withAuth from '@/components/User/withAuth.component';
 
+import type { NextPage } from 'next';
+
 const CustomerAccountPage: NextPage = () => {
   return (
     <Layout title="Min konto">
diff --git a/src/utils/apollo/ApolloClient.js b/src/utils/apollo/ApolloClient.js
index f5c4395d6..f0e4458fd 100644
--- a/src/utils/apollo/ApolloClient.js
+++ b/src/utils/apollo/ApolloClient.js
@@ -1,6 +1,5 @@
-/*eslint complexity: ["error", 6]*/
+/*eslint complexity: ["error", 8]*/
 
-/* eslint-disable unicorn/no-thenable */
 import {
   ApolloClient,
   InMemoryCache,
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index bb5dc1150..b1d192ea0 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,7 +1,7 @@
-import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { LOGIN_USER, REFRESH_AUTH_TOKEN } from './gql/GQL_MUTATIONS';
 
-let tokenSetter: NodeJS.Timeout;
+let tokenSetter: ReturnType<typeof setInterval>;
 
 export function hasCredentials() {
   const authToken = sessionStorage.getItem(

From a69a6750153effae3ea579356a871b388dd42d28 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 21:01:25 +0200
Subject: [PATCH 3/9] Update auth.ts

---
 src/utils/auth.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index b1d192ea0..3259d5a78 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -5,10 +5,10 @@ let tokenSetter: ReturnType<typeof setInterval>;
 
 export function hasCredentials() {
   const authToken = sessionStorage.getItem(
-    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string
+    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
   );
   const refreshToken = localStorage.getItem(
-    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string
+    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string,
   );
 
   if (!!authToken && !!refreshToken) {
@@ -20,7 +20,7 @@ export function hasCredentials() {
 
 export async function getAuthToken() {
   let authToken = sessionStorage.getItem(
-    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string
+    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
   );
   if (!authToken || !tokenSetter) {
     authToken = await fetchAuthToken();
@@ -30,7 +30,7 @@ export async function getAuthToken() {
 
 async function fetchAuthToken() {
   const refreshToken = localStorage.getItem(
-    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string
+    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string,
   );
   if (!refreshToken) {
     // No refresh token means the user is not authenticated.
@@ -55,7 +55,7 @@ async function fetchAuthToken() {
     // Save token.
     sessionStorage.setItem(
       process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
-      authToken
+      authToken,
     );
     if (tokenSetter) {
       clearInterval(tokenSetter);
@@ -68,7 +68,7 @@ async function fetchAuthToken() {
         }
         fetchAuthToken();
       },
-      Number(process.env.NEXT_PUBLIC_AUTH_KEY_TIMEOUT || 300000)
+      Number(process.env.NEXT_PUBLIC_AUTH_KEY_TIMEOUT || 300000),
     );
 
     return authToken;
@@ -80,20 +80,20 @@ async function fetchAuthToken() {
 function saveCredentials(
   authToken: string,
   sessionToken: string,
-  refreshToken: string | null = null
+  refreshToken: string | null = null,
 ) {
   sessionStorage.setItem(
     process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
-    authToken
+    authToken,
   );
   sessionStorage.setItem(
     process.env.NEXT_PUBLIC_SESSION_TOKEN_LS_KEY as string,
-    sessionToken
+    sessionToken,
   );
   if (refreshToken) {
     localStorage.setItem(
       process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string,
-      refreshToken
+      refreshToken,
     );
   }
 }
@@ -101,7 +101,7 @@ function saveCredentials(
 export async function login(username: string, password: string) {
   const headers: { [key: string]: string } = {};
   const sessionToken = sessionStorage.getItem(
-    process.env.NEXT_PUBLIC_SESSION_TOKEN_LS_KEY as string
+    process.env.NEXT_PUBLIC_SESSION_TOKEN_LS_KEY as string,
   );
   if (sessionToken) {
     headers['woocommerce-session'] = `Session ${sessionToken}`;

From 954106770f9d51d99bafac9b8b1457231a5cdd32 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 21:04:20 +0200
Subject: [PATCH 4/9] Update auth.ts

---
 src/utils/auth.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 3259d5a78..2f25d0c2f 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -4,11 +4,15 @@ import { LOGIN_USER, REFRESH_AUTH_TOKEN } from './gql/GQL_MUTATIONS';
 let tokenSetter: ReturnType<typeof setInterval>;
 
 export function hasCredentials() {
+  if (typeof window === 'undefined') {
+    return false; // Server-side, no credentials available
+  }
+
   const authToken = sessionStorage.getItem(
-    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
+    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string
   );
   const refreshToken = localStorage.getItem(
-    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string,
+    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string
   );
 
   if (!!authToken && !!refreshToken) {

From 333e8c6ed5662fdb87fce8e6221fabd21c9c98dc Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 21:07:41 +0200
Subject: [PATCH 5/9] Update GQL_MUTATIONS.ts

---
 src/utils/gql/GQL_MUTATIONS.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/utils/gql/GQL_MUTATIONS.ts b/src/utils/gql/GQL_MUTATIONS.ts
index b87a1add8..9fc758a07 100644
--- a/src/utils/gql/GQL_MUTATIONS.ts
+++ b/src/utils/gql/GQL_MUTATIONS.ts
@@ -30,10 +30,16 @@ export const CREATE_USER = gql`
 
 export const LOGIN_USER = gql`
   mutation Login($username: String!, $password: String!) {
-    login(input: { username: $username, password: $password }) {
+    loginWithCookies(input: { login: $username, password: $password }) {
+      status
       authToken
       refreshToken
       customer {
+        id
+        email
+        firstName
+        lastName
+        username
         sessionToken
       }
     }

From fb2577f7105dc4d1f0cceccc911711629ed68613 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 21:10:38 +0200
Subject: [PATCH 6/9] Update auth.ts

---
 src/utils/auth.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 2f25d0c2f..ab58284a0 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -122,7 +122,7 @@ export async function login(username: string, password: string) {
       variables: { username, password },
     });
 
-    const { authToken, refreshToken, customer } = data.login;
+    const { authToken, refreshToken, customer } = data.loginWithCookies;
 
     if (!authToken || !refreshToken || !customer.sessionToken) {
       throw new Error('Failed to retrieve credentials.');

From ca7630c9024bd25b5720d39cb0389595d8dfc107 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 22:04:20 +0200
Subject: [PATCH 7/9] Fix auth

---
 src/utils/auth.ts              | 2 +-
 src/utils/gql/GQL_MUTATIONS.ts | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index ab58284a0..2f25d0c2f 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -122,7 +122,7 @@ export async function login(username: string, password: string) {
       variables: { username, password },
     });
 
-    const { authToken, refreshToken, customer } = data.loginWithCookies;
+    const { authToken, refreshToken, customer } = data.login;
 
     if (!authToken || !refreshToken || !customer.sessionToken) {
       throw new Error('Failed to retrieve credentials.');
diff --git a/src/utils/gql/GQL_MUTATIONS.ts b/src/utils/gql/GQL_MUTATIONS.ts
index 9fc758a07..1ba9497e7 100644
--- a/src/utils/gql/GQL_MUTATIONS.ts
+++ b/src/utils/gql/GQL_MUTATIONS.ts
@@ -30,8 +30,7 @@ export const CREATE_USER = gql`
 
 export const LOGIN_USER = gql`
   mutation Login($username: String!, $password: String!) {
-    loginWithCookies(input: { login: $username, password: $password }) {
-      status
+    login(input: { username: $username, password: $password }) {
       authToken
       refreshToken
       customer {

From 245d2a1c9d0bb802272380e6021d1da4b14f0d80 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 22:17:48 +0200
Subject: [PATCH 8/9] Login

---
 src/utils/auth.ts              | 128 ++++++---------------------------
 src/utils/gql/GQL_MUTATIONS.ts |  14 +---
 2 files changed, 26 insertions(+), 116 deletions(-)

diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 2f25d0c2f..bd22a6dea 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,120 +1,28 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client';
-import { LOGIN_USER, REFRESH_AUTH_TOKEN } from './gql/GQL_MUTATIONS';
-
-let tokenSetter: ReturnType<typeof setInterval>;
+import { LOGIN_USER } from './gql/GQL_MUTATIONS';
 
+// Cookie-based authentication - no token storage needed
 export function hasCredentials() {
   if (typeof window === 'undefined') {
     return false; // Server-side, no credentials available
   }
-
-  const authToken = sessionStorage.getItem(
-    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string
-  );
-  const refreshToken = localStorage.getItem(
-    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string
-  );
-
-  if (!!authToken && !!refreshToken) {
-    return true;
-  }
-
+  
+  // With cookie-based auth, we'll check if user is logged in through a query
+  // For now, we'll return false and let components handle the check
   return false;
 }
 
 export async function getAuthToken() {
-  let authToken = sessionStorage.getItem(
-    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
-  );
-  if (!authToken || !tokenSetter) {
-    authToken = await fetchAuthToken();
-  }
-  return authToken;
-}
-
-async function fetchAuthToken() {
-  const refreshToken = localStorage.getItem(
-    process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string,
-  );
-  if (!refreshToken) {
-    // No refresh token means the user is not authenticated.
-    return;
-  }
-
-  try {
-    const client = new ApolloClient({
-      uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
-      cache: new InMemoryCache(),
-    });
-
-    const { data } = await client.mutate({
-      mutation: REFRESH_AUTH_TOKEN,
-      variables: { refreshToken },
-    });
-
-    const authToken = data?.refreshJwtAuthToken?.authToken;
-    if (!authToken) {
-      throw new Error('Failed to retrieve a new auth token');
-    }
-    // Save token.
-    sessionStorage.setItem(
-      process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
-      authToken,
-    );
-    if (tokenSetter) {
-      clearInterval(tokenSetter);
-    }
-    tokenSetter = setInterval(
-      async () => {
-        if (!hasCredentials()) {
-          clearInterval(tokenSetter);
-          return;
-        }
-        fetchAuthToken();
-      },
-      Number(process.env.NEXT_PUBLIC_AUTH_KEY_TIMEOUT || 300000),
-    );
-
-    return authToken;
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-function saveCredentials(
-  authToken: string,
-  sessionToken: string,
-  refreshToken: string | null = null,
-) {
-  sessionStorage.setItem(
-    process.env.NEXT_PUBLIC_AUTH_TOKEN_SS_KEY as string,
-    authToken,
-  );
-  sessionStorage.setItem(
-    process.env.NEXT_PUBLIC_SESSION_TOKEN_LS_KEY as string,
-    sessionToken,
-  );
-  if (refreshToken) {
-    localStorage.setItem(
-      process.env.NEXT_PUBLIC_REFRESH_TOKEN_LS_KEY as string,
-      refreshToken,
-    );
-  }
+  // Cookie-based auth doesn't need JWT tokens
+  return null;
 }
 
 export async function login(username: string, password: string) {
-  const headers: { [key: string]: string } = {};
-  const sessionToken = sessionStorage.getItem(
-    process.env.NEXT_PUBLIC_SESSION_TOKEN_LS_KEY as string,
-  );
-  if (sessionToken) {
-    headers['woocommerce-session'] = `Session ${sessionToken}`;
-  }
   try {
     const client = new ApolloClient({
       uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
       cache: new InMemoryCache(),
-      headers,
+      credentials: 'include', // Include cookies in requests
     });
 
     const { data } = await client.mutate({
@@ -122,13 +30,14 @@ export async function login(username: string, password: string) {
       variables: { username, password },
     });
 
-    const { authToken, refreshToken, customer } = data.login;
+    const loginResult = data.loginWithCookies;
 
-    if (!authToken || !refreshToken || !customer.sessionToken) {
-      throw new Error('Failed to retrieve credentials.');
+    if (loginResult.status !== 'SUCCESS') {
+      throw new Error('Login failed');
     }
-    saveCredentials(authToken, customer.sessionToken, refreshToken);
-    return customer;
+
+    // On successful login, cookies are automatically set by the server
+    return { success: true, status: loginResult.status };
   } catch (error: unknown) {
     if (error instanceof Error) {
       throw new Error(error.message);
@@ -136,3 +45,12 @@ export async function login(username: string, password: string) {
     throw new Error('An unknown error occurred during login.');
   }
 }
+
+export async function logout() {
+  // For cookie-based auth, we might need a logout mutation
+  // For now, we can clear any client-side state
+  if (typeof window !== 'undefined') {
+    // Redirect to login or home page after logout
+    window.location.href = '/';
+  }
+}
diff --git a/src/utils/gql/GQL_MUTATIONS.ts b/src/utils/gql/GQL_MUTATIONS.ts
index 1ba9497e7..b9b149842 100644
--- a/src/utils/gql/GQL_MUTATIONS.ts
+++ b/src/utils/gql/GQL_MUTATIONS.ts
@@ -30,17 +30,9 @@ export const CREATE_USER = gql`
 
 export const LOGIN_USER = gql`
   mutation Login($username: String!, $password: String!) {
-    login(input: { username: $username, password: $password }) {
-      authToken
-      refreshToken
-      customer {
-        id
-        email
-        firstName
-        lastName
-        username
-        sessionToken
-      }
+    loginWithCookies(input: { login: $username, password: $password }) {
+      status
+      clientMutationId
     }
   }
 `;

From d7c9b1f08b8a6401637bf75955003daac300dd1d Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Tue, 1 Jul 2025 22:31:53 +0200
Subject: [PATCH 9/9] Update UserLogin.component.tsx

---
 src/components/User/UserLogin.component.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/User/UserLogin.component.tsx b/src/components/User/UserLogin.component.tsx
index 1730e1eda..984806fd4 100644
--- a/src/components/User/UserLogin.component.tsx
+++ b/src/components/User/UserLogin.component.tsx
@@ -26,8 +26,8 @@ const UserLogin = () => {
     setLoading(true);
     setError(null);
     try {
-      const customer = await login(data.username, data.password);
-      if (customer) {
+      const result = await login(data.username, data.password);
+      if (result.success && result.status === 'SUCCESS') {
         router.push('/min-konto');
       } else {
         throw new Error('Failed to login');