Implement sign-up and login

Implements sign-up and login functionality with options for email/password and potentially other providers like Google, GitHub, or Microsoft.

src/contexts/AuthContext.tsx

@@ -1,7 +1,7 @@
 
 import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 import { supabase } from '@/integrations/supabase/client';
-import { Session, User } from '@supabase/supabase-js';
+import { Session, User, Provider } from '@supabase/supabase-js';
 import { useToast } from '@/hooks/use-toast';
 
 type AuthContextType = {
@@ -11,6 +11,7 @@ type AuthContextType = {
   loading: boolean;
   signIn: (email: string, password: string) => Promise<void>;
   signUp: (email: string, password: string, fullName: string) => Promise<void>;
+  signInWithProvider: (provider: Provider) => Promise<void>;
   signOut: () => Promise<void>;
 };
 
@@ -128,6 +129,31 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     }
   };
 
+  const signInWithProvider = async (provider: Provider) => {
+    try {
+      setLoading(true);
+      const { error } = await supabase.auth.signInWithOAuth({ 
+        provider,
+        options: {
+          redirectTo: window.location.origin + '/dashboard'
+        }
+      });
+      
+      if (error) throw error;
+      
+    } catch (error: any) {
+      toast({
+        title: "Error signing in",
+        description: error.message,
+        variant: "destructive",
+      });
+      console.error(`Error signing in with ${provider}:`, error);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const signOut = async () => {
     try {
       setLoading(true);
@@ -158,6 +184,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         loading,
         signIn,
         signUp,
+        signInWithProvider,
         signOut,
       }}
     >

src/pages/Auth.tsx

@@ -2,15 +2,16 @@
 import { useState } from 'react';
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
-import { ShieldCheck, Mail, Lock, User } from 'lucide-react';
+import { ShieldCheck, Mail, Lock, User, Github, Google, Microsoft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Separator } from '@/components/ui/separator';
 
 const Auth = () => {
-  const { user, signIn, signUp, loading } = useAuth();
+  const { user, signIn, signUp, signInWithProvider, loading } = useAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [fullName, setFullName] = useState('');
@@ -41,6 +42,15 @@ const Auth = () => {
     }
   };
 
+  const handleSocialSignIn = async (provider: 'google' | 'github' | 'microsoft') => {
+    setAuthError(null);
+    try {
+      await signInWithProvider(provider);
+    } catch (error: any) {
+      setAuthError(error.message);
+    }
+  };
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-muted/30 px-4">
       <div className="max-w-md w-full">
@@ -101,7 +111,7 @@ const Auth = () => {
                     <div className="text-sm text-destructive">{authError}</div>
                   )}
                 </CardContent>
-                <CardFooter>
+                <CardFooter className="flex-col space-y-4">
                   <Button
                     type="submit"
                     className="w-full rounded-full"
@@ -109,6 +119,44 @@ const Auth = () => {
                   >
                     {loading ? 'Signing in...' : 'Sign In'}
                   </Button>
+                  
+                  <div className="relative w-full">
+                    <div className="absolute inset-0 flex items-center">
+                      <Separator className="w-full" />
+                    </div>
+                    <div className="relative flex justify-center">
+                      <span className="bg-card px-2 text-xs text-muted-foreground">
+                        Or continue with
+                      </span>
+                    </div>
+                  </div>
+                  
+                  <div className="grid grid-cols-3 gap-2 w-full">
+                    <Button 
+                      type="button" 
+                      variant="outline" 
+                      onClick={() => handleSocialSignIn('google')}
+                      disabled={loading}
+                    >
+                      <Google className="h-4 w-4" />
+                    </Button>
+                    <Button 
+                      type="button" 
+                      variant="outline" 
+                      onClick={() => handleSocialSignIn('github')}
+                      disabled={loading}
+                    >
+                      <Github className="h-4 w-4" />
+                    </Button>
+                    <Button 
+                      type="button" 
+                      variant="outline" 
+                      onClick={() => handleSocialSignIn('microsoft')}
+                      disabled={loading}
+                    >
+                      <Microsoft className="h-4 w-4" />
+                    </Button>
+                  </div>
                 </CardFooter>
               </form>
             </Card>
@@ -173,7 +221,7 @@ const Auth = () => {
                     <div className="text-sm text-destructive">{authError}</div>
                   )}
                 </CardContent>
-                <CardFooter>
+                <CardFooter className="flex-col space-y-4">
                   <Button
                     type="submit"
                     className="w-full rounded-full"
@@ -181,6 +229,44 @@ const Auth = () => {
                   >
                     {loading ? 'Creating account...' : 'Create Account'}
                   </Button>
+                  
+                  <div className="relative w-full">
+                    <div className="absolute inset-0 flex items-center">
+                      <Separator className="w-full" />
+                    </div>
+                    <div className="relative flex justify-center">
+                      <span className="bg-card px-2 text-xs text-muted-foreground">
+                        Or continue with
+                      </span>
+                    </div>
+                  </div>
+                  
+                  <div className="grid grid-cols-3 gap-2 w-full">
+                    <Button 
+                      type="button" 
+                      variant="outline" 
+                      onClick={() => handleSocialSignIn('google')}
+                      disabled={loading}
+                    >
+                      <Google className="h-4 w-4" />
+                    </Button>
+                    <Button 
+                      type="button" 
+                      variant="outline" 
+                      onClick={() => handleSocialSignIn('github')}
+                      disabled={loading}
+                    >
+                      <Github className="h-4 w-4" />
+                    </Button>
+                    <Button 
+                      type="button" 
+                      variant="outline" 
+                      onClick={() => handleSocialSignIn('microsoft')}
+                      disabled={loading}
+                    >
+                      <Microsoft className="h-4 w-4" />
+                    </Button>
+                  </div>
                 </CardFooter>
               </form>
             </Card>