Day 5 - 로그인 기능 구현하기 1

• 파이어베이스 로그인 준비
• 파이어베이스 로그인 설정

---

 

누이터와 파이어베이스 로그인 시스템 연동하기

파이어 베이스를 사용 장점?

:서버를 집적 구축한 상태면 회원가입,로그인 등의 기능을 직접 만들어야 하지만

파이어 베이스를 연동한다면 이 기능을 간단하게 적용할 수 있다.

---

1.파이어베이스 로그인 준비

1)useState 함수 위치 이동하기

useState함수의 위치를 바꾸고 AppRouter 컴포넌트에 isLoggedIn 프롭스 추가

AppRouter 컴포넌트가 라우터 역할을 하면서 코드의 가독성까지 챙기려면 상태는 App 컴포넌트에서 관리하는것이 좋다.

 

App.js

import { useState } from "react";
import AppRouter from "./Router";

function App() {
  const [isLoggedIn,setIsLoggedIn] = useState(false);
  return (
    <>
    <AppRouter isLoggedIn={isLoggedIn}/>
    {/* jsx에 js 사용시 중괄호로 감싸기 */}
    <footer>&copy; {new Date().getFullYear()}Nwitter</footer>
    </>
  
  );
  
}

export default App;

 

Router.js

import { HashRouter as Router,Route,Routes } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

// 상위 컴포넌트에서 받은 프롭스를 구조분해 할당으로 사용한다. 
const AppRouter = ({isLoggedIn}) =>
{
    return(
        <Router>
                <Routes>
        {isLoggedIn ? (
          <Route exact path="/" element={<Home />}></Route>
        ) : (
          <Route exact path="/" element={<Auth />}></Route>
        )}
      </Routes>
        </Router>    
    );
};

export default AppRouter;

 

 

2)jsconfig.json 파일과 함께 절대 경로 적용

다른 파일을 불러올 때 import구문을 사용한다.

현재 상대경로를 사용중이다. ../routes/Home과 같이 가독성이 좋지 않은 상태.

루트폴더에 jsconfig.json 파일을 만들어 아래와 같이 작성.

이 파일은 리액트에 사용할 자바스크립트를 위한 설정 파일이라 생각하면 된다.

이렇게 작성하면 절대경로를 사용할 수 있다.

{
    "compilerOptions":{
        "baseUrl": "src"
    },
    "include":["src"]
}

 

3)컴포넌트의 import문 수정하기

 

기존 파일에서 상대 경로가 사용된 곳을 모두 수정한다.

App.js 

Router.js

index.js 의 상단 import부분의 상대경로를 절대경로로 수정

 

4)firebase.js의 이름 변경

절대경로의 아쉬운 점은 파일이름과 npm install로 설치된 패키지이름이 파일이름과 동일하면 오류 발생.

firebase.js 를 fbase.js로 변경

 

5)파이어베이스 인증 모듈 사용하기

인증모듈을 사용하려면 firebase/auth를 추가로 임포트 해야한다.

 

fbase.js

import firebase from "firebase/compat/app";
import "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
};

firebase.initializeApp(firebaseConfig);
export const authService = firebase.auth();

 

파이어베이스 초기화는 다른 파일에서 참조할 필요가 없으니 fbase.js내부에 선언 (마지막 두번째줄)

하지만 로그인을 위해 사용할 firebas.auth는 다른 파일에서 참조해야 하므로 마지막처럼 선언.

 

5.5) 오류 발생

firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.auth is not a function

파이어베이스 버전이 업데이트 되면서 api 방식이 바뀌었다고 한다..

fbase.js 임포트 부분을 import "firebase/compat/auth"; 로 변경하였다 (가운데에 compat 추가)

찾아보니 완벽한 해결법은아니고 임시방편이라는데 3년전과 버전이 많이 달라서 이런 충돌이 생기는 듯 하다.

 

오류 해결 후 콘솔창을 열면 null을 확인.

 console.log(authService.currentUser); 

오류 해결 후 콘솔 확인하면 null 출력

 

이제 currentUser에 따라 로그인 상태를 바꿔줄 수 있다.

이 값을  useSate 초기값으로 정의하기.

App.js

false에서 authService.currentUser 로 수정.

const [isLoggedIn,setIsLoggedIn] = useState(authService.currentUser);

 

---

2.파이어베이스 로그인 설정

이메일,비밀번호 기반 로그인과 구글, 깃허브 소셜 로그인을 누이터에 적용해보자!

이를 위해 파이어 베이스 기본 설정을 해야하므로 아래와 같이 작업을 진행한다.

 

1)파이어베이스 인증 설정하기

-파이어베이스 홈페이지로 가서 이전에 만들었던 nwitter 프로젝트를 선택.(이하 파이어베이스 콘솔)

-Authentication으로 이동 후 시작하기 선택

 

-사용자 탭->로그인 방법 설정 선택

-이메일,구글은 기본세팅

-깃허브

 

-맨 아래 코드 복사

-깃허브 본인 계정 settings 페이지로 이동

-Developer Settings 이동

-OAuth Apps 이동

 

 

-Register aplication 로 페이지 이동

-상단은 파이어베이스 github / 하단은 github 최종페이지 인데 아이디와 비밀번호를 입력해주면된다.

보안 키 발급받으려면 Generate a new client secret 버튼을 누르면 됨.

 

 

 

 

2)로그인 폼 기본 구조 만들기

Auth.js

const Auth = () =>{
    return(
        <div>
            <form>
                <input type = "email" placeholder="Email" required/>
                <input type = "password" placeholder="Password" required/>
                <input type = "submit" value = "Log in"/>
            </form>
            <div>
                <button>Continue with Google</button>
                <button>Continue with Github</button>
            </div>
        </div>
    );
};
export default Auth;

 

3)로그인 폼이 상태를 업데이트 하도록 만들기

리액트에서 input 엘리먼트를 관리하고 form 엘리먼트가 실행되도록 만들어야한다.useState 함수로 상태를 만들어주고 onChange,onSubmit 함수로 이벤트 연결하기.

import { useState } from "react";
const Auth = () =>{
    const [email,setEmail] = useState("");
    const [password,setPassword] = useState("");

    const onChange = (event)=>
    {
        console.log(event.target.name);
    }

    const onSubmit = (event)=>
    {
        event.preventDefault();
    }
    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 = "Log in"/>
            </form>
            <div>
                <button>Continue with Google</button>
                <button>Continue with Github</button>
            </div>
        </div>
    );
};
export default Auth;

 

여기서 한 번 더 수정한다!

이렇게 하면 내가 입력한 이메일과 패스워드가 실시간으로 인풋에 반영됨

const onChange = (event)=>
    {
        // console.log(event.target.name);
        const{
            target : {name,value},
        } = event;
        if(name==="email"){
            setEmail(value);
        }
        else if(name==="password"){
            setPassword(value);
        }
    };