diff --git a/app/lib/stores/auth.ts b/app/lib/stores/auth.ts index 55c25fe0..95a05caa 100644 --- a/app/lib/stores/auth.ts +++ b/app/lib/stores/auth.ts @@ -1,6 +1,6 @@ import { atom } from 'nanostores'; import { getSupabase } from '~/lib/supabase/client'; -import type { User, Session } from '@supabase/supabase-js'; +import { type User, type Session, AuthError } from '@supabase/supabase-js'; import { logStore } from './logs'; import { useEffect, useState } from 'react'; import { isAuthenticated } from '~/lib/supabase/client'; @@ -32,18 +32,24 @@ export async function initializeAuth() { isLoadingStore.set(true); - // In local testing we've seen problems where Supabase auth hangs. - const timeout = setTimeout(() => { - console.error('Timed out initializing auth'); - }, 5000); + // We've seen Supabase Auth hang when there are multiple tabs open. + // Handle this by using a timeout to ensure we don't wait indefinitely. + const timeoutPromise = new Promise<{ data: { session: Session | null }; error?: AuthError }>((resolve) => { + setTimeout(() => { + resolve({ + data: { session: null }, + error: new AuthError('Timed out initializing auth'), + }); + }, 5000); + }); + + const authRes = await Promise.race([getSupabase().auth.getSession(), timeoutPromise]); // Get initial session const { data: { session }, error, - } = await getSupabase().auth.getSession(); - - clearTimeout(timeout); + } = authRes; if (error) { throw error; diff --git a/app/root.tsx b/app/root.tsx index bdb0cc46..d562afef 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -11,7 +11,7 @@ import { useEffect, useState } from 'react'; import { logStore } from './lib/stores/logs'; import { initializeAuth, userStore, isLoadingStore } from './lib/stores/auth'; import { initializeUserStores } from './lib/stores/user'; -import { ToastContainer } from 'react-toastify'; +import { ToastContainer, toast } from 'react-toastify'; import { Analytics } from '@vercel/analytics/remix'; import { AuthModal } from './components/auth/AuthModal'; @@ -115,6 +115,12 @@ function AuthProvider({ data }: { data: LoaderData }) { // Initialize auth and user stores initializeAuth().catch((err: Error) => { logStore.logError('Failed to initialize auth', err); + sentryHandleError(err); + toast.error('Could not log in to the server. Please reload the page, or close other open tabs and try again', { + autoClose: false, + position: 'top-center', + theme: 'colored', + }); }); initializeUserStores().catch((err: Error) => { logStore.logError('Failed to initialize user stores', err);