diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index cb1a600..17219e9 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -25,16 +25,6 @@ export default function App() {
     if (token) fetchUser()
   }, [token])
 
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search)
-    const urlToken = params.get('token')
-    if (urlToken) {
-      localStorage.setItem('token', urlToken)
-      useAuthStore.setState({ token: urlToken })
-      window.history.replaceState({}, '', '/')
-    }
-  }, [])
-
   return (
     <Routes>
       <Route path="/login" element={<LoginPage />} />
diff --git a/frontend/src/hooks/useAuth.js b/frontend/src/hooks/useAuth.js
index 2a01804..6d0dc17 100644
--- a/frontend/src/hooks/useAuth.js
+++ b/frontend/src/hooks/useAuth.js
@@ -1,11 +1,21 @@
 import { create } from 'zustand'
 import api from '../utils/api'
 
+// Read token from URL params synchronously at module load time,
+// before any component renders. This handles PocketID OAuth callbacks.
+const params = new URLSearchParams(window.location.search)
+const urlToken = params.get('token')
+if (urlToken) {
+  localStorage.setItem('token', urlToken)
+  window.history.replaceState({}, '', '/')
+}
+
+const initialToken = urlToken || localStorage.getItem('token')
+
 export const useAuthStore = create((set) => ({
-  token: localStorage.getItem('token'),
+  token: initialToken,
   user: null,
   isLoading: false,
-
   login: async (username, password) => {
     set({ isLoading: true })
     try {
@@ -23,12 +33,10 @@ export const useAuthStore = create((set) => ({
       throw e
     }
   },
-
   logout: () => {
     localStorage.removeItem('token')
     set({ token: null, user: null })
   },
-
   fetchUser: async () => {
     try {
       const { data } = await api.get('/auth/me')
@@ -38,4 +46,4 @@ export const useAuthStore = create((set) => ({
       localStorage.removeItem('token')
     }
   },
-}))
+}))
\ No newline at end of file