트위터 클론코딩 - 이메일, 비밀번호 인증 기능 사용해보기

목표 - 파이어베이스로 회원가입 기능을 처리해보자!

 

 

액션1 - onSubmit 함수에서 로그인과 회원가입 분기시키기

 

 

로그인, 회원가입을 위한 onSubmit 함수는 몇개가 필요??

로그인 1개 회원가입 1개 총2개 => but, 상태를 잘 활용하면 onSubmit 함수를 2개나 만들 필요 x

 

import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(true);
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  const onSubmit = (event) => {
    event.preventDefault();
    if (newAccount) {
      //create newAccount
    } else {
      //log in
    }
  };
  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={newAccount ? "Create Account" : "Log In"} />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with Github</button>
      </div>
    </div>
  );
};

export default Auth;

newAccount 를 useState 함수로 정의, newAccount 의 true, false에 따라 onSubmit 함수에서 

회원가입과 로그인을 할 수 있도록 코드를 분기,

이렇게 하면 깔끔하게 회원가입과 로그인 기능을 만들 수 있음

 

액션2 - 파이어베이스로 로그인과 회원가입 처리하기

 

파이어베이스에서 제공하는 인증 기능 중 "EmailAuthProvider"에 속한

"createUserWithEmailAndPassword" 함수와 "signInWithEmailAndPassword" 를 사용

이메일, 비밀번호를 통한 회원가입과 로그인을 처리

 

"createUserWithEmailAndPassword" -> 인자로 전달받은 이메일, 비밀번호를 파이어베이스의 데이터베이스에 저장

"signInWithEmailAndPassword" -> 인자로 전달받은 이메일, 비밀번호를 파이어베이스 데이터베이스에 전달하여 확인 후 로그인할 수 있게 해줌.

 

 

import { authService } from "fbase";
import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(true);
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  const onSubmit = async (event) => {
    event.preventDefault();
    try {
      let data;
      if (newAccount) {
        data = await authService.createUserWithEmailAndPassword(
          email,
          password
        );
        //create newAccount
      } else {
        data = await authService.signInWithEmailAndPassword(email, password);
        //log in
      }
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };
  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={newAccount ? "Create Account" : "Log In"} />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with Github</button>
      </div>
    </div>
  );
};

export default Auth;

**onSubmit 문에 추가된 async 문과 await 문**

 

authService에 들어있는 함수들은 서버로 값을 요청해서 결괏값을 수신받기 까지 시간이 걸림

로그인 또는 회원가입 인증이 처리 된 후에 트위터가 실행되어야 하므로 기다렸다 실행하라는 뜻의

async와 await 사용

 

**try catch문**

 

로그인 또는 회원가입의 실패, 성공을 처리하도록

성공 -> try문에 있는 console.log(data)로 로그인 또는 회원가입 완료 시 data에 어떤 값이 들어있는지 출력

실패 -> catch문에 있는 console.log(error)로 자바스크립트가 자동으로 보내준 오륫값을 출력

 

콘솔로그를 보면 잘 작동됨을 확인할 수 있음

만약 같은 아이디로 가입을 시도하면 "the email adress is already in use~~~"  가 뜨며 중복체크까지 해준다.

 

 

firebase Authentication에 들어가보면 회원가입 정보가 뜬다.

 

 

 

+)) 로그인을 지속지켜주는 setPersistence 알아보기

 

 

파이어베이스는 "setPersistence" 를 이용해 로그인 상태 지속을 3가지로 나눠 관리

 

local / session / none 옵션을 가지고 있음

 

1) local : 웹 브라우저를 종료해도 로그인 유지

2) session: 웹 브라우저 탭을 종료하면 로그아웃

3) none: 새로고침하면 로그아웃

 

기본값은 local

 

 

 

액션3 - 사용자 정보가 저장되어 있는 곳 살펴보기

 

local 옵션으로 저장한 사용자 로그인 정보는 브라우저 내에 있는 IndexedDB 라는 데이터베이스에 사용자 정보를 저장