[React] TODO LIST 만들기 (4) - 구글 계정으로 로그인 하기

1. 들어가기 전

이제 로그인의 마지막 파트 구글 계정으로 로그인을 해보겠습니다.

2. 목표

• firesbase의 GoogleAuthProvider 을 사용하여 구글 계정으로 로그인 한다.
• 구글계정으로 로그인 한 유저 정보를 user collection에 저장한다.
• 로그인 후 메인 페이지로 이동한다.

3. 로그인 페이지 수정

src/pages/login.tsx

추가한 부분만 작성하겠습니다.

...

// FIREBASE
import { firebaseAuth, fireStoreJob } from "../initFirebase";
import {
  signInWithEmailAndPassword,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";
import { collection, addDoc } from "firebase/firestore";

// CSS
import GoogleIcon from "@mui/icons-material/Google";


export const Login = () => {
 // ... 기존 코드 
    const onClickGoogle = async (e: any) => {
    const provider = new GoogleAuthProvider();
    await signInWithPopup(firebaseAuth, provider)
      .then(async (result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential?.accessToken;
        const user = result.user;

        await addDoc(collection(fireStoreJob, firestore_path), {
          uid: user.uid,
          displayName:user.displayName,
          date_created: moment().utc().format(),
        });
        navigate("/");
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.warn(`${errorCode - errorMessage}`);
      });
  };
}

  return (
    <UserForm>
      <div className={"doc-title"}>
        <span>Login</span>
      </div>
      <article className={"user-form-article"}>
        <div className={"user-form-wrap"}>
          <div className={"user-form"}>
			
            <!--form-->
            
            <div className={"google-btn"}>
              <Button
                onClick={onClickGoogle}
                name={"google"}
                variant={"outlined"}
                type={"button"}
              >
                <GoogleIcon style={{ marginRight: "5px" }} />
                Login with Google account
              </Button>
            </div>
          </div>
        </div>
      </article>
    </UserForm>
  );

📌 Firebase 공식문서 - Google을 사용하여 인증

---

드디어 계정 생성 부분을 완료했습니다.
다음 시간부터는 TODO LIST를 만들어보도록 하겠습니다.