로그인 UX

Chanlendar 프로젝트 개발하다가 고민에 빠졌었다.

Chanlendar 의 모든 기능들은 로그인을 필요로 한다.

그래서 모든 서비스들의 URL로 접근하면 로그인 되어 있는지 검사하고 로그인 시켜야한다.

백엔드(DB)로 파이어베이스를 사용한다. 파이어베이스를 이용하여 자동 로그인은 조금 귀찮다.

자동 로그인 기능 구현을 위해 쿠키를 이용하는데, 쿠키를 언제 어디서 설정하고, maxAge 갱신을 할지 고민이었다.

솔루션

HOC 컴포넌트를 만든다. 이 녀석은 로그인 되어 있지 않으면 로그인 페이지로 보내는 역할을 한다.

로그인이 필요한 페이지들을 위 HOC 컴포넌트로 감싼다.

라우터 컴포넌트 이전에 자동 로그인용 컴포넌트를 배치시킨다. react의 reconciliation 알고리즘은 DFS 형식으로 작동하고, 자동 로그인을 먼저 시키기 위함이다.

일단 기본적인 쿠키 갱신은 하루다. 하루가 지나면 브라우저에서 자동으로 삭제된다. (maxAge)

컴포넌트 실행 순서에 따른 논리는 이렇다.

1. 쿠키가 있으면 유저가 로그인했었던 것이므로 자동 로그인을 시켜준다.
2. 로그인이 되어 있으므로 유저는 (로그인 상태를 요구하는) 원하는 페이지로 이동 가능하다.
3. 없으면 로그인이 안된 것이므로 자동 로그인은 건너뛴다.
4. 유저가 브라우저창에 타이핑해서 들어온 URL이 로그인을 요구한다면 로그인 페이지로 리다이렉트 시킨다.

쿠키 갱신은 자동 로그인이 되었을 때, 유저가 직접 로그인을 했을 때, 브라우저 창이 닫혔을 때다.

내 서비스는 지속적으로 창을 켜놓고 사용할 가능성이 있어서 api request가 일어날 때마다 갱신을 하는게 나아보인다.

백버튼

브라우저의 백 버튼을 누르면 이전 페이지로 돌아가야된다.

유저입장에서는 로그인을 하고 특정 페이지 이동을 위해 백 버튼을 누르면 로그인 페이지를 보여주지 말고, 특정 페이지로 가야된다.

솔루션

이건 react-router-dom 의 navigate에 있는 replace 속성을 이용하면 쉽다.

replace 속성은 navigate를 할 때, 히스토리 스택에 path를 늘리지 않고, 현재 path를 다음 path로 바꿀건지 정하는 속성이다.

보통 로그인 페이지에서 로그인을 성공하면 특정 페이지로 이동시킬 것이다.

navigate('/list', { replace: true });

위 코드를 로그인 페이지에서 사용하면 /list 로 이동하는데 브라우저의 히스토리 스택에는 로그인 페이지가 없을 것이다.