[React Native][Firebase] 로그인/회원가입 기능 사용하기

리액트 네이티브 expo에서 파이어베이스 회원가입/로그인을 구현해 볼 것이다.
회원가입/로그인 기능 구현에 앞서, Firebase를 React Naive에 연결해주어야 한다.

파이어베이스

파이어베이스 회원가입하고 web으로 프로젝트를 만든다
프로젝트를 만들면 json형식의 파일이 보일텐데 그대로 긁어와 react native프로젝트에 firebase.json이라는 파일로 만들어준다.

{
    "apiKey": "",
    "authDomain": "",
    "databaseURL": "",
    "projectId": "",
    "storageBucket": "",
    "messagingSenderId": "",
    "appId": "",
    "measurementId": ""
  }

databaseURL은 파이에베이스 스토리지 쪽에서 긁어왔는데 데이터베이스 안쓸거면 추가할 필요없다.

리엑트 네이티브에 파이어베이스를 설치한다.

npm install --save @react-native-firebase/app

firebase.js

import { initializeApp } from 'firebase/app';
import {getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';
import config from '../../firebase.json'; //firebase.json위치

const app = initializeApp(config);
const auth = getAuth(app);



export const getCurrentUser = () => {
  const { uid, displayName, email } = auth.currentUser;
  return { uid, name : displayName, email};
};


export const login = async ({email, password}) => {
  const { user } = await signInWithEmailAndPassword(auth, email, password);
  return user;
};

export const logout = async () => {
  return await auth.signOut();
};

export const signup = async ({name, email, password}) => {
  
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
const user = userCredential.user;
await user.updateProfile({
  displayName: name,
  // photoURL: "some_photo_url" // 프로필 사진을 추가하려면
});
  return user;
 
};

다른 파일에서 firebase.js를 import하고 위 함수들을 호출하면 된다.