Part 4. 로그인 페이지 만들기

페이지 디자인

1) 코드

import { useEffect, useState } from "react";
import {
  Center,
  FormControl,
  Input,
  Box,
  Heading,
  VStack,
  HStack,
  Text,
  Link,
  Button,
} from "native-base";
import { SafeAreaView } from "react-native-safe-area-context";
import { SignIn } from "../myFirebase/firebaseFunctions";
const SignInPage = ({ navigation }) => {
  const [formData, setData] = useState({});
  const [errors, setErrors] = useState({});

  const validate = () => {
    if (formData.email === undefined) {
      setErrors({ ...errors, email: "email is required" });
      return false;
    } else if (formData.email.length < 3) {
      setErrors({ ...errors, email: "email is too short" });
      return false;
    }
    if (formData.password === undefined) {
      setErrors({ ...errors, password: "password is required" });
      return false;
    } else if (formData.password.length < 3) {
      setErrors({ ...errors, password: "password is too short" });
      return false;
    }

    return true;
  };

  const onSubmit = () => {
    validate() ? doSignIn() : console.log("validate failed");
  };

  const doSignIn = async () => {
    console.log(formData);
    const email = formData.email;
    const password = formData.password;

    await SignIn(email, password, navigation);
  };

  const goSignUp = () => {
    navigation.navigate("SignUpPage");
  };

  return (
    <SafeAreaView>
      <Center w="100%">
        <Box safeArea p="2" py="8" w="90%" maxW="290">
          <Heading
            size="lg"
            fontWeight="600"
            textAlign="center"
            color="coolGray.800"
            _dark={{
              color: "warmGray.50",
            }}>
            Welcome to Moongram
          </Heading>

          <VStack space={3} mt="5">
            {/* 이메일 */}
            <FormControl isRequired isInvalid={"email" in errors}>
              <FormControl.Label _text={{ bold: true }}>
                이메일
              </FormControl.Label>
              <Input
                onChangeText={(value) => setData({ ...formData, email: value })}
              />
              {"email" in errors ? (
                <FormControl.ErrorMessage>
                  {errors.email}
                </FormControl.ErrorMessage>
              ) : (
                <FormControl.HelperText>
                  Email should contain atleast 3 character.
                </FormControl.HelperText>
              )}
            </FormControl>
            {/* 비밀번호 */}
            <FormControl isRequired isInvalid={"password" in errors}>
              <FormControl.Label _text={{ bold: true }}>
                비밀번호
              </FormControl.Label>
              <Input
                type="password"
                onChangeText={(value) =>
                  setData({ ...formData, password: value })
                }
              />
              {"password" in errors ? (
                <FormControl.ErrorMessage>
                  {errors.password}
                </FormControl.ErrorMessage>
              ) : (
                <FormControl.HelperText>
                  Password should contain atleast 6 character.
                </FormControl.HelperText>
              )}
            </FormControl>
            <Button mt="2" colorScheme="indigo" onPress={onSubmit}>
              로그인
            </Button>
            <HStack mt="6" justifyContent="center">
              <Text
                fontSize="sm"
                color="coolGray.600"
                _dark={{
                  color: "warmGray.200",
                }}>
                처음 오셨나요?{" "}
              </Text>
              <Link
                _text={{
                  color: "indigo.500",
                  fontWeight: "medium",
                  fontSize: "sm",
                }}
                onPress={goSignUp}>
                회원가입
              </Link>
            </HStack>
          </VStack>
        </Box>
      </Center>
    </SafeAreaView>
  );
};

export default SignInPage;

2) Firebase 로그인 함수

export const SignIn = async (email, password, navigation) => {
  await signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      const userData = {
        nickName: user.displayName,
        uid: user.uid,
      };
      console.log(userData);
      navigation.navigate("MainPage");
    })
    .catch((e) => {
      const errorCode = e.code;
      const errorMessage = e.message;
      console.log(errorCode, errorMessage);
      Alert.alert("문제가 있어요!", e.message);
    });
};

3) 구현한 페이지