[Twitter Clone Coding] #2 AUTHENTICATION

https://nomadcoders.co/nwitter

트위터 클론코딩 – 노마드 코더 Nomad Coders

*노마드코더 트위터 클론코딩 강의내용을 정리한 글입니다. 

**강의에서는 Firebase v8 를 사용했지만 여기서는 Firebase v9을 사용하여 구현했습니다.

 

Using Firebase Auth

https://firebase.google.com/docs/reference/js/v8/firebase.auth

• firebase.js ⇒ fb.js로 이름변경

// fb.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

const fbApp = initializeApp(firebaseConfig);

export const fbAuth = getAuth(fbApp); 
// getAuth를 통해서 auth에 접근

Login Form part One

Authentication 설정

FIrebase 콘솔 ⇒ 프로젝트 ⇒ 빌드(develop) ⇒ Authentication 섹션

• 로그인 방법 추가 가능

Creating Account

https://firebase.google.com/docs/reference/node/firebase.auth.EmailAuthProvider

• email auth provider사용
• 계정 생성 및 로그인 API제공

// Auth.js
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import React, { useState } from "react";
import { fbAuth } from "../fb";

export default function Auth() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(false);

  const onChangeHandler = (event) => {
    const { name, value } = event.target;

    if (name === "email") setEmail(value);
    else if (name === "password") setPassword(value);
  };

  const onSumitHandler = (event) => {
    event.preventDefault();
    if (newAccount) createAccount();
    else login();
  };

  const login = async () => {
    console.log(`login`);
    try {
      const res = await signInWithEmailAndPassword(fbAuth, email, password);
      console.log(res);
    } catch (error) {
      console.log(error);
    }
  };

  const createAccount = async () => {
    console.log(`create account`);
    try {
      const res = await createUserWithEmailAndPassword(fbAuth, email, password);
      console.log(res);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <form onSubmit={onSumitHandler}>
        <input name="email" type="email" placeholder="Email" value={email} required autoComplete="true" onChange={onChangeHandler} />
        <input name="password" type="password" placeholder="Password" value={password} required autoComplete="true" onChange={onChangeHandler} />
        <input type="submit" value={!newAccount ? `Login` : `Create New Account`} />
      </form>
      <div>
        <button onClick={() => setNewAccount((prev) => !prev)}> {newAccount ? `Login` : `Create New Account`}</button>
        <button>Continue with Google</button>
      </div>
    </div>
  );
}

Login

• 컴포넌트가 처음 선언될 때는 firebase가 초기화 되지 않은 상태임 ⇒ user정보 조회불가
• 따라서, useEffect와 onAuthStateChanged를 사용해 유저정보를 불러와야함

// App.js
import { onAuthStateChanged } from "firebase/auth";
import { useEffect, useState } from "react";
import { fbAuth } from "./fb";
import Router from "./Router";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    onAuthStateChanged(fbAuth, (user) => {
      if (user) setIsLoggedIn(true);
      else setIsLoggedIn(false);

      setLoading(false);
    });
  }, []);

  return (
    <div>
      {loading ? `loading...` : <Router isLoggedIn={isLoggedIn} />}
      <footer>&copy; {new Date().getFullYear()} Nwitter</footer>
    </div>
  );
}

export default App;

Social Login

https://firebase.google.com/docs/auth/web/google-signin

• 소셜로그인은 popup 또는 redirect로 구현가능 ⇒ popup의 구현이 좀 더 간단
• provider를 생성하고 로그인에 활용

// App.js
import { createUserWithEmailAndPassword, GoogleAuthProvider, signInWithEmailAndPassword, signInWithPopup } from "firebase/auth";
import { fbAuth } from "../fb";

export default function Auth() {
	// ...기존코드 생략

  const onSocialLogin = async () => {
    const provider = new GoogleAuthProvider();
    try {
      const res = await signInWithPopup(fbAuth, provider);
      console.log(res);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
        <button name="google" onClick={onSocialLogin}>
          Continue with Google
        </button>
    </div>
  );
}

Logout

• signOut을 사용해 로그아웃

// Profile.js
import { signOut } from "firebase/auth";
import React from "react";
import { useNavigate } from "react-router-dom";
import { fbAuth } from "../fb";

export default function Profile() {
  const navigate = useNavigate();

  const onClickHandler = () => {
    signOut(fbAuth);
    navigate("/"); // 로그아웃 후 로그인 화면으로 이동
  };
  return (
    <div>
      <button onClick={onClickHandler}>Logout</button>
    </div>
  );
}