firebase.auth의 메서드를 사용하여 이메일과 비번을 사용하여 새로운 계정을 만들고 로그인하기

---

🎯 목표

이메일과 비번을 사용하는 firebase.auth의 메서드를 사용하여 새로운 계정을 만들고 로그인 해보자!

firebase.auth > Auth에 가면 많은 auth provider를 볼 수 있는데(facebook provider, google provider, github provider...etc.) EmailAuthProvider(이메일 어스 프로바이더)를 사용하여 이메일 주소와 패스워드로 새로운 유저 계정 만들고, 로그인을 할 수 있다.

1. createUserWithEmailAndPassword()메서드 사용해 새로운 계정 만들기

사용자가 양식을 작성하면, 유효성 검사를 거쳐 createUserWithEmailAndPassword 메서드에 전달하여 새로운 계정을 생성하면 된다.

✅ createUserWithEmailAndPassword() 메서드

createUserWithEmailAndPassword()는 firebase의 Auth 패키지 안에 있는 메서드로, 사용자가 지정한 이메일 주소 및 암호와 연결된 새 사용자 계정을 만들 때 사용할 수 있다.

• 사용자 계정을 성공적으로 만들면 이 사용자도 앱에 로그인할 수 있고, 계정이 이미 있거나 암호가 잘못된 경우에는 사용자 계정을 만들지 못할 수 있다.

• 이 메서드는 promise를 리턴하기 때문에 await을 사용하면 된다.

v.9에서 createUserWithEmailAndPassword()메서드 사용해 새로운 계정 만들기

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
//
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

2. signInWithEmailAndPassword() 메서드 사용해 로그인 하기

✅ signInWithEmailAndPassword() 메서드

signInWithEmailAndPassword()는 firebase의 Auth 패키지 안에 있는 메서드로, 이메일 및 암호를 사용하여 비동기적으로 로그인할 수 있다.

• 이메일 주소와 암호가 일치하지 않으면 오류가 발생한다.
• 이 메서드는 promise를 리턴하기 때문에 await을 사용하면 된다.

v.9에서 signInWithEmailAndPassword()메서드를 사용해 로그인 하기

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
//
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

3. 두 메서드를 사용하여 새로운 계정을 생성하고 로그인 해보자.

1. 새로운 계정을 만드는 useState를 만들고, 계정 새로 만들어야 하면 로그인 버튼 대신 계정 새로 만드는 버튼 보여주기

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  //🔥 새로운 계정 만들기
  const [newAccount, setNewAccount] = useState(true);
  
  //생략
  
     {/*🔥 계정 새로 만들어야 하면 로그인 버튼 대신 계정 새로 만드는 버튼 보여주기*/}
        <input type="submit" value={newAccount ? "Create Account" : "Login"} />
      </form>

2. 필요한 메서드 임포트하기

//🔥 이메일, 비번으로 새로운 계정 생성 및 로그인 하기위해 아래 메서드 임포트하기
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

3. getAuth()를 auth로 명명

//🔥 getAuth()를 auth로 명명
  const auth = getAuth();

4. form submit하면 작동하는 onSubmit 핸들러에 코드 작성하기

newAccount의 state로 newAccount가 참이면 새로운 계정을 만드는 메서드를 사용하고, 거짓이면 로그인하는 메서드를 사용하자.

