Implement Auth0 migration

2025-12-24 12:31:14 -05:00 · 2025-11-01 01:08:11 +00:00
parent 858320cd03
commit b2bf9a6e20
17 changed files with 1430 additions and 7 deletions
--- a/src/components/auth/MigrationBanner.tsx
+++ b/src/components/auth/MigrationBanner.tsx
@@ -0,0 +1,105 @@
+/**
+ * Migration Banner Component
+ * 
+ * Alerts existing Supabase users about Auth0 migration
+ */
+
+import { useState, useEffect } from 'react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Info, X } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import { useProfile } from '@/hooks/useProfile';
+import { isAuth0Configured } from '@/lib/auth0Config';
+
+const DISMISSED_KEY = 'auth0_migration_dismissed';
+const DISMISS_DURATION_DAYS = 7;
+
+export function MigrationBanner() {
+  const { user } = useAuth();
+  const { data: profile } = useProfile(user?.id);
+  const [isDismissed, setIsDismissed] = useState(true);
+
+  useEffect(() => {
+    // Check if banner should be shown
+    if (!user || !profile || !isAuth0Configured()) {
+      return;
+    }
+
+    // Don't show if user already has Auth0 sub
+    if ((profile as any).auth0_sub) {
+      return;
+    }
+
+    // Check if user dismissed the banner
+    const dismissedUntil = localStorage.getItem(DISMISSED_KEY);
+    if (dismissedUntil) {
+      const dismissedDate = new Date(dismissedUntil);
+      if (dismissedDate > new Date()) {
+        return;
+      }
+    }
+
+    setIsDismissed(false);
+  }, [user, profile]);
+
+  const handleDismiss = () => {
+    const dismissUntil = new Date();
+    dismissUntil.setDate(dismissUntil.getDate() + DISMISS_DURATION_DAYS);
+    localStorage.setItem(DISMISSED_KEY, dismissUntil.toISOString());
+    setIsDismissed(true);
+  };
+
+  const handleMigrate = () => {
+    // TODO: Implement migration flow
+    // For now, just direct to settings
+    window.location.href = '/settings?tab=security';
+  };
+
+  if (isDismissed) {
+    return null;
+  }
+
+  return (
+    <Alert className="mb-4 border-blue-500 bg-blue-50 dark:bg-blue-950">
+      <Info className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+      <div className="flex items-start justify-between gap-4 flex-1">
+        <div className="flex-1">
+          <AlertDescription className="text-sm">
+            <strong className="text-blue-900 dark:text-blue-100">
+              Important: Account Security Upgrade
+            </strong>
+            <p className="mt-1 text-blue-800 dark:text-blue-200">
+              We're migrating to Auth0 for improved security and authentication. 
+              Your account needs to be migrated to continue using all features.
+            </p>
+          </AlertDescription>
+          <div className="mt-3 flex gap-2">
+            <Button
+              size="sm"
+              onClick={handleMigrate}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              Migrate Now
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => window.open('/docs/auth0-migration', '_blank')}
+            >
+              Learn More
+            </Button>
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleDismiss}
+          className="shrink-0 h-6 w-6 p-0"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </Alert>
+  );
+}