Social(구글/깃헙) 로그인 구현

signInWithPopup()

팝업 기반 OAuth 인증 흐름을 사용하여 Firebase 클라이언트를 인증한다. 즉, 팝업창 열어 로그인 인증을 하는 메서드이다.

• 성공하면 공급자의 자격 증명과 함께 로그인한 사용자를 반환
• 로그인에 실패한 경우 오류에 대한 추가 정보가 들어 있는 오류 개체를 반환
• (참고)
  signInWithRedirect()를 사용하면 로그인 페이지로 리디렉션하여 사용자가 로그인하도록 요청한다. 리디렉션 방법은 모바일 장치에서 선호된다.

export declare function signInWithPopup(auth: Auth, provider: AuthProvider, resolver?: PopupRedirectResolver): Promise<UserCredential>;

Parameter	Type	Description
auth	Auth	The Auth instance.
provider	AuthProvider	인증할 공급자. 공급자는 OAuthProvider여야 한다. EmailAuthProvider와 같은 OAuth가 아닌 공급자는 오류를 발생시킨다.
resolver	PopupRedirectResolver	PopupRedirectResolver의 인스턴스. 이미 initializeAuth()에 제공되거나 getAuth()에 의해 제공될 경우에는 옵셔널하다.

1. GoogleAuthProvider()를 사용하여 Firebase로 인증하기

• Google provider object를 사용하여 Firebase로 인증한다.

signInWithPopup()를 사용하여 팝업 창을 열어 사용자에게 Google 계정으로 로그인하도록 요청하기

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
//
const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });

2. GithubAuthProvider()를 사용하여 Firebase로 인증하기

• GitHub provider object를 사용하여 Firebase로 인증한다.

signInWithPopup()를 사용하여 팝업 창을 열어 사용자에게 GitHub 계정으로 로그인하도록 요청하기

import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
//
const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });

보아하니 구글/깃헙 프로바이더 방식 둘 다 똑같다.

📍/routes/Auth.js

1. 소셜로그인 버튼에 name 추가

<div>
  <button name="google">Google 계정으로 계속하기</button>
  <button name="gitHub">GitHub 계정으로 계속하기</button>
</div>

2. 소셜로그인 버튼 클릭하면 실행될 함수 생성

const onSocialClick = (event) => {
  console.log(event.target.name);
};

3. 소셜로그인 버튼에 onClick 이벤트 실행시 onSocialClick 함수 실행되도록 추가

<div>
  <button name="google" onClick={onSocialClick}>
    Google 계정으로 계속하기
  </button>
  <button name="gitHub" onClick={onSocialClick}>
    GitHub 계정으로 계속하기
  </button>
</div>

4. 팝업으로 로그인 하도록 설정

import { useState } from "react";

//이메일, 비번으로 새로운 계정 생성 및 로그인 하기위해 아래 메서드 임포트하기
//getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  GoogleAuthProvider,
  GithubAuthProvider,
  signInWithPopup,
} from "firebase/auth";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(true);
  //error 스테이드를 만들자. 디폴트 값으로 비어 있는 텍스트 주기
  const [error, setError] = useState("");

  const auth = getAuth();

  //email, password에 사용하는 이벤트
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };

  //form에 사용하는 이벤트
  const onSubmit = async (event) => {
    event.preventDefault();
    //form submit하면 newAccount 스테이트로 확인하자!
    //newAccount가 참이면 계정 새로 만들고, 거짓이면 로그인하기
    try {
      if (newAccount) {
        await createUserWithEmailAndPassword(auth, email, password);
        setNewAccount(false);
      } else {
        await signInWithEmailAndPassword(auth, email, password);
      }
    } catch (error) {
      //에러가 생기면 error 스테이트에 넣어서 에러 메세지 띄우기
      //console.log(error.message);
      setError(error.message);
    }
  };

  //가입해야하는지 로그인해야 하는지 토글하는 함수: newAccount의 이전 값과 반대되는 값 리턴하기
  const toggleAccount = () => setNewAccount((prev) => !prev);

  //🔥🔥소셜로그인 버튼 클릭하면 실행될 함수 생성
  const onSocialClick = async (event) => {
    //console.log(event.target.name);
    const {
      target: { name },
    } = event;
    let provider;
    //🔥🔥타겟의 name에 따라(즉, 무슨 버튼이 눌리는지에 따라)
    if (name === "google") {
      //🔥provider 구글로 설정
      provider = new GoogleAuthProvider();
    } else if (name === "github") {
      //🔥provider 깃헙으로 설정
      provider = new GithubAuthProvider();
    }
    await signInWithPopup(auth, provider);
  };

  return (
    <div>
      <h1>로그인 페이지</h1>
      <p>로고 넣기</p>
      <form onSubmit={onSubmit}>
        <input
          type="email"
          placeholder="이메일"
          required
          value={email}
          name="email"
          onChange={onChange}
        ></input>
        <input
          type="password"
          placeholder="비밀번호"
          required
          value={password}
          name="password"
          onChange={onChange}
        ></input>
        <input type="submit" value={newAccount ? "가입하기" : "로그인"} />
        {/*error 보여주기*/}
        {error}
      </form>
      {/*newAccount(새로운 계정)가 참이면 로그인, 거짓이면 가입하기가 되는 토글 만들기 */}
      <button onClick={toggleAccount}>
        {newAccount ? "로그인" : "가입하기"}
      </button>
      <div>
        {/*🔥 버튼 만들고 onClick 이벤트에 onSocialClick 함수 연결*/}
        <button name="google" onClick={onSocialClick}>
          Google 계정으로 계속하기
        </button>
        <button name="github" onClick={onSocialClick}>
          GitHub 계정으로 계속하기
        </button>
      </div>
    </div>
  );
};

export default Auth;