React 인증 DOM 추가하기

학습 목표

• How Authentication Works In React Apps
• Implementing User Authentication
• Adding Auth Persistence & Auto-Logout

Authentication: Adding Authentication To React Apps

How Authentication Works In React Apps

컴포넌트 뿐만 아니라 API에도 접근 제한을 걸어야 한다. API 주소를 알고 있을 수도 있기 때문이다.

접근 허가를 받을 때 yes or no 응답보다는 더 복잡한 절차를 사용해야 한다. 그에 대한 2가지 방법이 있다.

• Server-side Sessions: 사용자의 임의로 만든 고유 ID를 생성하고 저장해서 보낸다. 단점은 보내기 때문에 백엔드와 프론트와 떨어져 있다면 저장해선 안된다. 이때 인증 토큰을 사용한다.
• Authentication Tokens : 허가 토큰을 서버만 아는 키로 해싱해 생성한다. 보내지 않는다. 이렇게 하면 백엔드와 프론트와 분리가 가능하다. 일반적으로 JSON 웹 토큰 형식(JWT)으로 생성된다.

Implementing User Authentication

Firebase AUTH REST API를 사용해봅시다. Firebase의 Authentication 기능에서 확인할 수 있다.

참고로 API 키는 프로젝트 개요의 설정 아이콘을 누르고 프로젝트 설정에서 볼 수 있다.

Firebase 인증 REST API 문서

문서에 따라 endpoint, payload 작성해 HTTP 요청하면 된다. 만약 4자리 비밀번호를 입력한다면 Firebase는 오류를 반환할 것이고 그것을 사용자에게 보여줄 수 있다. 제대로 입력하면 Users 탭에 뜨게 된다. 참고로 이미 존재하는 이메일의 경우에도 오류를 생성한다.

Adding Auth Persistence & Auto-Logout

Adding Auth Persistence

로그인이 되어 있지 않은 경우에 비밀번호 변경 페이지에 접근할 수 있는 문제점이 있다. 이는 간단하게 Route 관련 컴포넌트를 조건부 렌더링하면 된다.

// Route 컴포넌트를 조건부 렌더링 하는 방법
{
  !authCtx.isLoggedIn && (
    <Route path="/auth" exact>
      <AuthPage />
    </Route>
  );
}
// 자식 컴포넌트를 조건부 렌더링 하는 방법
// Redirect 또는 404 컴포넌트여도 상관 없다.
<Route path="/profile">
  {authCtx.isLoggedIn && <UserProfile />}
  {!authCtx.isLoggedIn && <Redirect to="/auth" />}
</Route>;

Auto-Logout

새로고침하면 데이터가 사라져 로그인 여부를 알 수 없다. 브라우저의 저장소를 사용하면 되는데 아래 글에 따르면 더 낫다는 localStorage를 사용하겠다.

XSS 공격에서의 localStorage vs Cookie

‘token’과 ‘expirationTime’ 이름으로 자동 로그아웃시에는 setTimeout()을 이용하면 된다. 수동 로그아웃시에는 키와 타이머를 제거하고 로그인시에는 Firebase가 응답한 객체에서 만료 시간을 얻어서 키를 추가하면 된다.

---

강의명

• Udemy : React 완벽 가이드