[RN, Firebase] Firebase로 사용자 인증 받기

Firebase를 이용하면 가입된 사용자 인증도 받을 수 있다.

 

파이어베이스에 임시계정 추가하기

파이어베이스 프로젝트의 Authenification 에 들어가서 임시로 사용할 사용자를 추가한다.

(ID, 비밀번호 임의로 정해주면 된다)

 

Firebase 인증 시작하기

react native에서 firebase를 사용하기 위해서는 firebase를 설치하고, firebase 앱 객체를 만들어야 한다

 

1. firebase를 설치하기

npm install firebase

2. 앱에서 Firebase를 초기화하고 Firebase 앱 객체를 만든다.

import { initializeApp } from 'firebase/app';
import config from "../firebase.json";

const app = initializeApp(config);

config는 내가 만든 파이어베이스 프로젝트의 configuration이다.

내 프로젝트에 들어가서 찾을 수 있다.

React native으로 만든 App 파일들의 최상위에 firebase.json파일을 만들어 config내용을 저장해두고, import해서 사용했다.

 

signInWithEmailAndPassword()

firebase 문서에서 웹 시작하기의 API참조 - auth - 개요 문서로 가면 인증에 사용할 수 있는 함수를 확인할 수 있다.

( 인증 패키지 : https://firebase.google.com/docs/reference/js/auth?authuser=0#functions  )

 

firebase인증에서 로그인 시 이메일과 비밀번호를 같이 사용하는 함수는 signInWithEmaiAndPassword(); 밖에 없다.

사용자 로그인을 위해 signInWithEmailAndPassword()를 사용한다.

( signInWithEmailAndPassword() : https://firebase.google.com/docs/reference/js/auth?authuser=0#signinwithemailandpassword )

export declare function signInWithEmailAndPassword(auth: Auth, email: string, password: string): Promise<UserCredential>;

매개변수로 auth, email, password를 받고, <UserCredential>를 반환한다.

 

App 내에서는 아래와 같이 사용한다.

// import { initializeApp } from 'firebase/app';
// import config from "../firebase.json";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
 
// const app = initializeApp(config);
 
const auth = getAuth(app);
 
export const signin = async ({ email, password }) => {
  const { user } = await signInWithEmailAndPassword(auth, email, password);
  return user;
};

아까 설정한 firebase 앱 객체를 사용한다.

getAuth와 signInWithEmailAndPassword를 사용한다. 등록되어 있는 email과 password를 입력하면, user 객체를 반환한다. 내가 작성한 코드는 async/await을 사용했는데 firebase 문서에는 .then()/.catch()를 사용한다. 아래 사이트 참고.

( 기존 사용자 로그인 : https://firebase.google.com/docs/auth/web/start?authuser=0#sign_in_existing_users  )

 

signInWithEmailAndPassword에서 반환되는 userCredential은 다양한 정보를 가지고 있다. 그 중 user만 사용하기 위해 { user } 로 user정보만 받아오고, 반환한다.

( 분해할당 참고 : https://joylee-developer.tistory.com/173 ) 

로그인 기능을 가진 screen에서 signin함수를 import해서 사용한다.

// Signin.js
// 로그인 기능을 가진 Screen
 
import { signin } from "../firebase";
 
const _handleSigninBtnPress = async () => {
  try {
    const user = await signin({ email, password });
    navigation.navigate("Profile", { user });
  } catch (e) {
    console.log(e);
  }
};

input에서 입력받은 email과 password를 넘겨서 인증을 확인한다.

성공적으로 인증하고 나면 Profile 화면으로 이동하며 user를 넘겨준다.

 

user 내의 사용자 정보나 프로필 사진 정보를 사용해 메신저 어플에 사용한다.

 

 

참고한 사이트

https://firebase.google.com/docs/reference/js/auth?authuser=0#signinwithemailandpassword

인증 패키지  |  Firebase

https://firebase.google.com/docs/auth/web/start?authuser=0#sign_in_existing_users

웹사이트에서 Firebase 인증 시작하기  |  Firebase Documentation

https://firebase.google.com/docs/reference/js/v8/firebase.auth#usercredential

auth | JavaScript SDK  |  Firebase

https://firebase.google.com/docs/reference/js/v8/firebase.User

User | JavaScript SDK  |  Firebase