트위터 클론코딩 - 트위터에 소셜 로그인 추가하기

목표 - signInwithPopup 함수를 사용하여 소셜 로그인 기능을 넣자!

 

 

 

 

액션1 - 소셜 로그인 버튼에서 name 속성 사용하기

 

깃허브와 소셜 로그인을 구분하려면 event.target.name 속성을 이용하면 된다!

 

이벤트에는 name 속성이 있으니까 이를 이용해서 소셜 로그인을 분기

 

import { authService } from "fbase";
import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(true);
  const [error, setError] = useState("");
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  const onSubmit = async (event) => {
    event.preventDefault();
    try {
      let data;
      if (newAccount) {
        data = await authService.createUserWithEmailAndPassword(
          email,
          password
        );
        //create newAccount
      } else {
        data = await authService.signInWithEmailAndPassword(email, password);
        //log in
      }
      console.log(data);
    } catch (error) {
      setError(error.message);
    }
  };

  const toggleAccount = () => setNewAccount((prev) => !prev);

  const onSocialClick = (event) => {
    console.log(event.target.name);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          name="email"
          type="email"
          placeholder="Email"
          required
          value={email}
          onChange={onChange}
        />
        <input
          name="password"
          type="password"
          placeholder="password"
          required
          value={password}
          onChange={onChange}
        />
        <input type="submit" value={newAccount ? "Create Account" : "Log In"} />
        {error}
      </form>
      <span onClick={toggleAccount}>
        {newAccount ? "Sign In" : "Create Account"}
      </span>
      <div>
        <button onClick={onSocialClick} name="google">
          Continue with Google
        </button>
        <button onClick={onSocialClick} name="github">
          Continue with Github
        </button>
      </div>
    </div>
  );
};

export default Auth;

onClick 이벤트를 넣어준다.

 

 

 

 

onSocial 함수에서 버튼이 클릭될때마다 name에 맞는 속성값이 console창에 뜨는것을 볼 수 있다.

 

 

 

액션 2 - 소셜 로그인을 위해 firebaseInstance 추가하기

 

소셜 로그인에 필요한 provider 를 호출하기 위해 firebase 전체를 firebaseInstance로 익스포트 해준다.

firebaseInstance 익스포트 후에는 리액트 서버 재시작을 해야함.

 

 

 

 

export const firebaseInstace = firebase;
export const authService = firebase.auth();

 

 

 

액션 3 - provider 적용하기

 

onClick 프롭스에 onSocialClick 함수를 지정해서 소셜 로그인 버튼이 구글이면 구글 소셜 로그인 함수를

깃허브면 깃허브 소셜로그인 함수를 실행하도록!

const onSocialClick = (event) => {
    const {
      target: { name },
    } = event;
    let provider;
    if (name === "google") {
      provider = new firebaseInstace.auth.GoogleAuthProvider();
    } else if (name === "github") {
      provider = new firebaseInstace.auth.GithubAuthProvider();
    }
  };

 

 

provider에 대입한 것은 "소셜 로그인 서비스 제공 업체" 정도로 생각할 수 있음

구글이면  GoogleAuthProvider()가 소셜 로그인 서비스를 제공하고,

깃허브면 GithubAuthProvide()가 소셜 로그인 서비스를 제공함.

 

소셜 로그인 업체 이름, 현재 사용자 정보, 소셜 로그인 요청 주소 등과 같은것 전부 signWithPopup 함수에 들어있음

 

 

액션4 - 소셜 로그인 완성

 

const onSocialClick = async (event) => {
    const {
      target: { name },
    } = event;
    let provider;
    if (name === "google") {
      provider = new firebaseInstace.auth.GoogleAuthProvider();
    } else if (name === "github") {
      provider = new firebaseInstace.auth.GithubAuthProvider();
    }

    const data = await authService.signInWithPopup(provider);
    console.log(data);
  };

 

 

소셜 로그인을 진행하는 signWithPopup 함수는 비동기 작업이라서 async-await 문을 사용해야함.

provider를 signWithPopup 함수 인자로 넘겨 소셜 로그인을 시도하는 것.

 

 

구글 로그인을 누르면 이렇게 뜬다.!