리액트 인증 공부하기, 로그인 로그아웃 코드

 

대부분의 웹앱에는 인증 DOM이 필요하다.  

인증 DOM =Authentication DOM

 

사용자가 로그인해야만 접근 가능한 구역이 있다. 

 

1. 리액트 앱에서 인증이 작동하는 원리

2. 사용자 인증의 예시 (가입, 로그인, 로그아웃, 로그인 시 보호된 리소스에 접근하는 법)

3. 사용자가 페이지 떠나도 로그인 유지해주는 기능 & 자동 로그아웃 기능

 

 

---

웹사이트에서 인증이 필요한 이유
=> 보호해야 할 정보가 있다!!

 

유저 비밀번호, 데이터베이스에 저장된 데이터 및 미인증 사용자의 접근이 제한된 페이지에 리액트 앱이 요청을 보낼 때 그 요청을 받는 API 엔드 포인트가 그런 데이터에 속한다. 

 

프로필 페이지 자체에도 접근 제한 + 요청받는 API 엔드포인트에도 접근 제한 걸어야 한다. 

 

 

---

인증이 어떻게 작동할까?

 

일반적으로 인증은 2단계를 거친다. 

1단계 = 사용자가 접근 허가 받기

로그인으로 자격 증명해서 접근 허가 받을 수 있다. 로그인 시 자격 증명 제공하면, 데이터가 서버로 전송된다. 그러면 서버에서 데이터베이스를 살펴서 사용자의 아이디/비밀번호를 확인하고, 유효성이 검증되면 요청을 받은 백엔드 서버가 접근을 허가한다. 

(그렇다고 해서 yes/no 로만 응답하지는 않는다. )

2단계 = 서버쪽에서 보호된 리소스 보내주기

 

 

Server-side Session 이나 Authentication Token을 사용해야 한다. 

 

1. Server-side Session

사용자 접근을 허가한 서버가 허가를 받은 클라이언트(특정 사용자)의 고유 ID를 저장한다.

서버가 특정 클라이언트의 고유 ID를 생성하고 저장하기 때문에, 인증을 거치는 모든 사이트 방문자의 고유 ID가 서버에 저장된다.

이 ID는 서버에만 저장되지 않고 클라이언트에게도 전송된다. 그래서 서버와 클라이언트 모두 이 ID를 알고 있다.

 

👉후속요청 처리방법

클라이언트가 ID를 서버에 후속 요청을 보낼 때 함께 첨부하는데, 서버가 ID를 알고 있으므로 ID가 일치하면 접근이 허용되고, 후속 요청이 허가된다. 그게 아니면 불가!

 

👉단점 = 백엔드와 프론트엔드의 결합이 긴밀하면 아무 이상 없지만 분리돼 있다면 이야기가 달라진다.

(서버는 클라이언트의  상태를 보존하지 않는 무상태이기 때문에)

접속한 클라이언트의 데이터를 저장해선 안 된다. 

👉단점 해결방법 

백엔드와 프론트엔드 분리 상태는 특히 싱글 페이지 앱 개발에서는 Server-side Session 말고  Authentication Token 방식을 사용하면 된다. 

 

 

2. Authentication Token

사용자가 아이디과 비밀번호로 서버에 자격 증명을 보내면 서버가 그걸 데이터베이스에 저장된 아이디/비밀번호 조합과 비교해 유효성을 확인한다. (여기까지 Server-side Session 방식과 같음)

그런데 자격이 증명되면 서버가 허가 토큰이라는 걸 생성한다.

(토큰은 서버가 특정 알고리즘에 따라 생성하는데, 이때 중요한 건 서버만 아는 키를 사용해 데이터를 문자열로 해싱한다. )

토큰은 서버에 저장되지 않고 클라이언트에게 다시 전송되지만 토큰을 생성하는 법은 서버만 알고 있다.!!

👉후속요청 처리방법

클라이언트는 이 토큰을 서버의 보호된 리소스에 보낸다. 

서버는 세션 기반 기법과 달리 ID를 저장하지 않았지만, 자신이 생성한 토큰인지 확인할 수 있다. 

왜냐면 토큰 생성에 사용된 개인키를 아는 건 서버뿐이기에!!

그래서 보호된 리소스에 접근 요청을 보낼 때 첨부된 토큰의 유효성을 서버가 확인할 수 있는 것이다. 

토큰이 위조됐거나 다른 키로 생성됐으면 서버가 이를 감지하고 접근을 거부한다. 

 

추가공부

 

Authentication Token은 일반적으로 'JSON 웹 토큰 (JWT)' 형식으로 생성된다. 

JWT는 데이터를 문자열로 인코딩하는 알고리즘에 의해 구성된 긴 문자열이다. (private key의 도움으로 서버에서만 알 수 있다. )

 

 

 idToken이 담긴 응답을 받았다면 사용자가 유효한 자격 증명을 제공한 것이다. 

 

여기까지 마쳤다면, 작동중인 리액트 앱 어딘가에 토큰을 저장해야한다. 

왜?

모든 컴포넌트에서 사용해야 하니까!

 

