20241018 TIL: React Native에서 애플 로그인 기능 개발하기 [진행중]

룰루루 2024. 10. 18. 21:41

2024. 10. 18. 21:41

✅ 오늘 배운 것

우선 간단하게 애플 로그인 버튼부터 만들어 주자. 사실 엄청 간단하지는 않았다. 현재 프로젝트에서는 ui kitten의 eva 아이콘 팩을 쓰고 있었는데, 이 eva 팩에는 apple 아이콘이 없었다. 그래서 다른 서드파티 라이브러리에서 아이콘을 가져와야 했다. 다행히 이와 관련된 공식문서가 있어서 가이드를 참고하면서 따라해 보았다.

내가 사용하려고 하는 아이콘은 react-native-vector-icons 라이브러리의 AntDesign 패키지에 있었다. 그래서 다음과 같은 파일을 만들어서 RN에서 사용하기 위한 IconsPack을 만들어 주었다.

// antdesign_icons.js
import React from 'react';
import { StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';

export const AntDesignIconsPack = {
  name: 'antDesign',
  icons: createIconsMap(),
};

function createIconsMap() {
  return new Proxy(
    {},
    {
      get(target, name) {
        return IconProvider(name);
      },
    },
  );
}

const IconProvider = name => ({
  toReactElement: props => AntDesignIcon({ name, ...props }),
});

function AntDesignIcon({ name, style }) {
  if (!style) {
    return null;
  }

  const { height, tintColor, ...iconStyle } = StyleSheet.flatten(style);
  return <Icon name={name} size={height} color={tintColor} style={iconStyle} />;
}

그리고 UI kitten에서 아이콘을 사용하기 위해서는 앱의 가장 루트 파일(여기서는 _layout.jsx)에서 IconRegistry라는 컴포넌트를 통해 특정 아이콘 팩을 사용할 것이라고 명시해 주어야 했다.

기존에 이미 eva iconpack을 사용할 것이라고 명시해줬던 코드가 있어서, 그 다음과 같이 코드를 변경해 주었다.

// _layout.jsx
import { AntDesignIconsPack } from '@/antdesign-icons';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { IconRegistry } from '@ui-kitten/components';

<IconRegistry icons={[EvaIconsPack, AntDesignIconsPack]} />

그리고 버튼을 만들어 주었다. 현재는 뷰와 데이터 처리 로직을 조금 분리한 상태라서 데이터 로직에서 함수 하나를 import 하는 방식으로 코드가 짜여져 있었다.

// index.jsx
const { signInWithGoogle } = useGoogleAuth();

여기서 'signInWithApple' 함수를 추가하고, 구현부를 빈 함수로 작성해 주었다.

// index.jsx
const { signInWithGoogle, signInWithApple } = useGoogleAuth();

// useGoogleAuth.js
const useGoogleAuth = () => {
  const [androidClientId, setAndroidClientId] = useState('');
  const [iosClientId, setIosClientId] = useState('');

  const signInWithGoogle = async () => {
    if (androidClientId === '') {
    } else {
      await promptAsync();
    }
  };

  const signInWithApple = async () => {
    if (iosClientId === '') {
    }
  };

  return { signInWithGoogle, signInWithApple };
};

그리고 구글 아이콘처럼 등록에 사용될 애플 icon 파일을 만들어 주고, 버튼 하나를 추가해 주었다.

// AppleIcon.jsx
import { Icon } from '@ui-kitten/components';
import React from 'react';

export const AppleIcon = props => (
  <Icon name="apple1" {...props} pack="antDesign" />
);

// index.jsx
const Login = () => {
  const { t, i18n } = useTranslation();

  const { signInWithGoogle, signInWithApple } = useGoogleAuth();

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.iconContainer}>
        <Image source={imageSource} style={styles.icon} />
      </View>
      <View style={styles.buttonContainer}>
        <Text category="h2">OneStep</Text>
        <Button accessoryLeft={GoogleIcon} onPress={() => signInWithGoogle()}>
          {t('views.index.googleSignIn')}
        </Button>
        // 추가한 애플 로그인 버튼
        <Button accessoryLeft={AppleIcon} onPress={() => signInWithApple()}>
          {t('views.index.appleSignIn')}
        </Button>
      </View>
    </View>
  );
};

그랬더니 다음과 같은 화면을 볼 수 있었다.

버튼 자체는 괜찮은데 버튼 사이의 간격이 너무 큰 것 같았다. 이 부분을 개선해 보자.

현재는 텍스트와 두 개의 버튼이 모두 하나의 View 컨테이너 안에서 justifyContent: space-evenly 속성을 적용받고 있었다. 이 부분을 수정해 주었다. 그랬더니 잘 나오더라!

이제는 기능 구현으로 넘어가 보자. 구글 로그인 때와 마찬가지로, 프론트 앱에서 로그인을 아예 완료한 다음에 서비스에 액세스토큰(구글의 경우는 idToken)을 전달하면, 서버에서 이를 서버와 통신할 때 쓸 수 있는 JWT 토큰으로 바꿔 주는 작업이다.

우선 처음 해 보는 작업이라 GPT의 도움을 받아서 시작하였다.

우선은 관련 패키지를 설치하고, Xcode 관련 iOS 설정을 해 준 다음에, 코드를 작성하면 된다고 한다. react-native-apple-authentication 이라는 라이브러리를 설치해 주었다.

npm install --save @invertase/react-native-apple-authentication

그리고 XCode 관련 설정을 해보았다. 사실 이게 시간이 오래 걸렸다. 처음에 XCode를 시작하려는데 더 높은 맥 버전이 필요하대서 맥 업데이트를 하고, XCode를 설치하고, 에뮬레이터를 깔고... 이렇게 기다리는 시간들이 오래 걸렸다.

그리고 마침내 iOS emulator를 얻어냈다.

구현하는 과정에서 두 가지의 문제가 생겼다.

현재 사용하려는 라이브러리의 appleauth 모듈을 안드로이드에서는 사용할 수 없다. -> 그러나 생각해보면 안드로이드에서도 애플 로그인을 지원할 수 있어야 하기 때문에 다른 라이브러리 등의 대안을 알아보는 것이 맞겠다.
'npx pod-install' 명령어에서 오류가 난다. -> 이 부분은 팀원에게 물어보니 ios 관련해서 별도로 추가해줘야 하는 설정 파일들이 있는 것으로 보였다. 이것들을 추가해서 다시 해보자.

많은 세부 과제들이 남아있어서 막막한데, 쪼개보면 이렇게 되겠다.

iOS 에뮬레이터 실행 성공시키기
iOS 에뮬레이터에서 애플로그인 실행 성공시키기
안드로이드 에뮬레이터에서 애플로그인 실행 성공시키기

우선 1번부터 해 보자. GPT와 티키타카를 거쳐서 'npx pod install' 명령어를 성공시켰다.

나머지 오류는 내일 해결해 보자.

아스

20241018 TIL: React Native에서 애플 로그인 기능 개발하기 [진행중]

✅ 오늘 배운 것

+ Recent posts

티스토리툴바