React Native X Expo X 파이어 베이스 회원가입 및 로그인 구현 및 Authentication & Cloud Firestore 기능활용

저번 포스팅에서 

Authentication & Cloud Firestore

서버 및 기능 구현을 완료하였습니다

 

2022.07.20 - [Server/Firebase] - React Native X Expo X 파이어 베이스 Authentication 및 Cloud Firestore 서버 구축

React Native X Expo X 파이어 베이스 Authentication 및 Cloud Firestore 서버 구축

 

 

---

 

회원가입 구현하기

firebase의 인증 기능을 사용하기 위해 

파이어 베이스의 함수를 호출해서 결과값을 받아 인증 및  회원가입을 진행하게 됩니다.

이때 고객의 기입정보를 데이터 베이스에 저장하며

인증 테이블에 고유키 값과 비밀번호도 저장하게 됩니다.

 

직관적으로 관리하기위해

firebaseApi.js 파일을 만들고 아래와 같이 코드 작성을 해서 

필요할 때 import 하여 사용합니다.

 

 

회원가입 폼 이미지

 

 

회원가입 폼에서 등록버튼을 누르면

registration() 함수를 호출하여

아래와 같은 함수를 실행하게 됩니다

 

 

import * as firebase from "firebase";
import "firebase/firestore";
import {
  Alert
} from "react-native";

export async function registration(nickName, email, password, navigation) {
  try {
    console.log(nickName, email, password)
    await firebase.auth().createUserWithEmailAndPassword(email, password);
    const currentUser = firebase.auth().currentUser;
    const db = firebase.firestore();
    db.collection("users")
      .doc(currentUser.uid)
      .set({
        email: currentUser.email,
        nickName: nickName
      });
    Alert.alert("회원가입 성공!")
    navigation.push("TabNavigator")

  } catch (err) {
    Alert.alert("무슨 문제가 있는 것 같아요! => ", err.message);
  }
}

 

 

회원가입을 진행하면 

firebase.auth().createUserWithEmailAndPassword(); 함수를 사용해서 

기입한 메일과 uid의 고유번호를 생성해서 식별자 테이블에 정보를 저장하게 됩니다

 

이때 중요한 것은 비동기(async/await)가 정말 중요합니다

회원가입이 끝날 때까지 다른 작업은 안 하는 것이 좋겠지요?

 

그리고 firebase.auth().currentUser 함수를 사용하게 되면

현재 자신의 uid와 email 정보를 조회할 수 있습니다.

 

또한, 그 정보를 가지고 데이터베이스에 컬렉션의 상위는 users에 uid를 저장합니다

그리고 email과 nickName을 같이 지정하여 저장합니다.

 

 

 

식별자 데이터 생성 함수와 데이터 베이스에 저장하는 함수

 

 

 

위의 함수를 실행하게 되면 아래와 같이 저장됩니다

아래에 식별자는 자신의 이메일이 저장이 됩니다

사용자 uid는 고유한 키값으로 파이어 베이스에서 생성해줍니다

 

 

 

 

반응형

 

 

 

식별자 테이블에 정보가 저장된다

 

 

컬렉션의 user와 문서는 사용자 uid가 저장되며 필드는 

회원의 정보가 저장된 것을 확인할 수 있습니다

 

 

 

데이터 정보

 

 

 

위의 정보는 아래의 코드로 표현할 수 있습니다

 

 

 

{
    users : {
        IkafkITYpGXfYlxLsqU1W2uD2XC2 : {
            email : "sparta@gmail.com",
            nickName: "Gunhee"
        }
    }
}

 

 

 

로그인 구현하기

로그인 폼에서 아래와 같은 함수를 실행해서 

firebase.auth().signInWithEmailAndPassword(); 함수를 

호출해서 기입한 정보들이 현재 식별자 테이블에 있는지 확인을 합니다

 

로그인에 성공하면 탭 내비게이션 메인 페이지로 이동하게 됩니다

 

 

 

export async function signIn(email, password, navigation) {
  try {

    await firebase.auth().signInWithEmailAndPassword(email, password)
    navigation.push("TabNavigator")

  } catch (err) {
    Alert.alert('로그인에 문제가 있습니다! ', err.message);
  }
}

 

 

이렇게 회원가입 및 로그인 기능을 구현하였습니다

구글 파이어 베이스를 사용하면

정말 간편하게 구현할 수 있었습니다

 

이렇게 한 개씩 하다 보면 조금도 숙달이 되겠지요?

비동기 부분도 한 번씩 더 보고 더 깊게 공부를 해보아야겠다는

생각하게 되었습니다.

 

그럼 오늘도 파이팅 하시고~!

즐거운 대모험이 되시길 바랍니다!!

 

파이팅!!