mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 03:51:12 -05:00
Fix: Implement iframe-compatible authentication
This commit is contained in:
@@ -98,8 +98,15 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
|
||||
const currentEmail = session?.user?.email;
|
||||
const newEmailPending = session?.user?.new_email;
|
||||
|
||||
// Explicitly handle SIGNED_IN event for iframe compatibility
|
||||
if (event === 'SIGNED_IN' && session) {
|
||||
setSession(session);
|
||||
setUser(session.user);
|
||||
setLoading(false);
|
||||
} else {
|
||||
setSession(session);
|
||||
setUser(session?.user ?? null);
|
||||
}
|
||||
|
||||
// Track pending email changes
|
||||
setPendingEmail(newEmailPending ?? null);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// This file is automatically generated. Do not edit it directly.
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import type { Database } from './types';
|
||||
import { authStorage } from '@/lib/authStorage';
|
||||
|
||||
const SUPABASE_URL = "https://ydvtmnrszybqnbcqbdcy.supabase.co";
|
||||
const SUPABASE_PUBLISHABLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4";
|
||||
@@ -10,7 +11,7 @@ const SUPABASE_PUBLISHABLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiO
|
||||
|
||||
export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, {
|
||||
auth: {
|
||||
storage: localStorage,
|
||||
storage: authStorage,
|
||||
persistSession: true,
|
||||
autoRefreshToken: true,
|
||||
}
|
||||
|
||||
58
src/lib/authStorage.ts
Normal file
58
src/lib/authStorage.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Custom storage adapter for Supabase authentication that handles iframe localStorage restrictions.
|
||||
* Falls back to sessionStorage or in-memory storage if localStorage is blocked.
|
||||
*/
|
||||
class AuthStorage {
|
||||
private storage: Storage | null = null;
|
||||
private memoryStorage: Map<string, string> = new Map();
|
||||
private storageType: 'localStorage' | 'sessionStorage' | 'memory' = 'memory';
|
||||
|
||||
constructor() {
|
||||
// Try localStorage first
|
||||
try {
|
||||
localStorage.setItem('__supabase_test__', 'test');
|
||||
localStorage.removeItem('__supabase_test__');
|
||||
this.storage = localStorage;
|
||||
this.storageType = 'localStorage';
|
||||
console.log('[AuthStorage] Using localStorage');
|
||||
} catch {
|
||||
// Try sessionStorage as fallback
|
||||
try {
|
||||
sessionStorage.setItem('__supabase_test__', 'test');
|
||||
sessionStorage.removeItem('__supabase_test__');
|
||||
this.storage = sessionStorage;
|
||||
this.storageType = 'sessionStorage';
|
||||
console.log('[AuthStorage] localStorage blocked, using sessionStorage');
|
||||
} catch {
|
||||
// Use in-memory storage as last resort
|
||||
this.storageType = 'memory';
|
||||
console.log('[AuthStorage] Both localStorage and sessionStorage blocked, using in-memory storage');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getItem(key: string): string | null {
|
||||
if (this.storage) {
|
||||
return this.storage.getItem(key);
|
||||
}
|
||||
return this.memoryStorage.get(key) || null;
|
||||
}
|
||||
|
||||
setItem(key: string, value: string): void {
|
||||
if (this.storage) {
|
||||
this.storage.setItem(key, value);
|
||||
} else {
|
||||
this.memoryStorage.set(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
removeItem(key: string): void {
|
||||
if (this.storage) {
|
||||
this.storage.removeItem(key);
|
||||
} else {
|
||||
this.memoryStorage.delete(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const authStorage = new AuthStorage();
|
||||
Reference in New Issue
Block a user