Fixes authentication environment variable loading by properly configuring Vite's envDir to read from the project root instead of the archon-ui-main directory.
Changes:
- Configure vite.config.ts with envDir pointing to parent directory
- Add explicit VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to .env
- Create vite-env.d.ts for TypeScript environment variable types
- Add debug logging to supabaseClient.ts for troubleshooting
- Update .env.example with proper Vite variable configuration
- Update AUTHENTICATION_SETUP.md with corrected setup instructions
Technical details:
- Vite's loadEnv() only loads vars for config use, not client injection
- envDir config is required to tell Vite where to find .env for client code
- Variables must be explicitly defined (Vite doesn't expand ${VAR} syntax)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { createClient } from "@supabase/supabase-js";
|
|
|
|
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
|
|
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
|
|
|
|
// Debug logging
|
|
console.log("🔍 Supabase Config Debug:", {
|
|
url: supabaseUrl ? `${supabaseUrl.substring(0, 30)}...` : "MISSING",
|
|
anonKey: supabaseAnonKey ? `${supabaseAnonKey.substring(0, 20)}...` : "MISSING",
|
|
allEnvVars: Object.keys(import.meta.env).filter(key => key.startsWith('VITE_'))
|
|
});
|
|
|
|
if (!supabaseUrl || !supabaseAnonKey) {
|
|
throw new Error(
|
|
`Missing Supabase environment variables!\n` +
|
|
`VITE_SUPABASE_URL: ${supabaseUrl ? 'SET' : 'MISSING'}\n` +
|
|
`VITE_SUPABASE_ANON_KEY: ${supabaseAnonKey ? 'SET' : 'MISSING'}\n` +
|
|
`Available VITE_ vars: ${Object.keys(import.meta.env).filter(k => k.startsWith('VITE_')).join(', ')}\n` +
|
|
`Please ensure .env file is in the root directory (/home/luis/projetos/Archon/.env) and restart the Vite dev server.`
|
|
);
|
|
}
|
|
|
|
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
|
|
auth: {
|
|
persistSession: true,
|
|
autoRefreshToken: true,
|
|
detectSessionInUrl: true,
|
|
storage: window.localStorage,
|
|
},
|
|
});
|