1. firebase를 이용하여 로그인 하기

Sohyeon Park·2022년 8월 12일
0

바닐라 자바스크립트를 이용한 클론코딩 프로젝트가 끝나고 바로 리액트 공부를 시작했다!
새로운 언어를 익히는데에 기본적인 개념 공부도 반드시 중요하지만, 실습하는 것도 중요하다는 생각에 기본적인 사용법과 문법을 익힌 후 새 프로젝트를 만들어 보기로 했다.
해당 프로젝트는 순수 나의 아이디어로 만들어질 웹 페이지이며 자세한 사항은 모든 기능이 추가된 후 css까지 작성한 최종본이 완성되었을때 포스팅할 예정이다.

현재 웹 페이지의 가장 기본적인 단계인 로그인 페이지를 만들고 있다. 이 부분에서 나는 firebase를 사용하기로 했다.

🪄 firebase란?

  • 구글의 모바일 플랫폼으로 고품질 앱을 빠르게 개발하는데 도움을 준다. (공식 사이트 설명)
  • 인증, 데이터 베이스, 호스팅 등 다양한 앱을 제공하며 사용 방법이 간편하다!

그리고 firebase에서 구글, 깃허브, 페이스북 등 다양한 sns를 이용한 로그인도 가능하다!
이 게시글은 튜토리얼이 아닙니다.

firebase에서 프로젝트를 하나 생성한다. 나는 내 프로젝트에 걸맞는 이름을 붙였다. 나중에 완성될 서비스의 이름이다!

프로젝트로 들어가면 빌드에 다양한 서비스들을 제공하고 있다. 나는 여기서 데이터베이스(세번째)와 인증(첫번째)을 사용하고 있다. 나중에 필요한 기능이 생기면 더 추가해보도록 할 것이다.
데이터베이스는 리뷰를 다루기 위해 추가하였고, 인증은 이메일과 구글로 했다.

시험삼아 나의 구글 아이디로 로그인을 시도했더니 잘 되는 것을 알 수 있다.

그리고 이렇게 다양한 로그인 방법을 추가할 수 있다. 반드시 코드를 작성하기 전에 여기서 로그인 제공업체를 추가해주어야 한다!

처음에는 좀 두려웠다. 이걸 어떻게 하지..? 너무 어려운거 아닌가...
근데 생각보다 너무 쉽다! firebase에서 모든 방법을 친절히 제공해주고 있기때문에 그대로 사용하기만 하면 된다!
위의 이미지처럼 코드도 친절하게 알려주고 있어 그대로 복사해서 내 코드에 맞게 작성하면 된다.

const loginGoogle = async (e) => {
    let provider;
    if (e.target.name === "google") {
      provider = new GoogleAuthProvider();
    }
    await signInWithPopup(authService, provider);
  };

구글을 이용한 로그인의 코드가 5줄이면 끝난다. 이 5줄로 구글 로그인이 가능해지는 매직. (물론 전체 코드는 이것보다 길지만 입맛에 맞게 수정 가능하고, 모두 async를 사용하므로 이 부분만 주의해주면 된다.)
이렇게 간편한줄 몰랐다! 개인 프로젝트 만들때 꾸준히 사용하면 좋을 것 같다.

profile
예비 프론트엔드 개발자입니다 !

0개의 댓글