JWT 토큰을 이용한 로그인 방식

어쩐지 이런 방식으로 사용하는 건 권장하지 않는다고 구글에서 나오길래 어케해야 하나 싶었습니다..

1. 처음 로그인 성공 후 로그인 유지를 어떻게 시키는 지?

처음 로그인에 성공하면 서버에서 응답코드 200 날려주고
data.data에 토큰을 담아 보내주는 것 이외에는 다른 동작이 없습니다.
그렇다면 어떻게 프론트 단에서 로그인 여부를 검증하는가요?
액세스 토큰이 유효한 지 검사하는 API를 거쳐서 (아직 이런거 없음 만약 필요하다면 만들어야 함)
이게 유효하다고 나오면 로그인을 유지시키는 방식인가요?

2. 토큰 파싱을 하지 않는다면 유저의 정보(로그인 유무, 유저 이름 등)를 어떻게 따로 빼서 저장하는지?

그리고 토큰 파싱을 하지 않는다면 유저 이름은 백 쪽에서 API를 하나 만들어
그 API에 액세스 토큰을 제시하고 거기서 받아온 값을 로컬 스토리지에 저장하는 게 일반적인가요?

3. 만약 그럴 경우 지금 제가 이해한 내용이 맞는지

일반적인 로그인 과정 (이게 제일 헷갈림)
1) 로그인 폼에 아이디, 비밀번호 입력 후 전송
2) 등록된 사용자인 경우 서버에서는 응답코드 200과 함께 액세스/리프레시 토큰 담아줌
3) 프론트에선 먼저 액세스 토큰과 리프레시 토큰을 각각 저장하기로 한 장소에 저장함
4) 전달받은 액세스 토큰을 액세스 토큰 유효 검증 API에 보냄
5) API에서는 유효 유무, 유저 이름와 토큰 만료 시간(?) 등을 반환
6) 유효한 지 확인이 되었다면 그 유저의 이름과 로그인 상태는 로컬 스토리지에 저장
7) 로컬 스토리지의 로그인 상태를 useEffect로 엮어서 로그인 상태가 Y인 경우 
로그인 상태가 Y일때 나오는 화면구성으로 전환(예를 들어 로그인 → 로그아웃 / 회원가입 → 마이페이지 등)

액세스 토큰 만료 시 거치는 과정
1) 마이페이지 접근 시 유효한 액세스 토큰을 받아야 유저의 상세 정보를 반환해주는 API가 있다고 가정
2) 현재 액세스 토큰은 만료되었고 리프레시 토큰은 유효기간이 남아있는 상태
3) 그런 상황에서 마이페이지에 접근했을 때 서버에서는 유효하지 않은 액세스 토큰이므로 빠꾸처리
4) 빠꾸 받았을 경우 일단 액세스 토큰 연장 요청 API에 가서 연장받게끔 처리함
5) 토큰 재발급 API에서는 유효한 리프레시 토큰을 받았으므로 액세스 토큰을 새로 발급해줌.
6) 다시 마이페이지 접근, API는 유효한 액세스 토큰을 받았으므로 유저의 정보를 정상적으로 출력
(이게 마이페이지 한 번 클릭했을 때 일어나는 일련의 과정)

리프레시 토큰 만료 시 거치는 과정
1) 위와 똑같이 마이 페이지에 접근하려고 하는 상황. 그런데 이번엔 리프레시 토큰도 만료됨.
2) 마이페이지 접근 시 액세스 토큰 만료되었으니 빠꾸시킴
3) 그래서 액세스 토큰 재발급 API에 접근했으나 이번엔 리프레시 토큰도 만료됨. 역시 빠꾸
4) 액세스 토큰 재발급에서도 빠꾸를 받았으니 프론트에서는 특정 경고창과 함께 로그아웃 처리
5) 로컬 스토리지에 있는 로그인 상태는 N, 액세스 토큰은 삭제 처리

쓰앵님 말씀대로 서버에서 로그인 성공 시 API에서 유저 정보를 수신할 수 있도록 해서 얼추 구현은 완료됐습니다.
문제는 다른 데에서 또 생겼는데요, HttpOnly 쿠키에 담긴 리프레시 토큰과 관련해서 문제가 생겼습니다.

액세스 토큰이야 로컬 스토리지에 저장해서 서버 API의 Required가 액세스 토큰일 경우에
로컬 스토리지에 담긴 액세스 토큰을 꺼내서 axios.get('url', { headers : { Authorization : `Bearer ${액세스토큰}` } }) ...
이런 식으로 요청을 하면 되는건데

리프레시 토큰은 서버에서 보낼 때 쿠키 헤더에 넣어서 자동으로 HttpOnly 쿠키에 집어넣는 방식이고
그걸 클라이언트 단에서는 건드릴 수가 없으니(js로 조작 불가)
액세스 토큰 재발급 요청 API에 리프레시 토큰을 제출해야 하는 상황에서 어떻게
HttpOnly 토큰을 보내야 하는 지 궁금합니다.
저것도 쿠키니까 수신만 잘 되어있으면 POST 요청할 때 별도로 건드릴 필요없이
요청만 하면 알아서 서버가 잘 받아오는 구조인건가요?

또 하나 문제가 더 있는데 일단 로그인에 성공했을 때 res.data.data에 액세스 토큰이 담겨오는 것은 확인했지만
HttpOnly 쿠키는 개발자도구 → 애플리케이션 탭에서 쿠키 조회를 해봐도 보이지가 않습니다.
검색해보니 HttpOnly 쿠키는 브라우저에서 안 보일 수 있다고는 하는데
다른 사이트들 쭉 돌아다녀보니 HttpOnly 쿠키는 그냥 옵션에 체크가 되어있고 키-값이 다 보이더라구요?
그러면 수신이 제대로 안되고 있다는 얘기도 되는데.... 이걸 또 어떻게 확인해야 하는지 궁금합니다.

현재 만들고 있는 사이트가 http://로만 통신하고 있어서 문제가 생긴건지
아니면 CORS 관련해서 서버에서 뭔가를 좀 더 설정을 해줘야 하는 게 있는지 감이 잡히지가 않네요
현재 서버에서는 Set-Cookie : refreshToken=리프레시토큰내용; path=/; 
Max-Age=604900; expires=만료날짜; HttpOnly; SameSite=None으로 되어있는 상태입니다.
어째 통신쪽 들어오면서부터 난이도가 급상승하는 것 같네요 아오