[React Native] RN Firebase 인증하기 - 이메일 회원가입

이번 시간에는 리액트 네이티브 회원가입 하는 방법에 대해 알려드리도록 하겠습니다.

 

아래 작업이 귀찬으신 분들께서는 맨 아래 전체코드를 작성해 놓았습니다.

 

Install(설치하기)

아래 코드를 이용하여 라이브러리를 설치하도록 합니다.

yarn add @react-native-firebase/auth

상태 변수 만들기

state 상태 변수 코드를 작성해 줍니다.

    const [initializing, setInitializing] = useState(true);
    const [user, setUser] = useState();
    const [ registerEmail, setRegisterEmail ] = useState("");
    const [ registerPassword, setRegisterPassword ] = useState("");

로그인 상태 유지

회원가입 후 로그인 상태 유지가 되도록 코드를 작성해 줍니다.

 

    function onAuthStateChanged(user) {
      setUser(user);
      if (initializing) setInitializing(false);
    }

    useEffect(() => {
      const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
      return subscriber; // unsubscribe on unmount
    }, []);

    if (initializing) return null;

회원가입 함수 만들기

회원가입을 버튼을 눌렀을 때 firebase에 자료가 입력 될 수 있도록 코드를 작성합니다.

    const register = async () => {
      try {
        const user = await auth().createUserWithEmailAndPassword(registerEmail, registerPassword)
        console.log('User account created & signed in!');
      } catch(error) {
        console.log(error.message);
      }
   };

회원가입 디자인 만들기

회원가입 할 수 있도록 간단한 디자인을 만드시면 됩니다.

  if (!user) {
      return (
        <View>
          <Text>Login</Text>
        </View>
      );
    }
  
    return (
      <View>
        <TextInput
        onChange={(e)=> setRegisterEmail(e.nativeEvent.text)}
        placeholder="Email"
      />
      <TextInput
        onChange={(e)=> setRegisterPassword(e.nativeEvent.text)}
        placeholder="Password"
      />
      <Button title="회원가입" onPress={register}/>
        <Text>Welcome {user.email}</Text>
      </View>
    );

 

 

전체 코드

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native'
import auth from '@react-native-firebase/auth';

export default function App() {
    // Set an initializing state whilst Firebase connects
    const [initializing, setInitializing] = useState(true);
    const [user, setUser] = useState();
    const [ registerEmail, setRegisterEmail ] = useState("");
    const [ registerPassword, setRegisterPassword ] = useState("");

    function onAuthStateChanged(user) {
      setUser(user);
      if (initializing) setInitializing(false);
    }

    useEffect(() => {
      const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
      return subscriber; // unsubscribe on unmount
    }, []);

    if (initializing) return null;

    const register = async () => {
      try {
        const user = await auth().createUserWithEmailAndPassword(registerEmail, registerPassword)
        console.log('User account created & signed in!');
      } catch(error) {
        console.log(error.message);
      }
   };

    if (!user) {
      return (
        <View>
          <Text>Login</Text>
        </View>
      );
    }
  
    return (
      <View>
        <TextInput
        onChange={(e)=> setRegisterEmail(e.nativeEvent.text)}
        placeholder="Email"
      />
      <TextInput
        onChange={(e)=> setRegisterPassword(e.nativeEvent.text)}
        placeholder="Password"
      />
      <Button title="회원가입" onPress={register}/>
        <Text>Welcome {user.email}</Text>
      </View>
    );
}

 

수고하셨습니다.