feat: 깃허브 소셜 로그인

Author: DongEun02

app/(auth)/login/page.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { AuthCard } from '@/components/auth/AuthCard';
-import { FindPasswordModal } from '@/components/auth/FindPasswordModal';
-import { LoginForm } from '@/components/auth/LoginForm';
+import AuthCard from '@/components/auth/AuthCard';
+import FindPasswordModal from '@/components/auth/FindPasswordModal';
+import LoginForm from '@/components/auth/LoginForm';
 import { useState } from 'react';
 
-export default function Page() {
+const Page = () => {
   // 비밀번호 재설정 모달 state
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -25,4 +25,6 @@ export default function Page() {
       {isModalOpen && <FindPasswordModal onClose={handleCloseModal} />}
     </div>
   );
-}
+};
+
+export default Page;

app/(auth)/signup/page.tsx

@@ -1,11 +1,14 @@
-import { AuthCard } from '@/components/auth/AuthCard';
-import { SignupForm } from '@/components/auth/SignupForm';
-export default function Page() {
+import AuthCard from '@/components/auth/AuthCard';
+import SignupForm from '@/components/auth/SignupForm';
+
+const Page = () => {
   return (
     <div className="bg-background">
       <AuthCard title="회원가입" description="회원가입하여 계정을 생성하세요">
         <SignupForm />
       </AuthCard>
     </div>
   );
-}
+};
+
+export default Page;

components/auth/LoginForm.tsx

@@ -1,13 +1,41 @@
-import { FormField } from '@/components/auth/FormField';
+'use client';
+
+import FormField from '@/components/auth/FormField';
 import { FaGithub } from 'react-icons/fa';
-import { Button } from '@/components/auth/Button';
+import Button from '@/components/auth/Button';
 import Link from 'next/link';
+import { auth } from '@/lib/firebase';
+import {
+  GithubAuthProvider,
+  signInWithPopup,
+  UserCredential,
+} from 'firebase/auth';
+import { useRouter } from 'next/navigation';
 
 type LoginFormProps = {
   handleOpenModal: () => void;
 };
 
-export function LoginForm({ handleOpenModal }: LoginFormProps) {
+const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
+  const router = useRouter();
+
+  const githubProvider = new GithubAuthProvider();
+  const handleGithubLogin = async () => {
+    try {
+      const result: UserCredential = await signInWithPopup(
+        auth,
+        githubProvider
+      );
+      const user = result.user;
+      console.log('로그인 성공 : ', user);
+      router.push('/main');
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.log('로그인 에러 : ', error.message);
+      }
+    }
+  };
+
   return (
     <>
       <div className="space-y-6">
@@ -41,8 +69,10 @@ export function LoginForm({ handleOpenModal }: LoginFormProps) {
 
       <Button variant="github">
         <FaGithub className="text-xl" />
-        <span>Github로 로그인</span>
+        <span onClick={handleGithubLogin}>Github로 로그인</span>
       </Button>
     </>
   );
-}
+};
+
+export default LoginForm;

lib/firebase.ts

@@ -1,6 +1,6 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from 'firebase/app';
-import { getAnalytics } from 'firebase/analytics';
+// import { getAnalytics } from 'firebase/analytics';
 import { getAuth } from 'firebase/auth';
 import { getFirestore } from 'firebase/firestore';
 // TODO: Add SDKs for Firebase products that you want to use
@@ -20,7 +20,7 @@ const firebaseConfig = {
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
-const analytics = getAnalytics(app);
+// const analytics = getAnalytics(app);
 
 export const auth = getAuth(app);
 export const db = getFirestore(app);