//form에 사용하는 이벤트
  //🔥 createUserWithEmailAndPassword() 메서드와 signInWithEmailAndPassword()메서드가 promise를 리턴하기 때문에 async await을 사용하자!
  const onSubmit = async (event) => {
    event.preventDefault();
    //🔥 form submit하면 newAccount 스테이트로 확인하자!
    //🔥 newAccount가 참이면 계정 새로 만들고, 거짓이면 로그인하기
    //🔥🔥 그리고 트라이 캣치 구문 사용해서 혹시 모를 오류를 대비하자.
    try {
      //🔥 얻게되는 data확인 위해 data라는 변수를 정하고 newAccount가 참일 땐 data에 계정생성하는 메서드 넣고,
      //newAccount가 거짓일 땐 data에 로그인하는 메서드 넣자.
      let data;
      if (newAccount) {
        //🔥 파라미터로 auth, email, password를 보내면 된다.
        data = await createUserWithEmailAndPassword(auth, email, password);
      } else {
        data = await signInWithEmailAndPassword(auth, email, password);
      }
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };

📍 Auth.js 최종 코드

//🔥 이메일, 비번으로 새로운 계정 생성 및 로그인 하기위해 아래 메서드 임포트하기
//🔥 getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  //🔥 새로운 계정 만들기
  const [newAccount, setNewAccount] = useState(true);
  //🔥 getAuth()를 auth로 명명
  const auth = getAuth();
  //email, password에 사용하는 이벤트
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  //form에 사용하는 이벤트
  //c🔥 reateUserWithEmailAndPassword() 메서드와 signInWithEmailAndPassword()메서드가 promise를 리턴하기 때문에 async await을 사용하자!
  const onSubmit = async (event) => {
    event.preventDefault();
    //🔥 form submit하면 newAccount 스테이트로 확인하자!
    //🔥 newAccount가 참이면 계정 새로 만들고, 거짓이면 로그인하기
    //🔥🔥 그리고 트라이 캣치 구문 사용해서 혹시 모를 오류를 대비하자.
    try {
      //🔥 얻게되는 data확인 위해 data라는 변수를 정하고 newAccount가 참일 땐 data에 계정생성하는 메서드 넣고,
      //newAccount가 거짓일 땐 data에 로그인하는 메서드 넣자.
      let data;
      if (newAccount) {
        //🔥 파라미터로 auth, email, password를 보내면 된다.
        data = await createUserWithEmailAndPassword(auth, email, password);
      } else {
        data = await signInWithEmailAndPassword(auth, email, password);
      }
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div>
      <h1>로그인 페이지</h1>
      <p>로고 넣기</p>
      <form onSubmit={onSubmit}>
        <input
          type="email"
          placeholder="Email"
          required
          value={email}
          name="email"
          onChange={onChange}
        ></input>
        <input
          type="password"
          placeholder="Password"
          required
          value={password}
          name="password"
          onChange={onChange}
        ></input>
        {/*🔥 계정 새로 만들어야 하면 로그인 버튼 대신 계정 새로 만드는 버튼 보여주기*/}
        <input type="submit" value={newAccount ? "Create Account" : "Login"} />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with GitHub</button>
      </div>
    </div>
  );
};

export default Auth;

결과

유후~! ^3^~
새로운 계정이 만들어 졌고 로그인도 되어 있다.

4. setPersistence() 메서드 사용해 유저 기억하기

✅ setPersistence() 메서드

setPersistence() 메서드는 사용자들을 어떻게 기억할 것인지 선택할 수 있게해준다.

• 현재 저장된 Auth 세션의 Auth 인스턴스(사례)에서 지속성 유형을 변경하고 리다이렉트 요청을 사용한 사인인을 포함하여 향후 로그인 요청에 이 유형의 지속성을 적용한다.

• 이것에 의해, 유저는 서명하고 있는 유저의 세션의 기억 여부를 간단하게 지정할 수 있고, 다른 유저가 공유하고 있는 애플리케이션이나 기밀 데이터가 있는 애플리케이션의 Auth 상태를 유지하지 않게 된다.

• React Native 앱과 웹 브라우저에서의 초기 값은 local이다.

  value	설명
  local	브라우저를 닫더라도 사용자 정보를 기억
  session	탭(tab)이 열려있는 동안에만 사용자 정보를 기억
  none	사용자 정보를 기억하지 않음(로그인은 되지만 페이지 새고하면 로그아웃되서 다시 로그인해야 함)

인스펙션에서 로그인한 사용자 정보가 새로고침을 해도 여전히 남아 있는지 확인해 보자.

• Inspection > Application > IndexedDB > firebaseLocalStorageDb로 가면 사용자 정보가 보인다.
  

• 새로고침을 해도 사용자 정보가 여전히 남아 있는 있는 것을 확인할 수 있다. 즉, firebase가 접속한 유저를 기억하고 있다. 오케이 ㅇㅇ!