feat: add OAuth 2.0 login UI (Google, Yandex, Discord, VK)

- Add OAuthProvider type and extend User.auth_type union
- Add OAuth API methods (providers, authorize, callback)
- Add loginWithOAuth to auth store
- Create OAuthCallback page with state validation
- Create OAuthProviderIcon component with brand SVGs
- Add OAuth buttons to Login page between Telegram and Email
- Add OAuth callback route to App.tsx
- Add translations for ru, en, zh, fa

src/pages/Login.tsx

@@ -18,6 +18,8 @@ import { getAndClearReturnUrl } from '../utils/token';
 import { isInTelegramWebApp, getTelegramInitData } from '../hooks/useTelegramSDK';
 import LanguageSwitcher from '../components/LanguageSwitcher';
 import TelegramLoginButton from '../components/TelegramLoginButton';
+import OAuthProviderIcon from '../components/OAuthProviderIcon';
+import { saveOAuthState } from './OAuthCallback';
 
 export default function Login() {
   const { t } = useTranslation();
@@ -92,6 +94,29 @@ export default function Login() {
   });
   const isEmailAuthEnabled = emailAuthConfig?.enabled ?? true;
 
+  // Fetch enabled OAuth providers
+  const { data: oauthData } = useQuery({
+    queryKey: ['oauth-providers'],
+    queryFn: authApi.getOAuthProviders,
+    staleTime: 60000,
+  });
+  const oauthProviders = oauthData?.providers ?? [];
+
+  const [oauthLoading, setOauthLoading] = useState<string | null>(null);
+
+  const handleOAuthLogin = async (provider: string) => {
+    setError('');
+    setOauthLoading(provider);
+    try {
+      const { authorize_url, state } = await authApi.getOAuthAuthorizeUrl(provider);
+      saveOAuthState(state, provider);
+      window.location.href = authorize_url;
+    } catch {
+      setError(t('auth.oauthError', 'Authorization was denied or failed'));
+      setOauthLoading(null);
+    }
+  };
+
   const botUsername = import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '';
 
   // If email auth is disabled but user came with ref param, redirect to bot
@@ -424,6 +449,38 @@ export default function Login() {
               )}
             </div>
 
+            {/* OAuth providers section */}
+            {oauthProviders.length > 0 && (
+              <>
+                <div className="my-6 flex items-center gap-3">
+                  <div className="h-px flex-1 bg-dark-700" />
+                  <span className="text-xs text-dark-500">{t('auth.or', 'or')}</span>
+                  <div className="h-px flex-1 bg-dark-700" />
+                </div>
+                <div className="space-y-3">
+                  {oauthProviders.map((provider) => (
+                    <button
+                      key={provider.name}
+                      type="button"
+                      onClick={() => handleOAuthLogin(provider.name)}
+                      disabled={oauthLoading !== null}
+                      className="hover:bg-dark-750 flex w-full items-center justify-center gap-3 rounded-xl border border-dark-700 bg-dark-800 px-4 py-3 text-sm font-medium text-dark-100 transition-colors hover:border-dark-600 disabled:opacity-50"
+                    >
+                      {oauthLoading === provider.name ? (
+                        <span className="h-5 w-5 animate-spin rounded-full border-2 border-dark-400 border-t-white" />
+                      ) : (
+                        <OAuthProviderIcon provider={provider.name} className="h-5 w-5" />
+                      )}
+                      {t(
+                        `auth.continueWith${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`,
+                        `Continue with ${provider.display_name}`,
+                      )}
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+
             {/* Email auth section - only when enabled */}
             {isEmailAuthEnabled && (
               <>

src/pages/OAuthCallback.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '../store/auth';
+
+// SessionStorage helpers for OAuth state
+const OAUTH_STATE_KEY = 'oauth_state';
+const OAUTH_PROVIDER_KEY = 'oauth_provider';
+
+export function saveOAuthState(state: string, provider: string): void {
+  sessionStorage.setItem(OAUTH_STATE_KEY, state);
+  sessionStorage.setItem(OAUTH_PROVIDER_KEY, provider);
+}
+
+export function getAndClearOAuthState(): { state: string; provider: string } | null {
+  const state = sessionStorage.getItem(OAUTH_STATE_KEY);
+  const provider = sessionStorage.getItem(OAUTH_PROVIDER_KEY);
+  sessionStorage.removeItem(OAUTH_STATE_KEY);
+  sessionStorage.removeItem(OAUTH_PROVIDER_KEY);
+  if (!state || !provider) return null;
+  return { state, provider };
+}
+
+export default function OAuthCallback() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [error, setError] = useState('');
+  const { loginWithOAuth, isAuthenticated } = useAuthStore();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate('/', { replace: true });
+      return;
+    }
+
+    const authenticate = async () => {
+      const code = searchParams.get('code');
+      const urlState = searchParams.get('state');
+
+      if (!code || !urlState) {
+        setError(t('auth.oauthError', 'Authorization was denied or failed'));
+        return;
+      }
+
+      // Get saved state from sessionStorage
+      const saved = getAndClearOAuthState();
+      if (!saved) {
+        setError(t('auth.oauthExpired', 'OAuth session expired. Please try again.'));
+        return;
+      }
+
+      // Validate state match
+      if (saved.state !== urlState) {
+        setError(t('auth.oauthError', 'Authorization was denied or failed'));
+        return;
+      }
+
+      try {
+        await loginWithOAuth(saved.provider, code, urlState);
+        navigate('/', { replace: true });
+      } catch (err: unknown) {
+        const error = err as { response?: { data?: { detail?: string } } };
+        setError(
+          error.response?.data?.detail ||
+            t('auth.oauthError', 'Authorization was denied or failed'),
+        );
+      }
+    };
+
+    authenticate();
+  }, [searchParams, loginWithOAuth, navigate, isAuthenticated, t]);
+
+  if (error) {
+    return (
+      <div className="flex min-h-screen items-center justify-center px-4 py-8">
+        <div className="fixed inset-0 bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950" />
+        <div className="relative w-full max-w-md text-center">
+          <div className="card">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-error-500/20">
+              <svg
+                className="h-8 w-8 text-error-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={1.5}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                />
+              </svg>
+            </div>
+            <h2 className="mb-2 text-lg font-semibold text-dark-50">{t('auth.loginFailed')}</h2>
+            <p className="mb-6 text-sm text-dark-400">{error}</p>
+            <button
+              onClick={() => navigate('/login', { replace: true })}
+              className="btn-primary w-full"
+            >
+              {t('auth.backToLogin', 'Back to login')}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="fixed inset-0 bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950" />
+      <div className="relative text-center">
+        <div className="mx-auto mb-4 h-10 w-10 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+        <h2 className="text-lg font-semibold text-dark-50">{t('auth.authenticating')}</h2>
+        <p className="mt-2 text-sm text-dark-400">{t('common.loading')}</p>
+      </div>
+    </div>
+  );
+}