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

2025-01-20 23:50:42 +07:00
parent 652e0323fd
commit 5ed04c0a59
34 changed files with 327 additions and 12 deletions
@@ -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;
+}
@@ -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>
+  );
+}