Supabase 인증 연결

[DevYuns]

Description

Supabase auth와 연동 시, 이메일/패스워드 로그인은 잘 동작하지만, oauth 기반의 로그인(ex. google, facebook)은 공식문서에서 제공하는 API를 사용할 시 앱에서 리다이렉션이 일어나지 않고 아래와 같은 값을 리턴 해줍니다.

  const response = await supabase.auth.signInWithOAuth({
    provider: 'google', // 'facebook', 'github' etc..
  });

/*
   {
     "provider": "google",
     "url": "https://<project_ref>.supabase.co/auth/v1/authorize?provider=google&redirect_to=exp%3A%2F%2F192.168.0.29%3A19000%2F--%2Fauth%2Fcallback"
   }
*/

따라서 모바일 환경에서는 expo-auth-session을 사용하여 직접 로그인을 시도 해줍니다.

웹

웹에서 auth-session을 사용할 시, 제대로 리다이렉션을 처리하지 못하 상황이 발생해서, 기존 API 방식을 사용합니다. 이 경우, 로그인 이후 세션이 제대로 설정되지않고 url의 형태가 웹에서 바로 읽을 수 없는 형태로 들어오기 때문에 (쿼리 스트링의 시작점이 ?가 아닌 #) useWebAuth 라는 커스텀 훅을 만들어서 url을 처리해줍니다.

안드로이드

안드로이드의 경우, expo-router의 문제로 auth-session으로 인증 이후, 리다이렉션을 했을 때, 제대로 linking이 되지않아 Unmatched url 에러가 납니다. 이를 대처하기 위해 [...unmatched].tsx 라우트를 루트에 만들어서 라다이렉션만 담당해줍니다.

---

References

• https://dev.to/fedorish/google-sign-in-using-supabase-and-react-native-expo-14jf
• https://stackoverflow.com/questions/66484115/couldnt-get-back-in-my-app-once-im-login-in-with-spotify
• Configure Google OAuth with React native app. supabase/supabase#1717
• Cannot login with OAuth on Safari, either on mobile or on desktop supabase/auth-js#292