트위터 클론코딩 - 파이어베이스 로그인 설정하기

이메일, 비밀번호 기반 로그인과 구글, 깃허브 소셜 로그인을 트위터에 적용해보자!

 

액션1 - 파이어베이스 인증 설정하기 

파이어베이스에서 Authentication에 들어가 로그인방법을 설정해준다.

 

 

 

 

 

Github는 setting -> OAuth Apps에 들어가서 Firebase의 도메인주소와 callback URL을 넣어준다

 

3가지 로그인 설정 완.

 

 

 

액션2 - 로그인 폼 기본 구조 만들기

 

Auth.js 파일에서 로그인 폼을 만들어보자!

 

 

 

const Auth = () => {
  return (
    <div>
      <form>
        <input type="email" placeholder="Email" required />
        <input type="password" placeholder="password" required />
        <input type="submit" value="Log In" />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with Github</button>
      </div>
    </div>
  );
};

export default Auth;

 

 

type, placeholder, required, value는 모두 input 엘리먼트에 추가할 수 있는 속성으로 input 엘리먼트의 성격을 지정!

 

로그인 폼 화면

 

 

구글, 깃허브 소셜 로그인은 파이어베이스 서버에 요청만 하면 되므로 서버 호출을 할 수 있게 버튼으로!

 

이메일, 비밀번호 로그인의 경우 이메일과 비밀번호를 입력 받아야 하므로 form엘리먼트와 input 엘리먼트 사용!

 

액션3 - 로그인 폼이 상태를 업데이트하도록 만들기

 

but, 이렇게만 해 놓으면 폼이 실행되지 않음

 

 

 

 

리액트에서 input 엘리먼트를 관리하고 form 엘리먼트가 실행되도록 만들려면?

=> useState 함수로 상태를 만들어 주고 onChange, onSubmit 함수로 이벤트 연결해 주어야 함

 

import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const onChange = (event) => {
    console.log(event.target.name);
  };
  const onSubmit = (event) => {
    event.preventDefault();
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          name="email"
          type="email"
          placeholder="Email"
          required
          value={email}
          onChange={onChange}
        />
        <input
          name="password"
          type="password"
          placeholder="password"
          required
          value={password}
          onChange={onChange}
        />
        <input type="submit" value="Log In" />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with Github</button>
      </div>
    </div>
  );
};

export default Auth;

 

 

콘솔창을 확인하면 input 엘리먼트의 name 속성에 지정한 값이 출력됨

 

이를 통해 onChange 함수에서 event.target.name으로 어떤 input 엘리먼트에서 입력을 시도하고 있는지

구분할 수 있음을 알 수있다.

 

어떤 input 엘리먼트에서 오는 값인지 구분하는 방법을 알았으니

이를통해 상태를 업데이트하도록 코드를 수정해야한다.

 

import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const onChange = (event) => {
    const {
        target : {name, value},
    } = event;
    if (name === "email") {
        setEmail(value);
    } else if(name === "password"){
        setPassword(value);
    }
  };
  const onSubmit = (event) => {
    event.preventDefault();
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          name="email"
          type="email"
          placeholder="Email"
          required
          value={email}
          onChange={onChange}
        />
        <input
          name="password"
          type="password"
          placeholder="password"
          required
          value={password}
          onChange={onChange}
        />
        <input type="submit" value="Log In" />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with Github</button>
      </div>
    </div>
  );
};

export default Auth;

 

event.target 에서 가져올 수 있는 값에는 여러가지가 있는데 우리한테 필요한 값은

name과 value 이다. 

이를 구조분해할당하고 if문과 else if 문으로 name을 구별해서 각각에 대한 입력값을 

setEmail 함수와 setPassword함수로 상태를 업데이트 하도록 만듦.

 

onChange 함수를 완성하면 input 입력이 화면에도 반영된다.