[FN] React Native 회원가입 로그인 개발 일지 - Firebase Authentication

로그인과 회원가입을 구현하기 위해 Firebase Authentication를 사용하였다.
인터페이스는 아직 수정이 많이 필요하고 일단은 기능만 구현하였다.
 

1. Firebase 프로젝트에서 빌드 - Authentication로 이동하여 시작한다
 
2. 이메일과 패스워드를 받기 위해 로그인 방법으로는 이메일/비밀번호를 선택 - 사용 설정 체크 후 저장
 
3. authService.js
로그인과 관련된 함수를 정의한 authService.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();
}

 
4. 회원가입
입력하는 회원 정보는 "이메일, 비밀번호, 비밀번호 확인, 휴대폰 번호(인증 구현해야함), 생년월일" 이렇게만 입력을 받도록 하였다.

import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';
import { signUp } from '../authService';

const FirstSignupScreen = ({ navigation }: Props) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [phone, setPhone] = useState('');
  const [birthdate, setBirthdate] = useState('');
 };

 
회원가입 입력 조건을 만족해야 회원가입 완료 (추가 예정)

• 이메일 형식으로 입력
• 모든 회원정보 입력
• 비밀번호는 숫자, 문자, 특수문자 포함 8-20자로 입력
• 비밀번호와 비밀번호 체크가 일치할 경우

 
- 앞서 authService.js에서 정의한 회원가입 함수 signUp을 사용하여 Firebase Authentication에 입력한 이메일과 비밀번호로 계정을 생성한다 - userCredential에 저장
- userCredential 객체에서 사용자 ID(uid)를 온다
- 해당 사용자 uid에 나머지 회원정보인 이메일, 전화번호, 생년월일은 firestore database에 저장한다.
- 회원가입 완료 시 Alert 메시지 말고 수정 필요

const handleSignup = async () => {
    try {
    const userCredential = await signUp({ email, password });
    const { uid } = userCredential.user;

    await firestore().collection('users').doc(uid).set({
      email,
      phone,
      birthdate,
    });

    Alert.alert('성공', '회원가입이 완료되었습니다.');
    navigation.navigate('Login');
  } catch (error) {
    const errorMessage = (error as Error).message || '회원가입에 실패했습니다.';
    Alert.alert('오류', errorMessage);
  }
  };

 
추가로 입력한 비밀번호와 비밀번호 확인에 입력한 비밀번호가 같으면 체크 이모티콘이 나타나도록 하였다.

{password === confirmPassword && confirmPassword.length > 0 && (
              <Image
                source={require('../images/check_icon.png')} 
                style={styles.checkIcon}
              />
            )}

 
모든 정보를 제대로 입력하고 회원가입이 완료되면 Firebase Authentication에 저장되는 것을 확인할 수 있다.

 
Firestore Database에는 사용자 uid를 통해 회원가입 단계에서 입력한 해당 사용자의 이메일, 전화번호, 생년월일을 저장된 것을 확인할 수 있다.

 

이메일 인증, 전화번호 인증, 추가 입력해야 할 회원정보, UI 등 수정하기
 

5. 로그인 
가입이 완료된 이메일과 패스워드로 로그인 진행
회원가입때처럼 authService.js 에 signIn 을 불러와서 사용

import { signIn } from '../authService';

const LoginScreen = ({ navigation }: Props) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
const handleLogin = async () => {
    if (email === '' || password === '') {
      Alert.alert('오류', '아이디와 비밀번호를 모두 입력해주세요.');
      return;
    }

    try {
      const userCredential = await signIn({email, password});
      console.log('로그인 성공:', userCredential);
      navigation.navigate('Home');
    } catch (error) {
      console.error('로그인 실패:', error);
      Alert.alert('오류', '아이디 또는 비밀번호가 잘못되었습니다.');
    }
}
}

 

 
정상적으로 로그인 처리가 되어 홈 화면으로 넘어가는 것을 확인할 수 있다.