개요

이번 프로젝트에는 별도의 백앤드 포지션이 없다.

따라서 firebase를 통해 간단한 서버를 구현하여 회원 정보를 관리할 예정이다.

1. firebase로 프로젝트 연동

1) firebase 프로젝트 만들기

먼저, firebase를 통해 프로젝트를 만들어준다.
현재 개발할 프로젝트의 이름으로 진행하면 된다.

2) 앱 추가하기

프로젝트 생성이 완료되었다면 다음과 같은 창으로 연결된다. 앱을 추가하여 시작하기 부분에서 본인의 프로젝트에 맞는 옵션을 선택하여 진행한다.
필자는 웹 부분을 선택하여 진행하였다.

3) Firebase SDK 추가

본인의 프로젝트 폴더에 firebase.js 파일을 생성하여 SDK를 추가한다.

import { initializeApp } from "firebase/app";

const firebaseConfig = {
apiKey: "your-api-key",
authDomain: "[your-project-id.firebaseapp.com](http://your-project-id.firebaseapp.com/)",
projectId: "your-project-id",
storageBucket: "[your-project-id.appspot.com](http://your-project-id.appspot.com/)",
messagingSenderId: "your-sender-id",
appId: "your-app-id",
measurementId: "your-measurement-id" // 웹 애널리틱스를 사용하는 경우
};

// Firebase 초기화
const app = initializeApp(firebaseConfig);

해당 작업을 통해 다양한 Firebase 서비스를 사용할 수 있게 된다.

2. 로그인 기능 구현해보기

1) 사용자 추가

현재 서버에는 별도로 가입된 사용자가 없기 때문에 테스트를 위한 사용자를 추가한다.

왼쪽 메뉴에서 빌드 > Authentication > 사용자에 임시 사용자를 추가하자.

2) SDK 수정

먼저 Auth에 대한 내용을 사용하기 위해 다음을 import 한다.

import { getAuth, getReactNativePersistence } from "firebase/auth";

• 필자는 로그인 여부에 따라 로컬에 저장할 내용이 있어 다음을 가져왔다.

// Firebase Auth 초기화
const auth = getAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage),
});

export { auth };

그 다음 auth를 초기화하여 사용할 수 있게 한다.

3) 로그인 기능 구현하기

로그인 기능을 구현할 Screen에 다음을 import 해준다.

import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../../data/firebase";

• 전자는 email과 password로 로그인할 수 있도록 signInWithEmailAndPassword 메서드를 호출,
• 후자는 아까 작성한 SDK 내부의 auth 객체를 불러온 것이다.

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

공식 문서에 따르면 다음의 함수를 통해 유저의 가입 정보를 서버에서 확인하고, 로그인 여부를 판단해준다.
signInWithEmailAndPassword() 함수의 경우, 3개의 파라미터를 받는다.

• auth: Firebase Authentication 객체로, 사용자 인증 여부를 저장
• email: 사용자의 email 주소
• password: 사용자의 password

try {
      await signInWithEmailAndPassword(auth, emailText, passwordText); // Firebase Auth로 로그인 시도
      showToast("로그인 되었습니다"); // 로그인 성공 메시지
      loginCheck();
    } catch (error) {
      showToast("아이디 및 비밀번호 정보가 없습니다"); // 에러 메시지 출력
    }

필자는 위와 같이 작성했다.
서버에 정보가 있는 경우, 안내 메시지와 함께 메인 화면으로 넘어가고
없는 경우, 안내 메시지만 출력된다.
이렇게 하여 로그인 기능을 구현하였다.