onAuthStateChange 썼는데, 로그인 직후 로그아웃 되는 이유?

👿 문제상황

로그인을 하고 onAuthStateChange 의 세션 확인을위해 콘솔창을 열어보니

세션값을 잘 받아왔다가, 아무런 이벤트를 발생시키지 않았음에도 불구하고 자동으로 null값으로 바뀌는 현생이 발생

 

(진짜 아무런 동작을 하지 않았고 한번에 저런 콘솔이 뜬다 ㅠㅠ)

const [session, setSession] = useState<Session | null>(null);
  useEffect(() => {
    const {
      data: { subscription }
    } = supabase.auth.onAuthStateChange((_event, session) => {
      // if (session) {
      //   setSession(session);
      // }
      setSession(session);
      console.log('session', session);
      console.log('_event', _event);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [session]);
  console.log('session: ', session);

 

🤔 원인추론

위 콘솔을 보면 이벤트가 "SIGN_IN"이었다가 "INITIAL_SESSION" 로 변경되었다

 

그렇다면 onAuthStateChange 의 실제 이벤트는 어떤 종류들이 있을까 ?

https://supabase.com/docs/reference/javascript/auth-onauthstatechange?queryGroups=platform&platform=yarn

JavaScript: Listen to auth events | Supabase Docs

 

const { data } = supabase.auth.onAuthStateChange((event, session) => {
  console.log(event, session)

  if (event === 'INITIAL_SESSION') {
    // handle initial session
  } else if (event === 'SIGNED_IN') {
    // handle sign in event
  } else if (event === 'SIGNED_OUT') {
    // handle sign out event
  } else if (event === 'PASSWORD_RECOVERY') {
    // handle password recovery event
  } else if (event === 'TOKEN_REFRESHED') {
    // handle token refreshed event
  } else if (event === 'USER_UPDATED') {
    // handle user updated event
  }
})

// call unsubscribe to remove the callback
data.subscription.unsubscribe()

 

공식문서에서도 나와있듯이

• SIGNED_IN : 로그인 했을때
• SIGNED_OUT : 로그아웃 했을때
• PASSWORD_RECOVERY : 비밀번호 재설정 플로우가 시작될 때
• TOKEN_REFRESHED : access token이 자동으로 갱신되었을 때 
• USER_UPDATED : 유저정보가 변경되었을때

그렇다면

❓ 왜 사용자가 아무 것도 안 했는데 session이 null로 바뀌고 이벤트도 변경이 되었을까?

supabase.auth.onAuthStateChange((event, session) => {
  console.log('event:', event)
  console.log('session:', session)
})

 

수파베이스의 onAuthStateChange는 인증상태가 바뀔때마다 호출되는 리스너 역할을 하게되는데,

단순히 로그인시, 로그아웃 시 뿐만아니라 앱이 처음 로드될때의 세션상태도 감지하기 위해 호출이 되기 때문에

초기진입시  "INITIAL_SESSION" 이벤트가 호출되어서 세션값이 자동으로 null로 변경되었다..

 

 

⚒️ 해결방법 

로그인했을때만 세션을 반영해야하기 때문에 "SIGNED_IN" 이벤트에만 상태를 반영해주면 되지않을까?

useEffect(() => {
    const {
      data: { subscription }
    } = supabase.auth.onAuthStateChange((_event, session) => {
      if (_event == 'SIGNED_IN') {
        setSession(session);
        console.log('useEffect session', session);
      }
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

 

이렇게 원하는 이벤트에만 상태적용을 하면 불필요한 이벤트로 인해 상태가 업데이트 되는것을 막을수 있겠다.

 

결론

Supabase의 onAuthStateChange는 굉장히 유용하지만, 초기 이벤트까지 포함해서 작동하므로 상태 반영 시엔 이벤트 타입을 꼭 구분해서 처리해주는 것이 좋을거같다!