구글 로그인 구현 1

리엑트 네이티브에서 구글 로그인을 구현하기 위해 react-native-google-sign-in 라이브러리를 사용하고자 했으나, 해당 라이브러리를 사용하니, 앱에서 아래의 오류가 뜨면서 구글 로그인 버튼이 랜더링이 되지 않는다.

RNGoogleSignInButton is not fabric compatible yet

내가 사용한 코드는 다음과 같다.

 

import {
  GoogleSignin,
  GoogleSigninButton,
} from '@react-native-google-signin/google-signin';

const LoginScreen = () => {
  const [idToken, setIdToken] = useState('');
  const onPressGoogleBtn = async () => {
    await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
    const { idToken } = await GoogleSignin.signIn();
    console.log('idToekn : ', idToken);
    if (idToken) {
      setIdToken(idToken);
    }
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    const res = await auth().signInWithCredential(googleCredential);
    console.log(res);
  };

  return (
    <Container>
      <View.Primary>
        <Text
          typography={{
            color: 'red',
            weight: 'normal',
            size: '12px',
          }}>
          로그인 화면입니다.
        </Text>
        <Text>{idToken}</Text>
        <GoogleSigninButton onPress={onPressGoogleBtn} />
      </View.Primary>
    </Container>
  );
};

저기서 GoogleSigninButton이라는 컴포넌트에서 오류가 발생하는데,

아무래도 fabric이라고 하는 리엑트 네이티브의 랜더링 아키텍처와 해당 라이브러리가 호환이 되지 않는 것 같아 해당 깃허브 사이트에서 관련 자료를 찾아보니, fabric 랜더링 아키텍처를 지원하는 라이브러리를 사용하기 위해서는 스폰서 등록을 해야 해당 라이브러리를 사용할 수 있도록 한다는 것이다.

 

https://github.com/react-native-google-signin/google-signin/issues/1090

New architecture support · Issue #1090 · react-native-google-signin/google-signin

 

 

해당 프로젝트에 15달러 정도 후원을 통해 스폰서로 등록을 하면 react native google sign in 라이브러리를 fabric 랜더링 시스템에도 호환이 되도록 할 수 있다고 한다.

 

물론 버튼을 랜더링할 수 없다는 것 뿐이지 나머지 함수들은 호출을 할 수 있는 걸로 보인다. 아래와 같이 구글 버튼을 만들어서 쓰는 경우에는 굳이 저 버튼을 고집할 필요는 없겠지만 앱 심사시에는 버튼 디자인으로 인해 심사에 걸릴 것 같기도 하다. 본인이 여유가 된다면 후원을 통해 저 버튼을 쓸 수 있겠다.

 

<Button onPress={onPressGoogleBtn}>
  <Text>로그인</Text>
</Button>

 

해당 라이브러리를 사용하면 생각보다 간단하게 구글 로그인 후, 사용자 정보를 가져올 수 있다.

 

아래 코드처럼 작성 하면 되는데 

const LoginScreen = () => {
  const [userInfo, setUserInfo] = useState('');
  const onPressGoogleBtn = async () => {
    await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
    const userInfo = await GoogleSignin.signIn();
    console.log('userInfo: ', userInfo);
    setUserInfo({ ...userInfo.user });
  };

  useEffect(() => {
    console.log('google signin configure');
    GoogleSignin.configure({
      webClientId:
        '',
    });
  }, []);

  return (
    <Container>
      <View.Primary>
        <Text
          typography={{
            color: 'red',
            weight: 'normal',
            size: '12px',
          }}>
          로그인 화면입니다.
        </Text>
        <Text>{JSON.stringify(userInfo)}</Text>
        <Button onPress={onPressGoogleBtn}>
          <Text>로그인</Text>
        </Button>
      </View.Primary>
    </Container>
  );
};

이 코드에서 중요한 부분은 두군데가 있다.

첫번쨰는 설정하는 부분으로 해당 함수는 최초 한번만 호출해야 하며, 호출 시, 파이어베이스나 구글 플랫폼의 webClientId를 필요로 한다.

  useEffect(() => {
    console.log('google signin configure');
    GoogleSignin.configure({
      webClientId:
        '',
    });
  }, []);

해당 부분은 useEffect를 사용하여 컴포넌트가 최초 마운트 될 때 1회 호출되도록 한다.

그리고 사용자가 로그인 버튼클릭 시 호출하는 버튼 핸들러 함수에 아래 코드를 추가하여 구글 로그인창을 불러오게 하고 사용자 정보를 불러온다.

  const onPressGoogleBtn = async () => {
    await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
    const userInfo = await GoogleSignin.signIn();
    console.log('userInfo: ', userInfo);
    setUserInfo({ ...userInfo.user });
  };

그리고 GoogleSingin.SignIn() 부분이 로그인 창을 띄우고 사용자 정보를 불러오는 부분인데 해당 함수의 리턴값은 다음과 같다. 여기서 사용할 부분은 적절히 사용하면 된다.

User {
  user: {
    id: string;
    name: string | null;
    email: string;
    photo: string | null;
    familyName: string | null;
    givenName: string | null;
  };
  scopes?: string[];
  idToken: string | null;
  /**
   * Not null only if a valid webClientId and offlineAccess: true was
   * specified in configure().
   */
  serverAuthCode: string | null;
}

user 객체를 통해 이름, 이메일, 아이디, 프로필 사진을 가져올 수 있다.

여기서 idToken을 통해서 사용자를 식별한다.