Goddy/secupolicy.x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement sign-up and login

Browse Source 
Implements sign-up and login functionality with options for email/password and potentially other providers like Google, GitHub, or Microsoft.
This commit is contained in:
gpt-engineer-app[bot] 2025-03-09 12:30:51 +00:00
parent 58c08af3e8
commit 480b779a9a
2 changed files with 118 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/contexts/AuthContext.tsx
View File

@ -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,
}}
>

94
src/pages/Auth.tsx
View File

@ -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>