feat: add Google OAuth sign-in button to login page

Users can now sign in with their Google account via Supabase OAuth.
Google button appears above wallet connect in the "Or continue with" section.
This commit is contained in:
2026-03-15 05:16:12 +03:00
parent d6cfa855c0
commit c439c7cf44
+46 -12
View File
@@ -2,6 +2,7 @@ import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';
import { usePezkuwi } from '@/contexts/PezkuwiContext';
import { supabase } from '@/lib/supabase';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
@@ -121,6 +122,26 @@ const Login: React.FC = () => {
}
};
const handleGoogleSignIn = async () => {
setError('');
setLoading(true);
try {
const { error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: window.location.origin + '/',
},
});
if (error) {
setError(error.message);
}
} catch {
setError('Google sign-in failed. Please try again.');
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
@@ -360,19 +381,32 @@ const Login: React.FC = () => {
</div>
</div>
<Button
variant="outline"
className="w-full border-gray-700 bg-gray-800 hover:bg-gray-700 text-white"
onClick={handleWalletConnect}
disabled={loading}
>
<Wallet className="mr-2 h-4 w-4" />
{t('login.connectWallet', 'Connect with Pezkuwi.js')}
</Button>
<div className="space-y-3">
<Button
variant="outline"
className="w-full border-gray-700 bg-gray-800 hover:bg-gray-700 text-white"
onClick={handleGoogleSignIn}
disabled={loading}
>
<svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
</svg>
{t('login.googleSignIn', 'Continue with Google')}
</Button>
<p className="mt-2 text-xs text-center text-gray-500">
{t('login.walletHint', 'Connect your Pezkuwi.js for instant access')}
</p>
<Button
variant="outline"
className="w-full border-gray-700 bg-gray-800 hover:bg-gray-700 text-white"
onClick={handleWalletConnect}
disabled={loading}
>
<Wallet className="mr-2 h-4 w-4" />
{t('login.connectWallet', 'Connect with Pezkuwi.js')}
</Button>
</div>
</CardContent>
<CardFooter className="text-center text-sm text-gray-500">