[feat] 유저 인증 시스템 구현 #13
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/login의 page.tsx에서 로그인과 redirection 과정을 모두 처리하는 것은 비효율적인 것 같아 /login/<provider>에서 redirection을 처리하도록 변경했고, 해당 경로의 page.tsx에서는 받은 code를 서버에 전달한 후 인증 정보를 받아 전역적인 auth state를 변경시켜준다. 모든 작업이 끝나면 일단은 home으로 이동시키는데, 추후에는 로그인 페이지로 이동하기 이전의 경로로 redirect 해주도록 설정해주면 좋을 것 같다.
유저 인증 정보를 state로 관리하기 위해 zustand를 사용하여 useAuthStore을 구성했다. 또한, useAuth라는 커스텀 훅을 만들어, login, logout, refresh, authFetch 함수들을 사용할 수 있도록 헀다. authFetch는 인증이 필요한 요청을 처리하는 custom Fetch 함수다. 유저가 로그인하면 login/<provider>에서 login 요청을 서버에 보낸후 authorized된다. 처음 앱이 렌더링될 때마다 refresh 함수를 작동시킬 수 있도록 AuthProvider 컴포넌트를 만들었고, 해당 컴포넌트 안에서 refresh 함수를 통해 authorizing을 시도한다.
withAuth 함수를 정의하여 특정 페이지 진입시 auth 여부에 따라 분기 처리할 수 있도록 했다. 원하는 페이지 컴포넌트에 withAuth 함수를 씌워 export 하면 된다.한 가지 단점은 react hook을 사용하는 기능이기 때문에 해당 페이지를 client component로 선언해야 한다는 점이다. 또한, auth 관련 fetching 과정에서 loading 중인 state를 기록하기 위해 authInfo에 isLoading이란 속성을 추가했다.
oooppq
force-pushed
the
feature/auth
branch
from
f9d4dd6
to
11c973c
Compare
변수 선언부 모으기, auth 관련 컴포넌트 commom/auth로 이동, useAuth의 파일이름 useAuth.ts로 변경, auth state 를 auth state와 user state로 변경, useEffect에 적절한 dependency 추가
일반 fetch 함수와 유사한 형태로, fetch options를 전달받도록 변경했다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR 요약
변경된 점
이슈 번호