diff --git a/src/components/User/withAuth.component.tsx b/src/components/User/withAuth.component.tsx index e049e92d1..17f50f657 100644 --- a/src/components/User/withAuth.component.tsx +++ b/src/components/User/withAuth.component.tsx @@ -1,19 +1,42 @@ import { useRouter } from 'next/router'; -import { useEffect, ComponentType } from 'react'; -import { hasCredentials } from '../../utils/auth'; +import { useEffect, ComponentType, useState } from 'react'; +import { useQuery } from '@apollo/client'; +import { GET_CURRENT_USER } from '../../utils/gql/GQL_QUERIES'; +import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component'; const withAuth =

(WrappedComponent: ComponentType

) => { const Wrapper = (props: P) => { const router = useRouter(); + const [isChecking, setIsChecking] = useState(true); + + const { data, loading, error } = useQuery(GET_CURRENT_USER, { + errorPolicy: 'all', + fetchPolicy: 'cache-and-network', + }); useEffect(() => { - if (!hasCredentials()) { - router.push('/logg-inn'); + if (!loading) { + setIsChecking(false); + + // If there's an error or no customer data, user is not authenticated + if (error || !data?.customer) { + router.push('/logg-inn'); + } } - }, [router]); + }, [data, loading, error, router]); - if (!hasCredentials()) { - return null; // or a loading spinner + // Show loading while checking authentication + if (loading || isChecking) { + return ( +

+ +
+ ); + } + + // If no customer data, don't render the component + if (!data?.customer) { + return null; } return ; diff --git a/src/utils/apollo/ApolloClient.js b/src/utils/apollo/ApolloClient.js index f0e4458fd..d0710e0ea 100644 --- a/src/utils/apollo/ApolloClient.js +++ b/src/utils/apollo/ApolloClient.js @@ -6,7 +6,6 @@ import { createHttpLink, ApolloLink, } from '@apollo/client'; -import { getAuthToken } from '../auth'; const SEVEN_DAYS = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds @@ -39,12 +38,8 @@ export const middleware = new ApolloLink(async (operation, forward) => { } } - if (process.browser) { - const authToken = await getAuthToken(); - if (authToken) { - headers.Authorization = `Bearer ${authToken}`; - } - } + // Cookie-based authentication - no JWT tokens needed + // Cookies are automatically included with credentials: 'include' operation.setContext({ headers, @@ -97,6 +92,7 @@ const client = new ApolloClient({ createHttpLink({ uri: process.env.NEXT_PUBLIC_GRAPHQL_URL, fetch, + credentials: 'include', // Include cookies for authentication }), ), ), diff --git a/src/utils/auth.ts b/src/utils/auth.ts index bd22a6dea..44af4e44a 100644 --- a/src/utils/auth.ts +++ b/src/utils/auth.ts @@ -17,6 +17,44 @@ export async function getAuthToken() { return null; } +function getErrorMessage(error: any): string { + // Check for GraphQL errors + if (error.graphQLErrors && error.graphQLErrors.length > 0) { + const graphQLError = error.graphQLErrors[0]; + const message = graphQLError.message; + + // Map GraphQL error messages to user-friendly messages + switch (message) { + case 'invalid_username': + return 'Ugyldig brukernavn eller e-postadresse. Vennligst sjekk og prøv igjen.'; + case 'incorrect_password': + return 'Feil passord. Vennligst sjekk passordet ditt og prøv igjen.'; + case 'invalid_email': + return 'Ugyldig e-postadresse. Vennligst skriv inn en gyldig e-postadresse.'; + case 'empty_username': + return 'Vennligst skriv inn brukernavn eller e-postadresse.'; + case 'empty_password': + return 'Vennligst skriv inn passord.'; + case 'too_many_retries': + return 'For mange mislykkede forsøk. Vennligst vent litt før du prøver igjen.'; + default: + return 'Innlogging mislyktes. Vennligst sjekk dine opplysninger og prøv igjen.'; + } + } + + // Check for network errors + if (error.networkError) { + return 'Nettverksfeil. Vennligst sjekk internetttilkoblingen din og prøv igjen.'; + } + + // Fallback for other errors + if (error.message) { + return 'Det oppstod en feil under innlogging. Vennligst prøv igjen.'; + } + + return 'En ukjent feil oppstod. Vennligst prøv igjen senere.'; +} + export async function login(username: string, password: string) { try { const client = new ApolloClient({ @@ -33,16 +71,14 @@ export async function login(username: string, password: string) { const loginResult = data.loginWithCookies; if (loginResult.status !== 'SUCCESS') { - throw new Error('Login failed'); + throw new Error('Innlogging mislyktes. Vennligst sjekk dine opplysninger og prøv igjen.'); } // 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); - } - throw new Error('An unknown error occurred during login.'); + const userFriendlyMessage = getErrorMessage(error); + throw new Error(userFriendlyMessage); } } diff --git a/src/utils/gql/GQL_QUERIES.ts b/src/utils/gql/GQL_QUERIES.ts index eb6d6b116..7ef686a5d 100644 --- a/src/utils/gql/GQL_QUERIES.ts +++ b/src/utils/gql/GQL_QUERIES.ts @@ -325,6 +325,17 @@ export const GET_CART = gql` } `; +export const GET_CURRENT_USER = gql` + query GET_CURRENT_USER { + customer { + id + firstName + lastName + email + } + } +`; + export const GET_CUSTOMER_ORDERS = gql` query GET_CUSTOMER_ORDERS { customer {