[React] React로 로그인 기능 구현하기 (+ Firebase이용하여)

안녕하세요, 오늘 해볼 것은 React로 로그인 기능을 구현해보는 건데요!

 

Fireabase의 API로는 아래 기능들이 있습니다.

1. Authentication ; 회원가입, 로그인, 비밀번호 변경 등 계정 기능

2. FireStore ; firebase의 대표기능, 1달에 문서 쓰기 60만번까지 무료

3. 실시간 데이터베이스 ; 작은 데이터를 여러 번 보내는 서비스에 유리

4. Storage ; 파일 저장 가능, 5GB까지 무료

 

오늘 사용할 것은 1번 째의 Authentication기능입니다.

 

공식 문서는 아래 링크에 있습니다.

https://firebase.google.com/docs/reference/rest/auth

Firebase 인증 REST API

 

Authentication 기능을 구현하기에 앞서, REST API가 무엇인지 먼저 알아볼까요?
API는 Application Programming Interface의 약자로, 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성요소가 서로 통신할 수 있게 하는 매커니즘입니다. 여기서, 요청을 보내는 애플리케이션이 클라이언트, 응답을 보내는 애플리케이션이 서버입니다. API 종류에는 SOAP API, RPC API, WebSocket API, REST API가 있는데, 이 중 Firebase에서 사용하는 것은 REST API입니다.

REST API는 Representational State Transfer의 약자로, 클라이언트가 서버에 요청을 데이터로 전송하면 서버가 출력 데이터를 클라이언트에 반환하는 형태입니다.

 

우선 API_KEY가 필요합니다. Firebase 계정 생성 후, Authentication을 시작한후 프로젝트 설정에서 확인하실 수 있습니다.

저희는 이제 이 API_KEY를 Authentication 기능을 구현할 때 계속 사용할 것입니다.

 

가장 먼저 회원가입부터 해보겠습니다. 위 문서를 확인해보시면 아래와 같습니다.

클라이언트인 저희가 서버에 보내야할 것은 Request Body Payload이며, 구성으로 email, password, returnSecureToken이 있습니다. Request Body Payload는 body에 넣어서 보내줍니다. method는 문서에 적혀있는 대로 "POST"입니다.

const signupURL = "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=";
const apiKey = " ";
const signupResponse = await fetch(`${signupURL}${apiKey}`, {
  method: "POST",
  body: JSON.stringify({
  	email:emailInput,
    password:passwordInput,
    returnSecureToken:true,
  }),
  headers: {
    "Content-Type": "application/json",
  },
});
const signupResponseData = await signupResponse.json();
if (!signupResponse.ok) {
  throw new Error(signupResponseData.error.message);
}

JS는 기본적으로 비동기 처리를 합니다. 비동기 처리란, 특정 코드의 연산이 끝날 떄까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JS의 특징을 말합니다. 그런데, fetch같은 경우에 비동기 처리를 해버리면 서버로부터 데이터를 fetch하는 동안 다른 코드(예를 들어 받은 데이터 가공)를 실행하면 오류가 발생할 수 있습니다. 그래서 async-await를 이용해 동기 처리를 해주어야 합니다.

동기 처리를 안해주면 3번째 줄에 fetch를 실행하는 동안 14번째 줄에 .json()문이 실행되어 없는 데이터라고 출력할 것입니다.

받은 값을 json화 시킨 signupResponseData에는 문서의 Response Payload에 적혀 있는 회원의 idToken, email, refreshToken, expiresIn, localId들이 담겨 있을 것입니다.

 

로그인도 위와 동일한 방식으로 진행하면 됩니다.

그 외에도 익명으로 로그인, 비밀번호 초기화, 비밀번호 변경, 이메일 변경 등 다양한 기능들이 있습니다.

firebase를 이용하여 프론트엔드 개발자 혼자서도 인증 시스템을 구축할 수 있답니다 ^^

다음 번에는 구글 이메일로 로그인 하는 내용으로 돌아오겠습니다