Add Magic Link sign-in

src/pages/Auth.tsx

@@ -18,6 +18,7 @@ export default function Auth() {
     toast
   } = useToast();
   const [loading, setLoading] = useState(false);
+  const [magicLinkLoading, setMagicLinkLoading] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [formData, setFormData] = useState({
     email: '',
@@ -112,6 +113,44 @@ export default function Auth() {
       setLoading(false);
     }
   };
+  
+  const handleMagicLinkSignIn = async (email: string) => {
+    if (!email) {
+      toast({
+        variant: "destructive",
+        title: "Email required",
+        description: "Please enter your email address to receive a magic link."
+      });
+      return;
+    }
+
+    setMagicLinkLoading(true);
+    
+    try {
+      const { error } = await supabase.auth.signInWithOtp({
+        email,
+        options: {
+          emailRedirectTo: `${window.location.origin}/`
+        }
+      });
+      
+      if (error) throw error;
+      
+      toast({
+        title: "Magic link sent!",
+        description: "Check your email for a sign-in link."
+      });
+    } catch (error: any) {
+      toast({
+        variant: "destructive", 
+        title: "Failed to send magic link",
+        description: error.message
+      });
+    } finally {
+      setMagicLinkLoading(false);
+    }
+  };
+
   const handleSocialSignIn = async (provider: 'google' | 'discord') => {
     try {
       const {
@@ -188,6 +227,21 @@ export default function Auth() {
                     </Button>
                   </form>
 
+                  <div className="mt-4">
+                    <Button
+                      variant="outline"
+                      onClick={() => handleMagicLinkSignIn(formData.email)}
+                      disabled={!formData.email || magicLinkLoading}
+                      className="w-full"
+                    >
+                      <Zap className="w-4 h-4 mr-2" />
+                      {magicLinkLoading ? "Sending..." : "Send Magic Link"}
+                    </Button>
+                    <p className="text-xs text-muted-foreground mt-2 text-center">
+                      Enter your email above and click to receive a sign-in link
+                    </p>
+                  </div>
+
                   <div className="mt-6">
                     <div className="relative">
                       <div className="absolute inset-0 flex items-center">
@@ -276,6 +330,21 @@ export default function Auth() {
                     </Button>
                   </form>
 
+                  <div className="mt-4">
+                    <Button
+                      variant="outline"
+                      onClick={() => handleMagicLinkSignIn(formData.email)}
+                      disabled={!formData.email || magicLinkLoading}
+                      className="w-full"
+                    >
+                      <Zap className="w-4 h-4 mr-2" />
+                      {magicLinkLoading ? "Sending..." : "Sign up with Magic Link"}
+                    </Button>
+                    <p className="text-xs text-muted-foreground mt-2 text-center">
+                      Skip the password - just enter your email above
+                    </p>
+                  </div>
+
                   <div className="mt-6">
                     <div className="relative">
                       <div className="absolute inset-0 flex items-center">