[전기차 충전소 찾기 앱/ReactNative] 로그인 구글 인증 -clerk 사용

https://clerk.com/

 

https://undraw.co/illustrations

Illustrations | unDraw

이미지 참고 

 

 

파이어 베이스를 사용하지 않고도 

인증을 해주는 서비스가 있음 

 

Clerk | Authentication and User Management

 

가입을 해준다. 

 

 

 

리액트 선택

 

expo Clerk 라이브러리를 설치한다. 

 

https://clerk.com/docs/quickstarts/expo

Use Clerk with Expo | Clerk

 

 

 

 

App.js

 

 

API KEY 몇글자 지움 

  return (

    <ClerkProvider publishableKey="pk_test_ZGVmaW5pdGUta3JpbGwtNzAuY2xlcmsuYWNjb3VudHMuZG>

      <View style={styles.container} onLayout={onLayoutRootView}>

        <SignedIn>

          <Text>로그인 되었습니다.</Text>

        </SignedIn>

        <SignedOut>

          <LoginScreen />

        </SignedOut>

        <StatusBar style="auto" />

      </View>

    </ClerkProvider>

  );

}

 

clerk  의 기능으로 

 

로그인 상태와 로그아웃 상태를 나타낸다 

 

로그아웃시에만 로그인 페이지가 보이도록 한다.

 

App에 새 폴더 생성한다. 

 

warmUpBrowser.tsx

 

 

왜 tsx냐면

 

사용서에 그렇게 하라고 함 ...ㅎ

https://clerk.com/docs/quickstarts/expo

 

그대로 복사해서 붙여넣기 함

 

import * as WebBrowser from "expo-web-browser";

이 라이브러리를 설치한다.

 

 

https://clerk.com/docs/quickstarts/expo

LoginScreen.jsx에 아래의 코드도 추가한다. 사용설명서에 있는 그대로 사용 

 

그리고 기존의 로그인 버튼 클릭했을 때 출력되는 콘솔 대신에 onpress 함수가 실행되도록 변경한다.

      <TouchableOpacity style={styles.button} onPress={onPress}>

        <Text style={{ color: "white", textAlign: "center" }}>

          Login With Google

        </Text>

      </TouchableOpacity>

 

테스트 할 때 로그인 버튼을 클릭하면

 

구글 인증을 넘어간다.

 

그리고 인증이 완료되면 

 

로그인 되었습니다로 변경됨 

 

클럭에서 USERS확인해보면 인증된 유저들 확인됨