Merge pull request #439 from boostcampwm-2024/feat/google-github-oauth

✨ feat: OAuth 로그인 API 연동 및 백엔드 보완

Author: junyeokk

client/src/components/auth/AuthSocialLoginButtons.tsx

@@ -7,10 +7,16 @@ import { Button } from "@/components/ui/button.tsx";
 import { useCustomToast } from "@/hooks/common/useCustomToast.ts";
 
 import { TOAST_MESSAGES } from "@/constants/messages.ts";
+import { BASE_URL, OAUTH } from "@/constants/endpoints.ts";
 
 export const AuthSocialLoginButtons = () => {
   const { toast } = useCustomToast();
-  const handleSocialLogin = () => {
+
+  const handleSocialLogin = (provider: "google" | "github") => {
+    window.location.href = `${BASE_URL}${OAUTH.LOGIN}?type=${provider}`;
+  };
+
+  const handleNotPrepared = () => {
     toast(TOAST_MESSAGES.SERVICE_NOT_PREPARED);
   };
 
@@ -26,19 +32,19 @@ export const AuthSocialLoginButtons = () => {
       </div>
 
       <div className="grid gap-2">
-        <Button variant="outline" className="w-full" onClick={handleSocialLogin}>
+        <Button variant="outline" className="w-full" onClick={() => handleSocialLogin("github")}>
           <GitHub />
           <span className="text-muted-foreground">Github로 계속하기</span>
         </Button>
-        <Button variant="outline" className="w-full" onClick={handleSocialLogin}>
+        <Button variant="outline" className="w-full" onClick={() => handleSocialLogin("google")}>
           <Google />
           <span className="text-muted-foreground">Google로 계속하기</span>
         </Button>
-        <Button variant="outline" className="w-full" onClick={handleSocialLogin}>
+        <Button variant="outline" className="w-full" onClick={handleNotPrepared}>
           <Naver className="text-[#03C75A]" />
           <span className="text-muted-foreground">네이버로 계속하기</span>
         </Button>
-        <Button variant="outline" className="w-full" onClick={handleSocialLogin}>
+        <Button variant="outline" className="w-full" onClick={handleNotPrepared}>
           <Kakao className="text-[#FEE500]" />
           <span className="text-muted-foreground">카카오로 계속하기</span>
         </Button>

client/src/constants/endpoints.ts

@@ -40,3 +40,7 @@ export const USER = {
   LOGIN: "/api/user/login",
   CERTIFICATE: "/api/user/certificate",
 };
+
+export const OAUTH = {
+  LOGIN: "/api/oauth",
+};

client/src/pages/OAuthSuccessPage.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { useAuthStore } from "@/store/useAuthStore.ts";
+
+export const OAuthSuccessPage = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { setUserFromToken } = useAuthStore();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const accessToken = searchParams.get("token");
+
+    if (accessToken) {
+      setUserFromToken(accessToken);
+      navigate("/", { replace: true });
+    } else {
+      navigate("/signin", { replace: true });
+    }
+  }, [location, navigate, setUserFromToken]);
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <p className="text-lg">로그인 처리 중입니다...</p>
+    </div>
+  );
+};

client/src/routes/index.tsx

@@ -13,6 +13,7 @@ const Profile = lazy(() => import("@/pages/Profile"));
 const SignIn = lazy(() => import("@/pages/SignIn"));
 const SignUp = lazy(() => import("@/pages/SignUp"));
 const UserCertificate = lazy(() => import("@/pages/UserCertificate"));
+const OAuthSuccessPage = lazy(() => import("@/pages/OAuthSuccessPage"));
 
 interface RouterProps {
   location: Location;
@@ -63,6 +64,14 @@ export const AppRouter = ({ location, state }: RouterProps) => {
             </Suspense>
           }
         />
+        <Route
+          path="/oauth-success"
+          element={
+            <Suspense fallback={<Loading />}>
+              <OAuthSuccessPage />
+            </Suspense>
+          }
+        />
         <Route
           path="/user/certificate"
           element={

server/src/user/module/user.module.ts

@@ -32,7 +32,7 @@ import { UserScheduler } from '../scheduler/user.scheduler';
         google,
         github,
       }),
-      inject: [GoogleOAuthProvider],
+      inject: [GoogleOAuthProvider, GithubOAuthProvider],
     },
   ],
   exports: [UserRepository, UserService],