[React Native] EXPO - Firebase 회원가입

이번시간에는 회원가입에 대해 알아보도록 하겠습니다.

 

Step 1. 설정값 참조하기

https://ssilook.tistory.com/entry/REACT-NATIVE-EXPO-Firebase-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83

[React Native] EXPO - Firebase 로그인, 로그아웃

 - 위 링크를 참조하여 기본 세팅을 완성하시기 바랍니다.

 

Step 2. 코드 작성하기

 - 아래 전체 코드를 복사하여 사용하시면 됩니다.

 

# All Code

import { StyleSheet, Text, TextInput, TouchableOpacity } from "react-native";
import { createUserWithEmailAndPassword } from "firebase/auth";
import React, { useState } from "react";
import { auth, db } from "../firebase";
import { doc, setDoc } from "firebase/firestore";

const Signupscreen = () => {
    /* Signup State */
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    /* Signup Function */
    const onHandleSignup = async () => {
        try {
            await createUserWithEmailAndPassword(auth, email, password)
                .then((userCredential) => {
                    const user = userCredential.user;
                    const userRef = doc(db, "users", user.uid);
                    setDoc(userRef, {
                        displayName: name,
                        email: email,
                        uid: user.uid,
                        createdAt: new Date().toUTCString(),
                    });
                })
                .then(() => alert("Data uploaded"));
        } catch (error) {
            Alert.alert(error.message);
        }
    };

    return (
        <View style={styles.container} behavior="padding">
            {/* Signup Input Box */}
            <TextInput
                style={styles.input}
                placeholder="Enter name"
                autoCapitalize="none"
                autoCorrect={false}
                textContentType="name"
                value={name}
                onChangeText={(text) => setName(text)}
            />
            <TextInput
                style={styles.input}
                placeholder="Enter email"
                autoCapitalize="none"
                keyboardType="email-address"
                textContentType="emailAddress"
                autoFocus={true}
                value={email}
                onChangeText={(text) => setEmail(text)}
            />

            <TextInput
                style={styles.input}
                placeholder="Enter password"
                autoCapitalize="none"
                autoCorrect={false}
                secureTextEntry={true}
                textContentType="password"
                value={password}
                onChangeText={(text) => setPassword(text)}
            />

            {/* Signup Button */}
            <TouchableOpacity style={styles.btn} onPress={onHandleSignup}>
                <Text
                    style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}
                >
                    Sign Up
                </Text>
            </TouchableOpacity>
        </View>
    );
};

export default Signupscreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        color: "black",
    },

    btn: {
        backgroundColor: "#223a5e",
        width: "100%",
        padding: 15,
        borderRadius: 10,
        alignItems: "center",
    },
    input: {
        margin: 10,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        padding: 20,
    },
});

 

수고하셨습니다.