쿠키가 존재하면 로그인 상태라고 할수있는가?

https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app

Setting up Server-Side Auth for Next.js | Supabase Docs

우선, 로그인 회원가입 기능을 구현하기 위해 수파베이스의 서버사이드 인증 방식을 택했다.

 

그 이유는

1. 보안성 강화

클라이언트 에서 토큰을 관리하면 로컬스토리지에 저장이 되는데 이는 XXS(크로스 사이트 스크립팅) 공격에 취약하다. 서버측에서 관리하게 되면, 클라이언트에 토큰이 노출되지 않아 안전하게 인증 상태를 관리할수 있다.

 

• JWT : 쉽게 생각해서 여권과 같은 개념으로, 여권을 다른사람이 가져가서 본인인척 할수 있다. (만약 탈취당하면 다른 사람이 내 정보로 로그인할 수 있음..)
• 세션 :  수파베이스는 세션 방식을 사용해서 인증을 관리하는데, 실시간으로 본인임을 인증을 해야해서 JWT보다 보안이 훨씬 좋다. (하지만 매번 본인임을 인증해서 서버에 부담이 갈수 있다. -> 이또한 수파베이스 에서 지원을 해주기때문에 걱정 할 필요가 없다!)
• 쿠키 : 클라이언트에 저장되는 작은 데이터 파일이다.(Supabase는 이 쿠키를 통해 세션 정보를 안전하게 관리한다.)

 

2. 미들웨어를 통한 인증처리 

 미들웨어 = 요청이 처리되기 전에 실행되는 서버 측 함수이다. 요청을 가로채어 인증, 리다이렉션, 또는 사용자에 맞는 페이지를 제공하는 등의 작업을 하여준다.

• 사용자 인증 및 권한 검증: 특정 페이지에 접근하기 전에 사용자가 인증되었는지 확인
• 페이지 리다이렉션: 권한이 없는 사용자를 로그인 페이지로 리다이렉션하거나, 다른 적절한 페이지로 안내
• 요청 정보 변경: 요청 객체의 내용을 변경하거나 추가 작업을 수행

한마디로, 미들웨어는 요청과 응답 사이에서 인증을 담당하는 보안 관문 역할을 한다.
덕분에 프론트엔드 코드가 복잡해지지 않으면서도, 보안성과 유연한 사용자 흐름 제어가 가능하다.

 

이렇게 서버 사이드 인증방식응로 구현을 한후, 로그인이 되면 쿠키를 받아올수 있다.

그런데 여기서 의문점이 있었다.

 

onAuthStateChange 를 통해 왜 로그인 상태를 다시한번 반영을 해주어야 할까?

 

로그인을 하게되면 위 와 같이 쿠키값이 주어진다. 그런에 이 방식은 사실상 서버측에서 페이지 진입시점에서 한번만 구현이 된다.

그리고, 서버측에서만 사용자가 로그인 한것을 인지하기 때문에, 클라이언트 단에서도 상태를 반영해주어야 한다.

또한 클라이언트 구조에서 로그인/로그아웃 같은 상태변화가 실시간으로 일어나게 되는데,

이걸 감지하고 클라이언트 상태에 반영해주기 위한 설정이 필요한데, 이때 사용하는 것이 바로 'onAuthStateChange' 이다.

 

- onAuthStateChange 사용법

supabase.auth.onAuthStateChange((event, session) => {
  // 로그인, 로그아웃, 토큰 리프레시 등 감지 가능
});

 

결론적으로 정리하자면,

쿠키값이 있으면 로그인 상태가 라고 할수있는것은 맞지만, 이 상태를 서버에서만 알고있다.

그렇지만 클라이언트는 쿠키값을 자동으로 읽어서 로그인상태를 판단해주지않기 때문에 실제 로그인 한건지 안한건지 확인할 방법이 없다.

그래서 onAuthStateChange 로 로그인 이벤트를 감지하여서 클라이언트 측에서도 확인할수 있게 해야한다.

 

이렇게 하면 서버와 클라이언트 모두에서 로그인 상태를 인식할수 있고, 인증상태를 유지할수 있다!