#3 Authentication

firebase는 많은 제품들이 있기 때문에 초기에는 모든 제품들이 비활성화 되어있다. 

사용하고자 하는 제품을 활성화 하기 위해서는 firebase console, 우리가 작성하는 코드 양쪽에서 활성화를 해줘야 한다. 

 

firebase console에서 project overview - auth - get started를 선택한다. 

처음 저 화면에 들어가면 enable된 제품들이 없을 것이다. 

일단 이메일, 비밀번호를 통한 로그인을 구현하기 위해 '이메일 및 비밀번호'를 선택하고 활성화하자. 

이렇게 하면 firebase console의 활성화는 완료된 것이다. 

 

 

이제 우리의 코드에 firebase를 활성화하자. 

src 디렉토리의 하위에 firebase.js를 생성한다. 

그리고 firebase console의 활성화 중 나온 코드를 붙여넣는다. 

(위의 코드에는 firebaseConfig의 내용들이 모두 비어있는데, 임의로 지운 것이다)

 

코드의 아래에 initializeApp() 함수로 firebase app을 초기화하고, getAuth() 함수로 auth를 생성했다. 

이게 전부다. 

app에서 auth를 가져와 로그인, 회원가입 등 인증이 필요한 페이지에서 import해 쓰면 된다...

백엔드 코드를 직접 작성하고 연동하는 것 보다 훨씬 간단하고 쉽다. 

 

우리는 twitter의 클론코딩을 하고있다. 

로그인을 하지 않았으면 메인 페이지도 보이지 않아야 한다. 

이를 구현하기 위해 protected route를 만든다. 

사용자가 로그인을 했다면 protected route를 보여주고, 

로그인을 하지 않았다면 login이나 create-account 페이지로 redirect 해준다. 

이런식으로 사용자의 로그인 여부에 따라 routing을 다르게 할 수 있다. 

 

import { Navigate } from "react-router-dom";
import { auth } from "../firebase";

const ProtectedRoute = ({children}) => {

    const user = auth.currentUser;

    if (!user){
        return <Navigate to="/login" />;
    } 
    return children;
}

export default ProtectedRoute;

 

auth.currentUser는 로그인을 하지 않았을 시 null을 return한다. 

이 점을 활용하여 로그인 체크를 한 후 useNavigate를 통해 login 페이지로 redirect한다. 

 

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      // protect layout
      <ProtectedRoute>
        <Layout />
      </ProtectedRoute>
    )...

 

App.js에서 protected route를 렌더링해주면 적용될 것이다. 

"/"의 children으로 인증이 필요한(로그인을 해야하는) 페이지들이 있으니, 하위 페이지들에서도 동일하게 적용될 것이다. 

Home.js에 로그아웃 버튼을 만들고 정상적으로 작동하는지 테스트 해 보자. 

참고로 로그아웃은 auth.signOut()으로 간단히 구현할 수 있다. 

 

비밀번호 규칙에 맞지 않는다거나, 이미 존재하는 이메일이거나, 아이디와 비밀번호가 일치하지 않는다면 로그인(또는 회원가입) 로직은 error를 반환한다. 

이 error는 firebase error인데, error를 상속받는다. 

(cmd + click으로 코드를 확인해보면 알 수 있다)

form 아래에 조건문으로 e.message를 출력하자. 

if (e instanceof firebaseError) 로 firebase error인지 확인할 수 있다. 

 

로그인 로직은 auth.signInWithEmailAndPassword() 함수로 간단히 구현할 수 있고, 

auth credential을 return한다. 

 

firebase console에서 여러 가지 인증 방법을 활성화 할 수 있다. 

우리는 그 중 email과 비밀번호를 통한 인증을 구현했다. 

firebase console의 활성화를 통해 github를 이용한 인증 또한 구현할 수 있다. 

new OAuth app 버튼을 누르기만 하면 된다. 

github 인증을 위해서는 provider가 필요하다. 

github 인증을 위한 버튼을 만든다.

const provider = new GithbAuthProvider;

provider를 생성하고, onClick 시 signInWithPopUp()으로 팝업창을 띄워 로그인한다.

이 함수에는 firebase의 auth, provider를 인자로 주면 된다. 

PopUp 외에도 Redirection으로 구현할 수도 있는데, 강의에서는 PopUp으로 구현했다. 

 

마지막으로 github의 이메일이 이미 가입된 이메일일 경우의 예외처리도 해주면 인증 파트는 완료된다.