React Native Firebase로 회원 인증하기

이 전 글에는 React Native 프로젝트와 Firebase를 연동하는 방법을 살펴보았다.

이제 Firebase로 회원 인증을 구현해보자.

 

Firebase 프로젝트 설정

먼저 이 전 글에서 생성한 Firebase 프로젝트에 접속해 왼쪽 사이드 메뉴에 Authentication을 클릭하고 시작하기 버튼을 클릭해준다.

 

이메일과 비밀번호를 사용해 예제를 구현해볼 것이기 때문에 이메일/비밀번호를 클릭한다. 나머지 제공업체들도 나중에 추가가 가능하다.

 

이메일/비밀번호를 사용 활성화해주고 저장 버튼을 클릭한다.

여기까지 했다면 이제 리액트 네이티브 프로젝트로 돌아가서 로그인, 회원가입, 로그아웃 기능을 구현해보자.

---

Firebase로 회원 인증 하기

프로젝트에 lib 디렉터리를 만들고, auth.js 파일을 만들어서 아래 코드를 작성한다.

import auth from "@react-native-firebase/auth";

export function signIn({email, password}) {
  return auth().signInWithEmailAndPassword(email, password);
}

export function signUp({email, password}) {
  return auth().createUserWithEmailAndPassword(email, password);
}

export function subscribeAuth(callback) {
  return auth().onAuthStateChanged(callback);
}

export function signOut() {
  return auth().signOut();
}

signIn, signUp, signOut은 알다시피 로그인, 회원가입, 로그아웃을 하는 함수이고, subscribeAuth는 앱을 가동할 때, 로그인 상태가 변경될 때 사용자 정보를 받아오는 함수를 등록한다.

이렇게 따로 함수를 구현해 사용하게 되면 Firebase가 아닌 다른 라이브러리로 인증을 구현하게 될 때 쉽게 전환이 가능하다.

 

이렇게 구현한 함수들을 그냥 컴포넌트에 불러와 사용하기만 하면 된다. 사용법이 정말 간단하다...!

import React, { useState } from "react";
import { Alert } from "react-native";
import { signIn, signUp } from "../lib/auth";

function SignInScreen() {
  ...
  
  const [form, setForm] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });
    
  const signUpSubmit = async () => { // 회원가입 함수
    const {email, password} = form;
    const info = {email, password};
    try {
      const {user} = await signUp(info);
      console.log(user);
    } catch (e) {
      Alert.alert("회원가입에 실패하였습니다.");
    }
  }
  
  const signInSubmit = async () => { // 로그인 함수
    const {email, password} = form;
    const info = {email, password};
    try {
      const {user} = await signIn(info);
      console.log(user);
    } catch (e) {
      Alert.alert("로그인에 실패하였습니다.");
    }
  }
	
  return ( ... );
  
}

export default SignInScreen;

form 객체의 email, password를 info 객체로 다시 묶어 위에서 구현했던 signIn, signUp 함수를 사용하였다.

회원가입 함수를 사용해보면 정상적으로 콘솔에 로그가 찍히는 것을 확인할 수 있다.

그럼 이제 로그인을 해볼 차례다.

마찬가지로 로그가 정상적으로 출력된다.

 

 

위에서 설정한 Firebase 프로젝트 > Authentication > Users 메뉴에 접속해 보면 회원 가입한 회원이 나타날 것이다.

Firebase 프로젝트 >  Authentication > Users

---

오류 예외 처리하기

위 예제에서 signUp, signIn 함수를 사용할 때 try catch문으로 감싸주었다.

만약 어떠한 이유로 오류가 발생해 catch문이 실행될 때 어떠한 오류인지 알아야 한다.

 

회원가입을 생각해 본다면 이미 가입된 이메일일 수도 있고, 로그인을 할 때는 해당 계정이 없는 경우, 비밀번호가 틀린 경우 일 수도 있다. 또는 다른 문제로 인해 오류가 발생할 수 도 있을 것이다.

이런 경우 catch문에 인수를 사용하면 어떠한 이유로 오류가 발생했는지 알 수 있다.

const signInSubmit = async () => { // 로그인 함수
    const {email, password} = form;
    const info = {email, password};
    try {
      const {user} = await signIn(info);
      console.log(user);
    } catch (e) {
      console.log(e.code);
      Alert.alert("로그인에 실패하였습니다.");
    }
  }

catch문에 인수 e의 code값(e.code)을 콘솔에 찍어 확인해보자.

회원 가입하지 않은 이메일로 로그인을 시도해보겠다.

e.code의 값을 확인해보니 auth/user-not-found가 출력되었다. 이 값을 통해 다른 사용자에게 콜백을 해줄 수 있을 것이다.

...


const [form, setForm] = useState({
  email: "",
  password: "",
  confirmPassword: "",
});

const resultMessages = {
  "auth/email-already-in-use": "이미 가입된 이메일입니다.",
  "auth/wrong-password": "잘못된 비밀번호입니다.",
  "auth/user-not-found": "존재하지 않는 계정입니다.",
  "auth/invalid-email": "유효하지 않은 이메일 주소입니다."
}

const signUpSubmit = async () => { // 회원가입 함수
  const {email, password} = form;
  const info = {email, password};
  try {
    const {user} = await signUp(info);
    console.log(user);
  } catch (e) {
    const alertMessage = resultMessages[e.code] ? 
      resultMessages[e.code] : "알 수 없는 이유로 회원가입에 실패하였습니다.";
    Alert.alert("회원가입 실패", alertMessage);
  }
}

const signInSubmit = async () => { // 로그인 함수
  const {email, password} = form;
  const info = {email, password};
  try {
    const {user} = await signIn(info);
    console.log(user);
  } catch (e) {
    const alertMessage = resultMessages[e.code] ? 
      resultMessages[e.code] : "알 수 없는 이유로 로그인에 실패하였습니다.";
    Alert.alert("로그인 실패", alertMessage);
  }
}

...

다시 회원 가입하지 않은 이메일로 로그인을 시도해보겠다.

정상적으로 설정한 alert문구가 나타나는 것을 확인할 수 있다.

 

 

 

 

React Native Firebase 회원 인증에 대한 공식 문서는 아래 링크에서 확인할 수 있다.

Authentication | React Native Firebase