gijol / gijol-v2 Goto Github PK

NextAuth를 이용하여 로그인을 할 때에는, 해당 라이브러리의 signIn 로직을 사용합니다.

문제는 signIn 이 진행된 뒤에 생깁니다.

지졸 서버에 회원 정보가 디비에 저장되어 있는 여부를 확인하기 위해서는 로그인이 진행된 뒤 세션 속 id 토큰의 정보를 이용해야 합니다.

그렇기에 '회원가입' 페이지로 이동할 것이냐, '대쉬보드' 페이지로 이동할 것이냐를 결정하는 로직은 signIn 이 진행된 이후에야 결정되기에 콜백으로 회원 여부를 판단하게 됩니다.

signIn 콜백에서 리턴할 수 있는 타입은 두 가지입니다. boolean과 string이죠.

1. boolean을 리턴하는 경우, true라면 로그인 이벤트가 트리거 될 때 설정한 callback url로 이동하고 로그인이 완료되게 됩니다.
2. boolean을 리턴하는 경우, false라면 로그인이 중단됩니다.
3. string을 리턴하는 경우, 해당 string이 리디렉션 url이 되고 로그인 과정은 중단되면서 리디렉션이 됩니다. 즉, 리디렉션 이후에는 사용자의 로그인 정보는 존재하지 않습니다.

즉, 리디렉션 하려던 url을 signIn 콜백에 로직을 넣게 된다면, 로그인이 안된 상태로 리디렉션 되는 것입니다. 즉, 회원 여부를 확인하기 위한 구글 id 토큰 정보는 어디에도 없는거죠.

이렇게 되면, 회원가입 페이지에서 다시 한번 로그인 과정이 필요하게 됩니다.

저는 이 과정이 불필요하다고 생각했습니다. 오히려 구글 로그인을 두 번씩 진행한다는 것은 UX면에서 좋지 않다고 생각했습니다.

그래서 저는 기존에 이 문제를 callback url을 로그인 하던 화면으로 설정하고, 해당 화면에서 useEffect의 dependency array에 세션 정보 유무에 따라 회원 정보를 확인하고 리디렉션을 진행하는 방향으로 해결했었습니다. 즉, NextAuth를 이용한 로그인은 로그인대로 끝내고, 클라이언트 측에서 리디렉션을 진행하는 것이죠.

이렇게 되면, 로그인한 유저는 지졸 디비에 회원정보가 있든 없든 우선 로그인 페이지로 리디렉션되며 새로이 세션 정보가 생성되었으니 회원 유무 정보를 가져오는 요청이 발생하고, 해당 요청의 결과에 따라 리디렉션이 진행되는 것이죠.

여기서, useEffect의 세션 정보를 가져오는 과정은 결국 세션 정보에 의존을 하기 때문에 세션 정보에 영향을 주는 다른 이벤트들에 의해서도 트리거 될 수 있습니다. 여기서 불필요한 회원정보를 확인하는 요청이 발생하게 됩니다.

이를 조금 더 개선할 수 있는 방안을 고안하고는 있지만, 쉽게 답이 나오는 상태는 아닙니다. 뭐든 선택하기 나름이기에 어떤 UX를 제공해주는 것이 더 좋은 것일까에 대한 고민이 끊이지가 않는 것 같네요. 혹시나 아이디어나 개선안이 있다면 의견 남겨주시면 감사하겠습니다.