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
2026-07-28 09:33:46 +00:00 · 2026-02-07 01:59:05 +03:00
parent af25e6a1b8
commit 83aeae81b8
12 changed files with 329 additions and 6 deletions
--- a/src/components/OAuthProviderIcon.tsx
+++ b/src/components/OAuthProviderIcon.tsx
@@ -0,0 +1,74 @@
+interface OAuthProviderIconProps {
+  provider: string;
+  className?: string;
+}
+
+export default function OAuthProviderIcon({
+  provider,
+  className = 'h-5 w-5',
+}: OAuthProviderIconProps) {
+  switch (provider) {
+    case 'google':
+      return (
+        <svg className={className} viewBox="0 0 24 24">
+          <path
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+            fill="#4285F4"
+          />
+          <path
+            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"
+            fill="#34A853"
+          />
+          <path
+            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"
+            fill="#FBBC05"
+          />
+          <path
+            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"
+            fill="#EA4335"
+          />
+        </svg>
+      );
+
+    case 'yandex':
+      return (
+        <svg className={className} viewBox="0 0 24 24">
+          <path
+            d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12z"
+            fill="#FC3F1D"
+          />
+          <path
+            d="M13.63 7.56c-.7 0-1.2.18-1.6.52-.4.34-.6.85-.6 1.5 0 .5.13.92.38 1.26.25.34.68.73 1.29 1.16l.55.4-2.45 5.1H9.6l2.12-4.32c-.83-.57-1.43-1.12-1.8-1.66-.37-.54-.56-1.2-.56-1.96 0-1.03.35-1.85 1.04-2.47.7-.62 1.65-.93 2.87-.93H15.4V17.5h-1.77V7.56z"
+            fill="#fff"
+          />
+        </svg>
+      );
+
+    case 'discord':
+      return (
+        <svg className={className} viewBox="0 0 24 24">
+          <path
+            d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028 14.09 14.09 0 001.226-1.994.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+            fill="#5865F2"
+          />
+        </svg>
+      );
+
+    case 'vk':
+      return (
+        <svg className={className} viewBox="0 0 24 24">
+          <path
+            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z"
+            fill="#0077FF"
+          />
+          <path
+            d="M12.76 16.42h.86s.26-.03.39-.17c.12-.13.12-.37.12-.37s-.02-1.14.51-1.31c.53-.16 1.2 1.08 1.92 1.56.54.36.96.28.96.28l1.93-.03s1.01-.06.53-.84c-.04-.06-.28-.58-1.45-1.64-1.22-1.1-1.06-.93.41-2.84.9-1.16 1.26-1.87 1.15-2.17-.1-.29-.76-.21-.76-.21l-2.17.01s-.16-.02-.28.05c-.12.07-.19.23-.19.23s-.35.93-.81 1.72c-.98 1.67-1.37 1.76-1.53 1.65-.37-.24-.28-1-.28-1.53 0-1.66.25-2.35-.49-2.53-.25-.06-.43-.1-1.06-.1-.81-.01-1.5 0-1.89.19-.26.13-.46.42-.34.44.15.02.5.09.68.34.24.32.23 1.04.23 1.04s.14 1.96-.32 2.2c-.31.17-.74-.17-1.66-1.7-.47-.78-.83-1.65-.83-1.65s-.07-.17-.19-.26c-.15-.11-.36-.14-.36-.14l-2.06.01s-.31.01-.42.14c-.1.12-.01.36-.01.36s1.63 3.81 3.47 5.74c1.69 1.77 3.61 1.65 3.61 1.65z"
+            fill="#fff"
+          />
+        </svg>
+      );
+
+    default:
+      return null;
+  }
+}