Merge pull request #112 from TripInfoWeb/dev_auth

google oauth 추가 및 백엔드 연결 확인
TripInfoWeb · Jul 10, 2024 · d76b36f · d76b36f
2 parents ad6acd8 + 09865d0
commit d76b36f
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 5 deletions.
diff --git a/src/app/api/auth/google/route.ts b/src/app/api/auth/google/route.ts
@@ -0,0 +1,6 @@
+import { NextResponse } from "next/server";
+
+export function GET() {
+  const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.GOOGLE_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL}&scope=email profile&prompt=select_account`;
+  return NextResponse.redirect(googleAuthUrl);
+}
diff --git a/src/app/api/auth/kakao/route.ts b/src/app/api/auth/kakao/route.ts
@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 
 export function GET() {
-  const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NODE_ENV === "development" ? process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY : process.env.KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}`;
+  const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URL}`;
   return NextResponse.redirect(kakaoAuthUrl);
 }
diff --git a/src/app/auth/loading/google/page.tsx b/src/app/auth/loading/google/page.tsx
@@ -0,0 +1,9 @@
+import AuthGoogleContainer from "@/containers/auth/AuthGoogleContainer";
+
+const Page = () => {
+
+  return (
+    <AuthGoogleContainer/>
+  );
+};
+export default Page
diff --git a/src/components/auth/SignIn.tsx b/src/components/auth/SignIn.tsx
@@ -43,7 +43,7 @@ const SignIn = () => {
         className={
           "relative mb-[3rem] flex h-[2.875rem] w-full items-center justify-center rounded-3xl outline outline-[1px] outline-offset-[-1px] outline-gray3"
         }
-        href={`https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.GOOGLE_CLIENT_ID}&redirect_uri=${process.env.GOOGLE_REDIRECT_URL}&scope=email profile&prompt=select_account`}
+        href="/api/auth/google"
       >
         <div className="absolute left-[1rem] top-[50%] aspect-square w-[1rem] translate-y-[-50%]">
           <Image

diff --git a/src/components/auth/SignUp.tsx b/src/components/auth/SignUp.tsx
@@ -30,7 +30,7 @@ const SignUp = () => {
         className={
           "relative mb-[0.75rem] flex h-[2.875rem] w-full items-center justify-center rounded-3xl bg-[#FEE500]"
         }
-        href={`https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.KAKAO_REST_API_KEY}&redirect_uri=${process.env.KAKAO_REDIRECT_URL}`}
+        href="/api/auth/kakao"
       >
         <div className="absolute left-[1rem] top-[50%] aspect-square w-[1rem] translate-y-[-50%]">
           <Image src={"/kakao-icon.svg"} alt={"kakao-logo-image"} fill={true} />
@@ -43,7 +43,7 @@ const SignUp = () => {
         className={
           "relative mb-[1.75rem] flex h-[2.875rem] w-full items-center justify-center rounded-3xl outline outline-[1px] outline-offset-[-1px] outline-gray3"
         }
-        href={`https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.GOOGLE_CLIENT_ID}&redirect_uri=${process.env.GOOGLE_REDIRECT_URL}&scope=email profile&prompt=select_account`}
+        href="/api/auth/google"
       >
         <div className="absolute left-[1rem] top-[50%] aspect-square w-[1rem] translate-y-[-50%]">
           <Image

diff --git a/src/containers/auth/AuthGoogleContainer.tsx b/src/containers/auth/AuthGoogleContainer.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import AuthLoading from "@/components/auth/AuthLoading";
+import useAuthStore from "@/store/authStore";
+import UrlQueryStringToObject from "@/utils/UrlQueryStringToObject";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+const AuthGoogleContainer = () => {
+  const router = useRouter();
+  const authStore = useAuthStore();
+
+    useEffect(() => {
+        const _queryStringObject = UrlQueryStringToObject<{
+          [key: string]: string;
+        }>(window.location.href);
+        const googleLogin = async () => {
+          try {
+            const response = await fetch(
+              `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/oauth2/login?type=google&redirectUrl=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL}&code=${_queryStringObject?.code}`,
+              {
+                method: "GET",
+                headers: {
+                  "Content-Type": "application/json;charset=utf-8",
+                  "Access-Control-Allow-Origin": "*",
+                },
+                credentials: "include",
+              },
+            );
+
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+
+        // const res = await response.json();
+        // res.accessToken 받아서 사용자 정보 받아오고 홈으로 이동
+        authStore.setUser({ nickname: "성공" });
+        router.push("/");
+      } catch (error) {
+        console.error("로그인 실패", error);
+        router.push("/auth/signin");
+      }
+    };
+
+    googleLogin();
+  }, []);
+
+  return <AuthLoading />;
+};
+
+export default AuthGoogleContainer;
diff --git a/src/containers/auth/AuthKaKaoContainer.tsx b/src/containers/auth/AuthKaKaoContainer.tsx
@@ -17,7 +17,7 @@ const AuthKaKaoContainer = () => {
         const kakaoLogin = async () => {
           try {
             const response = await fetch(
-              `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/oauth2/login?type=kakao&redirectUrl=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}&code=${_queryStringObject?.code}`,
+              `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/oauth2/login?type=kakao&redirectUrl=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URL}&code=${_queryStringObject?.code}`,
               {
                 method: "GET",
                 headers: {