diff --git a/auth/AuthProvider.tsx b/auth/AuthProvider.tsx index 1a0700b..829aafe 100644 --- a/auth/AuthProvider.tsx +++ b/auth/AuthProvider.tsx @@ -1,4 +1,5 @@ -import { createContext, useContext, useEffect, useMemo, useState, PropsWithChildren } from 'react' +import { createContext, useContext, useEffect, useMemo, useState } from 'react' +import type { PropsWithChildren } from 'react' import { userManager } from './oidc' import type { User } from 'oidc-client-ts' @@ -42,13 +43,19 @@ userManager.events.removeAccessTokenExpired(onExpired) // Spegla token till sessionStorage så ky kan läsa den +// i useEffect som speglar token: useEffect(() => { -const token = user?.access_token ?? null -if (token) sessionStorage.setItem('access_token', token) -else sessionStorage.removeItem('access_token') + const token = user?.access_token ?? null + if (token) { + sessionStorage.setItem('access_token', token) + console.debug('access_token set') + } else { + sessionStorage.removeItem('access_token') + } }, [user]) + const api: AuthCtx = useMemo(() => ({ user, isAuthenticated: !!user && !user.expired, diff --git a/auth/oidc.ts b/auth/oidc.ts index 7270e31..133d9fc 100644 --- a/auth/oidc.ts +++ b/auth/oidc.ts @@ -1,6 +1,6 @@ import { UserManager, WebStorageStateStore, Log, type UserManagerSettings } from 'oidc-client-ts' - +console.log('AUTHORITY:', import.meta.env.VITE_OIDC_AUTHORITY) const settings: UserManagerSettings = { authority: import.meta.env.VITE_OIDC_AUTHORITY!, client_id: import.meta.env.VITE_OIDC_CLIENT_ID!, diff --git a/src/app/router.tsx b/src/app/router.tsx index 52fd257..cc98a46 100644 --- a/src/app/router.tsx +++ b/src/app/router.tsx @@ -8,6 +8,7 @@ import { DueTomorrowPage } from '@/pages/DueTomorrowPage' import AuthCallbackPage from '@/pages/AuthCallbackPage' import SilentRenewPage from '@/pages/SilentRenewPage' import LogoutPage from '@/pages/LogoutPage' +import { RequireAuth } from 'auth/RequireAuth' const router = createBrowserRouter([ { path: '/auth/callback', element: }, @@ -15,7 +16,11 @@ const router = createBrowserRouter([ { path: '/logout', element: }, { path: '/', - element: , + element: ( + + + + ), children: [ { index: true, element: }, { path: 'households/:householdId/board', element: }, diff --git a/src/features/me/MeBadge.tsx b/src/features/me/MeBadge.tsx index 06bb4b8..73c8b95 100644 --- a/src/features/me/MeBadge.tsx +++ b/src/features/me/MeBadge.tsx @@ -2,8 +2,16 @@ import { useQuery } from '@tanstack/react-query' import { fetchMe } from './api' export function MeBadge() { - const { data, isLoading, isError } = useQuery({ queryKey: ['me'], queryFn: fetchMe, retry: 0 }) + const hasToken = !!sessionStorage.getItem('access_token') + const { data, isLoading, isError } = useQuery({ + queryKey: ['me'], + queryFn: fetchMe, + enabled: hasToken, // 👈 vänta tills token finns + retry: 0, + }) + + if (!hasToken) return ej inloggad if (isLoading) return - if (isError) return ej inloggad + if (isError) return fel return {data?.name || data?.preferred_username || 'me'} } diff --git a/src/pages/AuthCallbackPage.tsx b/src/pages/AuthCallbackPage.tsx index 22e7562..f7622db 100644 --- a/src/pages/AuthCallbackPage.tsx +++ b/src/pages/AuthCallbackPage.tsx @@ -1,15 +1,29 @@ -import { useEffect } from 'react' +// src/pages/AuthCallbackPage.tsx +import { useEffect, useRef } from 'react' import { useNavigate } from 'react-router-dom' import { userManager } from 'auth/oidc' - export default function AuthCallbackPage() { -const navigate = useNavigate() -useEffect(() => { -userManager.signinRedirectCallback().then((res) => { -const target = (res?.state as any)?.returnTo || '/' -navigate(target, { replace: true }) -}) -}, [navigate]) -return

Completing sign-in…

-} \ No newline at end of file + const navigate = useNavigate() + const handled = useRef(false) + + useEffect(() => { + if (handled.current) return // 👈 skydd mot StrictMode dubbelkörning + handled.current = true + + ;(async () => { + try { + const res = await userManager.signinRedirectCallback() + const target = (res?.state as any)?.returnTo || '/' + // Städa bort ?code&state ur URL:en: + window.history.replaceState({}, '', target) + navigate(target, { replace: true }) + } catch (err) { + console.error('signinRedirectCallback failed:', err) + navigate('/', { replace: true }) + } + })() + }, [navigate]) + + return

Completing sign-in…

+}