firebase web version 8에서 회원가입, 인증 구현하기.

※ 버전8과 버전9는 사용법이 다를 수 있으므로 

npm firebase --version  명령어로 확인 필요

 

0. Firebase 웹 SDK 버전 8에서 버전 9으로 올리는 방법

버전 8에서 모듈식 웹 SDK로 업그레이드  |  Firebase

 

1. 파이어 베이스 시작하기 (app.initializeApp)

JavaScript 프로젝트에 Firebase 추가

 

2. 인증 추가하기 (auth.getAuth, auth.signInWithEmailAndPassword,  createUserWithEmailAndPassword)

웹사이트에서 Firebase 인증 시작하기

---

 

✅인증SDK 추가 및 초기화(firebase-auth.js)

• Confing는 Firebase Console에서 Project를 생성한 후 확인 
  -> console.firebase.google.com

import { initializeApp } from "firebase/app";
import {
  getAuth,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signOut
} from "firebase/auth";
import config from "config.json";

const app = initializeApp(config);
const auth = getAuth(app);

export const signup = async ({ email, password }) => {
  const { user } = await createUserWithEmailAndPassword(auth, email, password);
  return user;
};

export const login = async ({ email, password }) => {
  const { user } = await signInWithEmailAndPassword(auth, email, password);
  return user;
};

export const getCurrentUser = () => {
  return auth.currentUser;
};

export const logout = async () => {
  return await signOut(auth);
};

 

✅신규 사용자 등록(Signup)

import { signup } from "./firebase-auth";

const _handleSignupButtonPress = async () => {
    try {
      const user = await signup({ email, password });
      console.log("Signup Success", user.email);
    } catch (e) {
      console.log("Signup Error", e.message);
    }
};

 

✅사용자 인증(Login)

import { login } from "./firebase-auth";

 const _handleLoginButtonPress = async () => {
    try {
      const user = await login({ email, password });
      console.log("Login Success", user);
    } catch (e) {
      console.log("Login Error", e.message);
    }
  };

 

✅사용자 정보 가져오기(currentUser)

import { getCurrentUser } from "./firebase-auth";

const user = getCurrentUser();

const uid = user.uid;
const displayName = user.displayName;
const email = user.email;
const phoneNumber = user.phoneNumber;
const photoURL = user.photoURL;
const emailVerified = user.emailVerified;

 

✅사용자 로그아웃(Logout)

 import { logout } from "./firebase-auth";

 const _handleLogoutButtonPress = async () => {
    try {
      await logout();
      console.log("Logout Success");
    } catch (e) {
      console.log("Logout error: ", e.message);
    }
  };