Chat App (4) :  Auth 화면 구성

1. 회원가입 화면 - 사진

• 프로필 사진에 카메라 사진은 별도의 컴포넌트로 작성한다.
  카메라 이미지가 포함된 프로필 이미지를 구하는 것이 아니다.

• 이미지 업로드 기능 : Image Picker
  https://docs.expo.dev/versions/v45.0.0/sdk/imagepicker/

• 업로드된 이미지가 포함된 데이터값 확인 필수
  
• 업로드된 이미지는 부모 컴포넌트에서 관리(but 백엔드가 포함되면 업로드(DB) 해야 할듯)

// src/components/Image.tsx

import React, { useState } from 'react';
import styled from 'styled-components/native';
import { themeType } from '../theme';
import { MaterialIcons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';  // ⭐️⭐️⭐️

const Container = styled.View`
  margin-bottom: 30px;
`;

interface styledPropsType {
  theme: themeType;
}

const ProfileImage = styled.Image<styledPropsType>`
  background-color: ${({ theme }) => theme.imgBackground};
  width: 100px;
  height: 100px;
  border-radius: 50px;
`;

const ButtonConatiner = styled.TouchableOpacity<styledPropsType>`
  background-color: ${({ theme }) => theme.imgBtnBackground};
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
`;


const ButtonIcon = styled(MaterialIcons).attrs<styledPropsType>(
  ({ theme }) => ({
    name: 'photo-camera',
    size: 22,
    color: theme.imgBtnIcon,
  }),
)``;


// ⭐️⭐️⭐️
const PhotoButton = ({ onPress }: { onPress: () => void }) => {
  return (
    <ButtonConatiner onPress={onPress}>
      <ButtonIcon></ButtonIcon>
    </ButtonConatiner>
  );
};

interface PropsType {
  url?: string;
  showButton?: boolean;
  onChanePhoto: (text: string) => void;
}

const Image = ({ url, showButton = false, onChanePhoto }: PropsType) => {
  // ⭐️⭐️⭐️
  const _handlePhotoBtnPress = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images, // All : 모든 파일, Images : 사진(이미지)만
      allowsEditing: true, // 편집 가능
      aspect: [4, 3], // 이미지 사이즈 조정
      quality: 1, // 품질 옵션 0 ~ 1
    });

    // console.log(result);

    if (result.cancelled === false) {
      onChanePhoto(result.uri);
    }
  };

  return (
    <Container>
      <ProfileImage source={{ uri: url }} resizeMode="contain" />
      {showButton && <PhotoButton onPress={_handlePhotoBtnPress} />}
    </Container>
  );
};

export default Image;

• 참고

// src/screens/Signup.tsx
  
// ⭐️⭐️⭐️
const DEFAULT_Photo =
  'https://firebasestorage.googleapis.com/v0/b/react-native-chat-app-d8603.appspot.com/o/face.png?alt=media';

const Signup = () => {
  const insets = useSafeAreaInsets();

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirm, setPasswordConfirm] = useState('');

  const refEmail = useRef<TextInput | null>(null);
  const refPassword = useRef<TextInput | null>(null);
  const refPasswordConfirm = useRef<TextInput | null>(null);

  // ⭐️⭐️⭐️	
  const [photo, setPhoto] = useState(DEFAULT_Photo);

  const _handleSingupBtnPress = () => {
    console.log('signup');
  };

  return (
    <KeyboardAwareScrollView extraScrollHeight={20} enableOnAndroid={true}>
      <Conatiner insets={insets}>
        // ⭐️⭐️⭐️
        <Image showButton={true} url={photo} onChanePhoto={setPhoto} />
        <Input
          label="Name"
          value={name}
          placeholder="Name"
          onChangeText={setName}
          returnKeyType="next"
          maxLength={20}
          textContentType="none"
          onSubmitEditing={() => refEmail.current?.focus()}
        />
        <Input
          ref={refEmail}
          label="Email"
          value={email}
          placeholder="Email"
          onChangeText={setEmail}
          returnKeyType="next"
          maxLength={20}
          textContentType="none"
          onSubmitEditing={() => refPassword.current?.focus()}
        />
        <Input
          ref={refPassword}
          label="Password"
          value={password}
          placeholder="Password"
          onChangeText={setPassword}
          returnKeyType="next"
          maxLength={20}
          textContentType="none"
          isPassword={true}
          onSubmitEditing={() => refPasswordConfirm.current?.focus()}
        />
        <Input
          ref={refPasswordConfirm}
          label="Password Confirm"
          value={passwordConfirm}
          placeholder="Password"
          onChangeText={setPasswordConfirm}
          returnKeyType="done"
          maxLength={20}
          textContentType="none"
          isPassword={true}
          onSubmitEditing={_handleSingupBtnPress}
        />
        <Button title="Sign up" onPress={_handleSingupBtnPress} />
      </Conatiner>
    </KeyboardAwareScrollView>
  );
};

export default Signup;

2. 기능구현 - 로그인

• 공식문서 : https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth?authuser=0
  

• 메소드 : signInWithEmailAndPassword
  https://firebase.google.com/docs/reference/js/auth.md?authuser=0&hl=ko#signinwithemailandpassword
  

• 사용법 : 공식문서 사용법이 잘 이해가 안간다...
  아래의 빨간색 글씨 내용 확인.
  https://firebase.google.com/docs/web/setup?authuser=0#add-sdks-initialize
  

• 결과값 : UserCredential
  

User

// src/firebase.tsx
import { initializeApp } from 'firebase/app';
import config from '../firebase.json';
// ⭐️⭐️⭐️⭐️
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

const app = initializeApp(config);

const Auth = getAuth(app);   // ⭐️⭐️⭐️⭐️

export const signin = async ({    // ⭐️⭐️⭐️⭐️
  email,
  password,
}: {
  email: string;
  password: string;
}) => {
  const { user } = await signInWithEmailAndPassword(Auth, email, password);
  return user;
};

// src/screens/signin.tsx
const Signin = ({ navigation }: Props) => {
  const insets = useSafeAreaInsets();
  const theme = useContext(ThemeContext);

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [disabled, setDisabled] = useState(true);
  const refPassword = useRef<TextInput | null>(null);

  // ⭐️⭐️ email, password 유효성 검사   
  useEffect(() => {
    setDisabled(!(email && password && !errorMessage));
  }, [email, password, errorMessage]);

   // ⭐️⭐️ email 유효성 검사   
  const _handleEmailChange = (email: string) => {
    const changedEmail = removeWhitespace(email);
    setEmail(changedEmail);
    setErrorMessage(
      validateEmail(changedEmail) ? '' : 'Email 형식이 유효하지 않습니다.',
    );
  };

   // ⭐️⭐️ password 유효성 검사   
  const _handlePasswoerChange = (password: string) => {
    const changedpassword = removeWhitespace(password);
    setPassword(changedpassword);
  };

  // ⭐️⭐️ 로그인 버튼 함수
  const _handleSinginBtnPress = async () => {
    try {
      const user = await signin({ email, password });
      navigation.navigate('Profile', { user });
    } catch (e) {
      Alert.alert('Signin Error');
    }
    // console.log('signin');
  };

• 참고 : 유효성검사용

// src/util.tsx
          
export const validateEmail = (email: string): boolean => {
  const regex =
    /^[0-9?A-z0-9?]+(\.)?[0-9?A-z0-9?]+@[0-9?A-z]+\.[A-z]{2}.?[A-z]{0,3}$/;
  return regex.test(email);
};

export const removeWhitespace = (text: string): string => {
  const regex = /\s/g;
  return text.replace(regex, '');
};