토큰은 app wide state 이어야 한다. => 컨텍스트 api or 리덕스 활용하기!

 

 

참고)

const userIsLoggedIn = !!token;

자바스크립트 문법이다. 

다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환(Type Conversion)하기 위해 사용한다. 

참 또는 거짓 값을 부울 값으로 바꿔준다. 

토큰이 빈 문자열이 아니면 true를 반환하고

토큰이 빈 문자열이면 false를 반환한다. 

 

---

서드 파티 API로 작업한다면 토큰을 어떻게 추가하는지는 엔드포인트에 따라 다르다. 

여기서는 body에 추가했지만, 다른 엔드포인트는 쿼리 매개변수로 토큰을 추가해야 할 수도 있고, 

어떤 API 엔드포인트는 headers에 추가해야 할 수도 있다.

 

그래서 서드파티 API로 작업 중이면 API 문서를 보고 토큰 추가 방식을 확인하기!!

---

'usehistory' is not exported from 'react-router-dom'. 이러한 오류가 발생해서 , 검색을 해보니 useNavigate로 변경되었다고 합니다.

 

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate(); navigate('/home')

 

---

로그아웃 기능은 파이어베이스에 요청을 보내지 않아도 된다. 

왜냐면, 인증 토큰 방식은 로그인한 클라이언트의 어떠한 정보도 서버에 저장되지 않기 때문이다! 

 

그래서 로그아웃 시 바꿔야할 것은 state 단 하나이다!

context-API에서 토큰을 비우면 된다. (빈 문자열이나 null로 설정하기)

 

---

로그인 상태가 아닐 때도 URL에 직접 ‘/profile’을 붙여 접속하면 프로필 페이지가 뜬다.  (접근할 수 없는게 정상)

해결방법 => 네비게이션 가드 기능 추가하기

** 로그인 여부에 따라 App.js의 라우트 설정을 동적으로 바꾸는 것이다. 

 

=> 사용자의 현재 인증 상태를 특정 라우터의 조건으로 삼으면 된다. 

 

AuthContext 컴포넌트의 isLoggedIn을 사용하면된다. 

import { useContext } from "react";
import AuthContext from "./store/auth-context";

function App() {
  const authCtx = useContext(AuthContext);

  return (
    <Layout>
      <Switch>
        <Route path='/' exact>
          <HomePage />
        </Route>
        {!authCtx.isLoggedIn && (
          <Route path='/auth'>
            <AuthPage />
          </Route>
        )}
        {authCtx.isLoggedIn && (
          <Route path='/profile'>
            <UserProfile />
          </Route>
        )}
      </Switch>
    </Layout>
  );
}

 

👇 사용자가 유효하지 않은 경로로 접속하거나 로그인 없이 '/profile'에 접속할 때마다 작동한다. 👇

import { Switch, Route, Redirect } from "react-router-dom";

function App() {
	return 
    	<Route path='*'>
          <Redirect to='/' />
        </Route>      
}

 

 

---

다시 로드하거나 URL을 입력할 때마다 인증 상태를 잃는다. 왜냐면 리액트 앱을 다시 시작하는 거니까!

 

로드할 때마다 데이터를 잃고 싶지 않다면 토큰을 리액트 상태 바깥 어딘가에 저장하면 된다. 

=> 브라우저에 있는 저장 메커니즘을 활용하자. ex) 쿠키, 로컬 스토리지 => 그러면 페이지 리로드해도 데이터 살아남아 있다!

 

1. 로그인하면 토큰을 저장하고 싶다. 

const loginHandler = (token) => {
    setToken(token);
    localStorage.setItem("token", token);
  };

2. 로그아웃하면 토큰을 지우고 싶다.  

const logoutHandler = () => {
    setToken(null);
    localStorage.removeItem("token");
  };

3. 페이지가 로드되면 로컬 스토리지를 보고 토큰이 있으면, 토큰을 이용해서 사용자가 처음에 새 요청을 보내지 않게 하고 싶다. 

 

const initialToken = localStorage.getItem("token"); // 정확하게 하기 위해서 상태를 초기화
const [token, setToken] = useState(initialToken);

 

토큰이 만료되면 자동으로 사용자 로그아웃 하기

방법1. 타이머 설정

방법2. 로컬 저장소에 남은 시간 저장하기

 

만료시간, 타이머 설정하기 (한시간이 디폴트)

 

//Auth-context.js

const logoutHandler = () => {
    setToken(null);
    localStorage.removeItem("token");
  };

const loginHandler = (token, expirationTime) => {
    setToken(token);
    localStorage.setItem("token", token);

    const remainingTime = calculateRemainingTime(expirationTime);

    setTimeout(logoutHandler, remainingTime);
  };

 

 //Authform.js
 
 .then((data) => {
        console.log(data);
        const expirationTime = new Date(
          new Date().getTime() + +data.expiresIn * 1000
        );
        authCtx.login(data.idToken, expirationTime.toISOString());
        history.replace("/"); // 비밀번호 변경 및 로그인 후에 리디렉션하기
      })

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