Firebase - 이메일 & 비밀번호 로그인과 소셜 로그인(Github)

Firebase

 

✅ Setup

---

1. Firebase 프로젝트 생성

프로젝트 생성

 

2. Firebase 설치

npm install firebase

 

3. 콘솔에서 제공해주는 코드를 firebase.ts를 생성해 안에 넣어준다.

 

✅ 이메일 & 비밀번호 로그인

---

Firebase 콘솔의 Authentication에서 이메일 & 비밀번호 인증을 활성화한 다음, 코드에서 initialize한다.

getAuth(app)

import { getAuth } from "firebase/auth";
export const auth = getAuth(app);

 

createUserWithEmailAndPassword(auth, email, password)

회원 정보가 존재하지 않을 시 계정을 생성하고 로그인 시킨다.

UserCredential을 return한다. (operationType, providerId, user 등의 속성을 갖고 있다.)

    try {
      const credentials = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );
      await updateProfile(credentials.user, {
        displayName: name,
      });
      navigate("/");
    } catch (error) {
      if (error instanceof FirebaseError) {
        setError("error", {
          message: error.message,
        });
      }
    }

 

signInWithEmailAndPassword(auth, email, password)

회원 정보가 존재할 시 로그인 시킨다.

    try {
      await signInWithEmailAndPassword(auth, email, password);
      navigate("/");
    } catch (error) {
      if (error instanceof FirebaseError) {
        setError("error", {
          message: error.message,
        });
      }
    }

 

auth.signOut();

로그아웃 시킨다.

  const onLogOut = async () => {
    const ok = confirm("Are you sure you want to log out?");
    if (ok) {
      await auth.signOut();
      navigate("/login");
    }
  };

 

✅ Github 소셜 로그인

---

Firebase의 console에서 Github 로그인을 활성화 시킨다.

(Github OAuth 설정을 하고 client ID와 client secret을 넣어준다.)

new GithubAuthProvider()

Github 로그인 인증에 필요한 provider를 생성한다.

(Github OAuth 로그인을 구현할 때 사용하는 클래스)

 

로그인을 할 때 2개의 옵션이 있다.

1. signInWithPopup

2. signInWithRedirect

 

두 메서드 모두 auth와 provider를 arg로 받는다.

  const onClick = async () => {
    try {
      const provider = new GithubAuthProvider();
      await signInWithPopup(auth, provider);
      navigate("/");
    } catch (error) {
      console.log(error);
    }
  };