✨ feat(oauth): Add certification component for handling OAuth login callbacks and improve user authentication flow

apps/admin/config/use-global.tsx

@@ -74,6 +74,7 @@ export const useGlobalStore = create<GlobalStore>((set) => ({
       subscribe_domain: '',
       pan_domain: false,
     },
+    oauth_methods: [],
   },
   user: undefined,
   setCommon: (common) =>

apps/admin/services/common/typings.d.ts

@@ -161,6 +161,7 @@ declare namespace API {
     invite: InviteConfig;
     currency: CurrencyConfig;
     subscribe: SubscribeConfig;
+    oauth_methods: string[];
   };
 
   type GetStatResponse = {
@@ -227,6 +228,7 @@ declare namespace API {
   type OAthLoginRequest = {
     /** google, facebook, apple, telegram, github etc. */
     method: string;
+    redirect: string;
   };
 
   type OAuthLoginResponse = {

apps/user/app/auth/page.tsx

@@ -3,8 +3,11 @@
 import LanguageSwitch from '@/components/language-switch';
 import ThemeSwitch from '@/components/theme-switch';
 import useGlobalStore from '@/config/use-global';
+import { oAuthLogin } from '@/services/common/oauth';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+import { Button } from '@workspace/ui/components/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Icon } from '@workspace/ui/custom-components/icon';
 import LoginLottie from '@workspace/ui/lotties/login.json';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
@@ -12,10 +15,18 @@ import Link from 'next/link';
 import EmailAuthForm from './email/auth-form';
 import PhoneAuthForm from './phone/auth-form';
 
+const icons = {
+  apple: 'uil:apple',
+  google: 'logos:google-icon',
+  facebook: 'logos:facebook',
+  github: 'uil:github',
+  telegram: 'logos:telegram',
+};
+
 export default function Page() {
   const t = useTranslations('auth');
   const { common } = useGlobalStore();
-  const { site, auth } = common;
+  const { site, auth, oauth_methods } = common;
 
   const AUTH_COMPONENT_MAP = {
     email: <EmailAuthForm />,
@@ -23,15 +34,21 @@ export default function Page() {
   } as const;
 
   type AuthMethod = keyof typeof AUTH_COMPONENT_MAP;
-  const enabledAuthMethods = Object.entries(auth).reduce<AuthMethod[]>((acc, [key, value]) => {
-    const enabledKey = `${key}_enabled` as const;
-    if (typeof value === 'object' && value !== null && enabledKey in value) {
-      const enabled = (value as Record<typeof enabledKey, boolean>)[enabledKey];
-      if (enabled) acc.push(key as AuthMethod);
-    }
-    return acc;
-  }, []);
 
+  const enabledAuthMethods = (Object.keys(AUTH_COMPONENT_MAP) as AuthMethod[]).filter((key) => {
+    const value = auth[key];
+    const enabledKey = `${key}_enabled` as const;
+
+    if (typeof value !== 'object' || value === null) {
+      return false;
+    }
+
+    if (!(enabledKey in value)) {
+      return false;
+    }
+    const isEnabled = (value as unknown as Record<typeof enabledKey, boolean>)[enabledKey];
+    return isEnabled;
+  });
   return (
     <main className='bg-muted/50 flex h-full min-h-screen items-center'>
       <div className='flex size-full flex-auto flex-col lg:flex-row'>
@@ -57,7 +74,7 @@ export default function Page() {
         <div className='flex flex-initial justify-center p-12 lg:flex-auto lg:justify-end'>
           <div className='lg:bg-background flex w-full flex-col items-center rounded-2xl md:w-[600px] md:p-10 lg:flex-auto lg:shadow'>
             <div className='flex w-full flex-col items-stretch justify-center md:w-[400px] lg:h-full'>
-              <div className='pb-15 flex flex-col justify-center lg:flex-auto lg:pb-20'>
+              <div className='flex flex-col justify-center lg:flex-auto'>
                 <h1 className='mb-3 text-center text-2xl font-bold'>{t('verifyAccount')}</h1>
                 <div className='text-muted-foreground mb-6 text-center font-medium'>
                   {t('verifyAccountDesc')}
@@ -81,6 +98,38 @@ export default function Page() {
                       </Tabs>
                     )}
               </div>
+              <div className='py-8'>
+                {oauth_methods?.length > 0 && (
+                  <>
+                    <div className='after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t'>
+                      <span className='bg-background text-muted-foreground relative z-10 px-2'>
+                        Or continue with
+                      </span>
+                    </div>
+                    <div className='mt-6 flex justify-center gap-4 *:size-12 *:p-2'>
+                      {oauth_methods?.map((method: any) => {
+                        return (
+                          <Button
+                            key={method}
+                            variant='ghost'
+                            size='icon'
+                            asChild
+                            onClick={async () => {
+                              const { data } = await oAuthLogin({
+                                method,
+                                redirect: `${window.location.origin}/oauth/${method}`,
+                              });
+                              console.log(data);
+                            }}
+                          >
+                            <Icon icon={icons[method as keyof typeof icons]} />
+                          </Button>
+                        );
+                      })}
+                    </div>
+                  </>
+                )}
+              </div>
               <div className='flex items-center justify-between'>
                 <div className='flex items-center gap-5'>
                   <LanguageSwitch />

apps/user/app/oauth/[platform]/certification.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import {
+  appleLoginCallback,
+  facebookLoginCallback,
+  googleLoginCallback,
+  telegramLoginCallback,
+} from '@/services/common/oauth';
+import { getRedirectUrl, setAuthorization } from '@/utils/common';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+interface CertificationProps {
+  platform: string;
+  children: React.ReactNode;
+}
+
+export default function Certification({ platform, children }: CertificationProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  async function LoginCallback() {
+    const body = Object.fromEntries(searchParams.entries()) as any;
+    switch (platform) {
+      case 'apple':
+        return appleLoginCallback(body);
+      case 'facebook':
+        return facebookLoginCallback(body);
+      case 'google':
+        return googleLoginCallback(body);
+      case 'telegram':
+        return telegramLoginCallback(body);
+      default:
+        break;
+    }
+  }
+  useEffect(() => {
+    LoginCallback()
+      .then((res) => {
+        const token = res?.data?.data?.token;
+        setAuthorization(token);
+        router.replace(getRedirectUrl());
+        router.refresh();
+      })
+      .catch((error) => {
+        router.replace('/auth');
+      });
+  }, [platform, searchParams.values()]);
+
+  return children;
+}

apps/user/app/oauth/[platform]/page.tsx

@@ -0,0 +1,53 @@
+import HyperText from '@workspace/ui/components/hyper-text';
+import { OrbitingCircles } from '@workspace/ui/components/orbiting-circles';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { getTranslations } from 'next-intl/server';
+import Certification from './certification';
+
+export async function generateStaticParams() {
+  return {
+    paths: [
+      { params: { platform: 'telegram' } },
+      { params: { platform: 'apple' } },
+      { params: { platform: 'facebook' } },
+      { params: { platform: 'google' } },
+      { params: { platform: 'github' } },
+    ],
+    fallback: false,
+  };
+}
+
+export default async function Page({
+  params: { platform },
+}: {
+  params: {
+    platform: string;
+  };
+}) {
+  const t = await getTranslations('auth');
+  return (
+    <Certification platform={platform}>
+      <div className='bg-background relative flex h-screen w-full flex-col items-center justify-center overflow-hidden'>
+        <div className='pointer-events-none flex animate-pulse flex-col items-center whitespace-pre-wrap bg-gradient-to-r from-blue-500 via-indigo-500 to-violet-500 bg-clip-text text-center font-black tracking-tight text-transparent dark:from-blue-400 dark:via-indigo-300 dark:to-violet-400'>
+          <HyperText className='text-xl uppercase md:text-2xl'>{platform}</HyperText>
+          <HyperText className='text-lg md:text-xl'>{t('authenticating')}</HyperText>
+        </div>
+
+        <OrbitingCircles iconSize={40} speed={0.8}>
+          <Icon icon='logos:telegram' className='size-12' />
+          <Icon icon='uil:apple' className='size-12' />
+          <Icon icon='logos:google-icon' className='size-12' />
+          <Icon icon='logos:facebook' className='size-12' />
+          <Icon icon='uil:github' className='size-12' />
+        </OrbitingCircles>
+        <OrbitingCircles iconSize={30} radius={100} reverse speed={0.4}>
+          <Icon icon='logos:telegram' className='size-10' />
+          <Icon icon='uil:apple' className='size-10' />
+          <Icon icon='logos:google-icon' className='size-10' />
+          <Icon icon='logos:facebook' className='size-10' />
+          <Icon icon='uil:github' className='size-10' />
+        </OrbitingCircles>
+      </div>
+    </Certification>
+  );
+}

apps/user/config/use-global.tsx

@@ -64,6 +64,7 @@ export const useGlobalStore = create<GlobalStore>((set, get) => ({
       subscribe_domain: '',
       pan_domain: false,
     },
+    oauth_methods: [],
   },
   user: undefined,
   setCommon: (common) =>

apps/user/locales/cs-CZ/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Ověřování...",
   "check": {
     "checking": "Ověřování...",
     "continue": "Pokračovat",

apps/user/locales/de-DE/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Authentifizierung...",
   "check": {
     "checking": "Überprüfung läuft...",
     "continue": "Fortfahren",

apps/user/locales/en-US/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Authenticating...",
   "check": {
     "checking": "Checking...",
     "continue": "Continue",

apps/user/locales/es-ES/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Autenticando...",
   "check": {
     "checking": "Verificando...",
     "continue": "Continuar",

apps/user/locales/es-MX/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Autenticando...",
   "check": {
     "checking": "Verificando...",
     "continue": "Continuar",

apps/user/locales/fa-IR/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "در حال احراز هویت...",
   "check": {
     "checking": "در حال بررسی...",
     "continue": "ادامه",

apps/user/locales/fi-FI/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Tunnistautuminen...",
   "check": {
     "checking": "Tarkistetaan...",
     "continue": "Jatka",

apps/user/locales/fr-FR/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Authentification en cours...",
   "check": {
     "checking": "Vérification en cours...",
     "continue": "Continuer",

apps/user/locales/hi-IN/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "प्रमाणित किया जा रहा है...",
   "check": {
     "checking": "सत्यापन हो रहा है...",
     "continue": "जारी रखें",

apps/user/locales/hu-HU/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Hitelesítés folyamatban...",
   "check": {
     "checking": "Ellenőrzés folyamatban...",
     "continue": "Folytatás",

apps/user/locales/ja-JP/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "認証中...",
   "check": {
     "checking": "検証中...",
     "continue": "続ける",

apps/user/locales/ko-KR/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "인증 중...",
   "check": {
     "checking": "확인 중...",
     "continue": "계속",

apps/user/locales/no-NO/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Autentiserer...",
   "check": {
     "checking": "Verifiserer...",
     "continue": "Fortsett",

apps/user/locales/pl-PL/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Uwierzytelnianie...",
   "check": {
     "checking": "Sprawdzanie...",
     "continue": "Kontynuuj",

apps/user/locales/pt-BR/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Autenticando...",
   "check": {
     "checking": "Verificando...",
     "continue": "Continuar",

apps/user/locales/ro-RO/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Autentificare...",
   "check": {
     "checking": "Se verifică...",
     "continue": "Continuă",

apps/user/locales/ru-RU/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Аутентификация...",
   "check": {
     "checking": "Проверка...",
     "continue": "Продолжить",

apps/user/locales/th-TH/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "กำลังตรวจสอบสิทธิ์...",
   "check": {
     "checking": "กำลังตรวจสอบ...",
     "continue": "ดำเนินการต่อ",

apps/user/locales/tr-TR/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Kimlik doğrulanıyor...",
   "check": {
     "checking": "Doğrulanıyor...",
     "continue": "Devam et",

apps/user/locales/uk-UA/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Аутентифікація...",
   "check": {
     "checking": "Перевірка...",
     "continue": "Продовжити",

apps/user/locales/vi-VN/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "Đang xác thực...",
   "check": {
     "checking": "Đang kiểm tra...",
     "continue": "Tiếp tục",

apps/user/locales/zh-CN/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "正在验证...",
   "check": {
     "checking": "正在验证...",
     "continue": "继续",

apps/user/locales/zh-HK/auth.json

@@ -1,4 +1,5 @@
 {
+  "authenticating": "正在驗證...",
   "check": {
     "checking": "正在驗證...",
     "continue": "繼續",

apps/user/services/common/index.ts

@@ -1,10 +1,12 @@
 // @ts-ignore
-/* eslint-disable */
+ 
 // API 更新时间：
 // API 唯一标识：
 import * as auth from './auth';
 import * as common from './common';
+import * as oauth from './oauth';
 export default {
   auth,
+  oauth,
   common,
 };

apps/user/services/common/oauth.ts

@@ -0,0 +1,80 @@
+// @ts-ignore
+/* eslint-disable */
+import request from '@/utils/request';
+
+/** Apple Login Callback POST /v1/auth/oauth/callback/apple */
+export async function appleLoginCallback(
+  body: {
+    code: string;
+    id_token: string;
+    state: string;
+  },
+  options?: { [key: string]: any },
+) {
+  const formData = new FormData();
+
+  Object.keys(body).forEach((ele) => {
+    const item = (body as any)[ele];
+
+    if (item !== undefined && item !== null) {
+      if (typeof item === 'object' && !(item instanceof File)) {
+        if (item instanceof Array) {
+          item.forEach((f) => formData.append(ele, f || ''));
+        } else {
+          formData.append(ele, JSON.stringify(item));
+        }
+      } else {
+        formData.append(ele, item);
+      }
+    }
+  });
+
+  return request<API.Response & { data?: any }>('/v1/auth/oauth/callback/apple', {
+    method: 'POST',
+    data: formData,
+    ...(options || {}),
+  });
+}
+
+/** Facebook Login Callback GET /v1/auth/oauth/callback/facebook */
+export async function facebookLoginCallback(options?: { [key: string]: any }) {
+  return request<API.Response & { data?: any }>('/v1/auth/oauth/callback/facebook', {
+    method: 'GET',
+    ...(options || {}),
+  });
+}
+
+/** Google Login Callback GET /v1/auth/oauth/callback/google */
+export async function googleLoginCallback(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.GoogleLoginCallbackParams,
+  options?: { [key: string]: any },
+) {
+  return request<API.Response & { data?: any }>('/v1/auth/oauth/callback/google', {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
+/** Telegram Login Callback GET /v1/auth/oauth/callback/telegram */
+export async function telegramLoginCallback(options?: { [key: string]: any }) {
+  return request<API.Response & { data?: any }>('/v1/auth/oauth/callback/telegram', {
+    method: 'GET',
+    ...(options || {}),
+  });
+}
+
+/** OAuth login POST /v1/auth/oauth/login */
+export async function oAuthLogin(body: API.OAthLoginRequest, options?: { [key: string]: any }) {
+  return request<API.Response & { data?: API.OAuthLoginResponse }>('/v1/auth/oauth/login', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || {}),
+  });
+}

apps/user/services/common/typings.d.ts

@@ -10,6 +10,12 @@ declare namespace API {
     updated_at: number;
   };
 
+  type AppleLoginCallbackRequest = {
+    code: string;
+    id_token: string;
+    state: string;
+  };
+
   type Application = {
     id: number;
     icon: string;
@@ -19,6 +25,9 @@ declare namespace API {
   };
 
   type ApplicationConfig = {
+    app_id: number;
+    encryption_key: string;
+    encryption_method: string;
     domains: string[];
     startup_picture: string;
     startup_picture_skip_time: number;
@@ -152,6 +161,7 @@ declare namespace API {
     invite: InviteConfig;
     currency: CurrencyConfig;
     subscribe: SubscribeConfig;
+    oauth_methods: string[];
   };
 
   type GetStatResponse = {
@@ -169,6 +179,16 @@ declare namespace API {
     tos_content: string;
   };
 
+  type GoogleLoginCallbackParams = {
+    code: string;
+    state: string;
+  };
+
+  type GoogleLoginCallbackRequest = {
+    code: string;
+    state: string;
+  };
+
   type Hysteria2 = {
     port: number;
     hop_ports: string;
@@ -205,6 +225,26 @@ declare namespace API {
     last_at: number;
   };
 
+  type OAthLoginRequest = {
+    /** google, facebook, apple, telegram, github etc. */
+    method: string;
+    redirect: string;
+  };
+
+  type OAuthLoginResponse = {
+    redirect: string;
+  };
+
+  type OAuthMethod = {
+    id: number;
+    platform: string;
+    config: Record<string, any>;
+    redirect: string;
+    enabled: boolean;
+    created_at: number;
+    updated_at: number;
+  };
+
   type OnlineUser = {
     uid: number;
     ip: string;

apps/user/services/user/typings.d.ts

@@ -19,6 +19,9 @@ declare namespace API {
   };
 
   type ApplicationConfig = {
+    app_id: number;
+    encryption_key: string;
+    encryption_method: string;
     domains: string[];
     startup_picture: string;
     startup_picture_skip_time: number;
@@ -226,6 +229,16 @@ declare namespace API {
     last_at: number;
   };
 
+  type OAuthMethod = {
+    id: number;
+    platform: string;
+    config: Record<string, any>;
+    redirect: string;
+    enabled: boolean;
+    created_at: number;
+    updated_at: number;
+  };
+
   type OnlineUser = {
     uid: number;
     ip: string;

apps/user/utils/common.ts

@@ -45,7 +45,7 @@ export function Logout() {
   if (!isBrowser()) return;
   cookies.remove('Authorization');
   const pathname = location.pathname;
-  if (!['', '/', '/auth', '/tos'].includes(pathname)) {
+  if (!['', '/', '/auth', '/tos', '/oauth'].includes(pathname)) {
     setRedirectUrl(location.pathname);
     location.href = `/auth`;
   }