const RegisterScreen = () => {
  // Logic
  const navigation = useNavigation();
  const [displayName, setDisplayName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const userCollection = firestore().collection('users');

  const Register = (name: string, email: string, password: string) => {
    if (!name || !email || !password) {
      Alert.alert('값을 입력해주세요');
    } else {
      return firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then(result => {
          const {uid} = result.user;
          firebase.auth().currentUser?.updateProfile({displayName});
          userCollection
            .doc(uid)
            .set({
              date_created: moment().utc().format(),
              uid,
              name,
              email
            });
          setDisplayName('');
          setEmail('');
          setPassword('');
          navigation.navigate('Login');
          console.log("Register: ", result.user);
        })
        .catch(err => {
          console.log(err.message);
        });
    }
  };

  // Views
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.wrapper}>
        <View style={styles.logo_wrapper}>
          <Text style={styles.logo}>Register</Text>
        </View>

        <View style={styles.textinput_wrapper}>
          <TextInput
            onChangeText={e => setDisplayName(e)}
            value={displayName}
            placeholder="NickName"
            style={styles.textinput}
          />
        </View>

        <View style={styles.textinput_wrapper}>
          <TextInput
            onChangeText={e => setEmail(e)}
            value={email}
            placeholder="Email"
            style={styles.textinput}
          />
        </View>

        <View style={styles.textinput_wrapper}>
          <TextInput
            onChangeText={e => setPassword(e)}
            value={password}
            placeholder="PassWord"
            secureTextEntry={true}
            style={styles.textinput}
          />
        </View>

        <View style={styles.register_button_wrapper}>
          <TouchableOpacity
            onPress={() => Register(displayName, email, password)}
            style={styles.register_button}>
            <Text style={styles.register_button_text}>Register</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

const MainScreen = () => {
  // Logic
  const navigation = useNavigation();
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  const userCollection = firestore().collection('users');

  const onAuthStateChanged = user => {
    setUser(user);
    if (initializing) {
      setInitializing(false);
    }
  };

  const LogOut = () => {
    return firebase
      .auth()
      .signOut()
      .then(() => {
        console.log('Logout');
        navigation.navigate('Login');
      })
      .catch(err => {
        console.log(err.message);
      });
  };

  const Delete = () => {
    const user = firebase.auth().currentUser;
    if(user){
      try {
        return firebase
        .auth()
        .currentUser?.delete()
        .then(() => {
            console.log('Logout');
            userCollection.doc(user?.uid).delete();
            navigation.navigate('Login');
          })
      } catch (error) {
        console.log(error);
      }
    }
  };

  useEffect(() => {
    const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

  if (initializing) {
    return null;
  }

  // Views
  return (
    <SafeAreaView
      style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <View>
        <View>
          <Text>{user?.uid}</Text>
        </View>

        <View>
          <Text>{user?.displayName}</Text>
        </View>

        <View>
          <Text>{user?.email}</Text>
        </View>

        <TouchableOpacity
          style={{padding: 10, margin: 10}}
          onPress={() => LogOut()}>
          <Text>Logout</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={{padding: 10, margin: 10}}
          onPress={() => Delete()}>
          <Text>회원 탈퇴</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default MainScreen;

React Native 플랫폼을 이용하여 앱 2개를 동시에 하이브로드로 개발중입니다.

firebase authentication 기능을 이용해서 회원가입 기능을 구현하고 있는데, 회원가입이 성공적으로 수행되면 updateProfile 까지 해주나요?

현재 RegisterScreen 컴포넌트에 저는 다음과 같은 코드를 넣었습니다.

firebase.auth().currentUser?.updateProfile({displayName});

이 코드를 넣어서 회원가입을 성공하면, firebase authentication 와 firestore에 유저 정보가 동시에 둘다 저장되게 해놓았고, 가입한 user의 데이터가 저장되었는지 확인해보기 위해 로그를 찍었보았을때, 콘솔에서는 유저 닉네임(displayName) 값이 null로 찍혔습니다. 하지만 회원가입 성공하고 로그인을 하고, MainScreen으로 넘어와 렌더링 됐을때 Text 컴포넌트로 값을 넣은 user?.displayName 에서는 정상적으로 등록된 유저의 닉네임이 찍혔습니다.

하지만 윗 라인 코드를 주석처리를 하고, 회원가입 성공했을때 firebase authentication 와 firestore에 유저 정보가 동시에 둘다 저장되게 해놓았고, 가입한 user의 데이터가 저장되었는지 확인해보기 위해 로그를 찍었보았을때, 콘솔에서는 유저 닉네임(displayName) 값이 null로 찍혔습니다. 또한 회원가입 성공하고 로그인을 하고, MainScreen으로 넘어와 렌더링 됐을때 Text 컴포넌트로 값을 넣은 user?.displayName 에서는 등록된 유저의 닉네임이 뜨지 않았습니다.

질문 입니다

회원가입이 정상적으로 시행이 되도 firebase authentication 및 firestore 콘솔에는 정상적으로 유저 닉네임이 저장되는데, 로그로 확인해봤을때는 null로 찍히는지 궁금합니다.
윗 코드라인이 있든 없든 firebase authentication 및 firestore 콘솔에는 정상적으로 유저 닉네임이 저장되는데, 로그로 확인해봤을때는 null로 찍히게 되는데, 윗 코드라인이 없을경우 왜 MainScreen에는 유저 닉네임이 뜨지 않는지 궁금합니다.

firebase authentication 질문입니다.(React Native)

0개의 답변

#authentication 목록