/ STUDY

트위터 클론 코딩 (2) - Authentication

목차

시작에 앞서

만약 Router 대해 충분히 이해하지 못했다면 React JS로 영화 웹 서비스 만들기 무료 강의를 먼저 수강하시기를 추천드립니다. 추가로 간단하게 정리본을 보고 싶다면 해당 블로그를 참고하시면 됩니다.

Authentication이란?

Auth, OAuth, Authentication 모두 인증 기능과 관련있다. Firebase를 활용하면 코드 몇 줄로 쉽게 인증 기능을 구현할 수 있고, 추가적으로 다른 소셜 플랫폼의 로그인 기능을 이용할 수 있게 된다.

일반 Login 기능 구현하기

Firebase 설정하기

우선 미리 Firebase 페이지에서 App을 생성했다는 가정하에 Authentication 페이지에 들어가서 Auth 페이지에서 로그인 설정을 해줘야한다.

3-2-1

구현 코드

먼저 input에서 이메일, 비밀번호를 입력받고 회원정보 여부에 따라 Create Account OR Sign In를 통해 회원여부를 판단한다.

"파이어베이스.js";
export const authService = firebase.auth();

("로그인.js");
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);
    } else {
      data = await authService.signInWithEmailAndPassword(email, password);
    }
    console.log(data);
  } catch (error) {
    setError(error.message);
  }
};

Social Login 기능 구현하기

Firebase 설정

일반 로그인 경우와 마찬가지로 사용하고자하는 소셜 로그인 기능을 미리 활성화 해놓아야한다.

구현 코드

Firebase와 Auth javascript file에 다음과 같은 코드들을 추가해줘야한다.

"파이어베이스.js"
export const firebaseInstance = firebase;

"로그인.js"
const {
      target: { name },
    } = event;
    let provider;
    if (name === "google") {
      provider = new firebaseInstance.auth.GoogleAuthProvider();
    } else if (name === "github") {
      provider = new firebaseInstance.auth.GithubAuthProvider();
    }
    await authService.signInWithPopup(provider);
  };

유저 정보 불러오기

이전까지는 회원인지 아닌지 구분해주는 수문장의 기능을 담당했다. 하지만 실제로 필요한 것은 이 유저가 A유저인지 B유저인지와 같이 유저 정보이다.

코드 구조

앞서 Router를 활용해 사이트 구조를 미리 설계했다. App.js -> Route.js -> Components 구조로 코드가 Render될 예정이다. 회원 정보는 Component들이 필요할 가능성이 높기 때문에 상위 코드에서 불러오는 것이 좋을 것이라고 생각된다.

실제로 해당 수업의 경우, App.js에서 User 정보를 불러와서 아래 Component에 뿌려주는 식으로 코드를 작성했다.

구현 코드

useEffect를 활용해 페이지가 실행될 때마다 매번 user의 data를 불러와서 Object로 저장해서 아래 component들에 전달할 수 있도록 구현했다.

useEffect(() => {
  authService.onAuthStateChanged((user) => {
    if (user) {
      setUserObj({
        displayName: user.displayName,
        uid: user.uid,
        updateProfile: (args) => user.updateProfile(args),
      });
    } else {
      setUserObj(null);
    }
    setInit(true);
  });
}, []);

주의사항

firebase에서 user와 관련해서 전달하는 정보는 이름, uid, 프로필 사진 정도밖에 되지 않는다. 추가적인 정보를 저장하려면 database를 활용해서 저장하는 방법으로 구현해야한다.