supabase google auth

박정빈·2025년 5월 28일

Supabase

목록 보기
2/4

1.Google Cloud Console 접속
2.새 프로젝트 생성
3.API 및 서비스 > 사용자 인증 정보로 이동
4. 사용자 인증 정보 만들기 > OAuth 클라이언트 ID 선택 (web)
5.생성된 클라이언트 ID,secret key 를 supabase google auth 설정에 기입해야함
6.supabase dash board-authentication-Sign In/Provider 에서 google auth 를 enable로 설정 후 기입
7. 기입한 곳에서 Callback URL (for OAuth) 를 다시 웹 애플리케이션의 클라이언트 ID의 call back url 로 기입

  1. 라이브러리 설치
    npm install @react-native-google-signin/google-signin

9.진입점인 App.tsx에서 초기화

//App.tsx
import { GoogleSignin } from '@react-native-google-signin/google-signin';
..
  useEffect(() => {
    // Google Sign-In 설정
    try {
      GoogleSignin.configure({
        webClientId: '여기 추가',
        iosClientId:'여기 추가',
        scopes: ['profile', 'email'],
      });
    } catch (error) {
      console.error('[App.tsx] Google Sign-In configuration error:', error);
    }
  }, []); 

10.이런 식으로 로그인 함수 생성

const signInWithGoogle = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      if (userInfo.idToken) {
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: "google",
          token: userInfo.idToken,
        });
        console.log(error, data);
      } else {
        throw new Error("no ID token present!");
      }
    } catch (error: any) {
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        // user cancelled the login flow
      } else if (error.code === statusCodes.IN_PROGRESS) {
        // operation (e.g. sign in) is in progress already
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        // play services not available or outdated
      } else {
        // some other error happened
      }
    }
  };
  1. 구글 클라우드 콘솔의 사용자 인증 정보-OAuth 2.0 클라이언트 ID에서 사용할 os를 추가한다. (android or ios)
    안드로이드는 cd android && ./gradlew signingReport
    를 통해 sha-1 값을 확인할 수 있다.
  2. ios 에서 ios/[appname]/Info.list 에 아래 항목 기입
<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>[구글클라우드 콘솔 ios 클라이언트 ID]</string>
			</array>
		</dict>
	</array>

0개의 댓글