[RN] apple login

SNS 로그인 중 이게 제일 귀찮은 것 같다.

시작하기 전에 만약 애플 디벨로퍼 결제가 안 되어 있으면 이거 못 하니까 돈부터 내세요.

역시 애플답죠? (이거 없으면 못 합니다. 😢)

https://www.npmjs.com/package/@invertase/react-native-apple-authentication/v/1.1.2

@invertase/react-native-apple-authentication

---

 

🛠️ 1. Apple Developer 계정 설정하기

https://developer.apple.com/kr/

Apple Developer

인증서, 식별자 및 프로파일/식별자(영문)으로 이동합니다.

그리고 우측 상단에 +버튼 눌러서 identifier 생성합니다.

App IDs 선택

App 선택

여기서 번들 아이디는 번들 아이덴티티랑 달라요.

뒤에서 다시 이야기 하겠습니다. 보통 com.프로젝트명으로 하던데, 저는 RN 프로젝트에서 org.reactjs.native.프로젝트명으로 했습니다.

Keys로 이동해서 + 버튼 누르세요.

.

애플로 로그인 체크 후 Configure 누르세요.

여기서 앱 선택하라고 하는데 아까 만든 identifier 선택하세요. 여기까지하면 애플 개발자 계정에서 할 건 끝-

그럼 이제 애플 스토어 커넥트로 이동해서 앱을 생성합니다. 할거 드럽게 많죠?

 

위 작접 요약

✅ 1-1. Identifier 생성 (Apple Developer)

• Certificates, Identifiers & Profiles → Identifiers 메뉴로 이동
• 오른쪽 상단 + 버튼 클릭 → App IDs 선택 → App 선택
• Bundle ID 입력: 보통 com.프로젝트명 형식을 사용하지만, 저는 org.reactjs.native.프로젝트명으로 했습니다.

✅ 1-2. Keys 생성 및 Apple 로그인 활성화

• Keys 메뉴 → + 버튼 클릭 → 이름 입력
• Sign in with Apple 체크 후 Configure 클릭
• Identifier 선택: 방금 만든 App ID를 선택
• 저장 후 키를 다운로드합니다. (이 키는 한 번만 다운로드 가능하니 꼭 저장하세요!)

✅ Apple Developer 계정 설정 완료! 🎉

---

🛠️ 2. App Store Connect에서 앱 생성하기

신규 앱 생성 ㄱㄱ

뭐 설정하라는데 딱 보면 뭔 줄 알 걸요.

SKU의 경우 아까 만든 identifier로 이름 지으세요.

그럼 끝이냐? ㄴㄴ 더 있음

 

위 작업 요약

🛠️ 2. App Store Connect에서 앱 생성하기

✅ 2-1. App Store Connect 접속 (App Store Connect)

• 내 앱 → + 버튼 → 새로운 앱 생성
• SKU는 Identifier 이름과 동일하게 입력 (org.reactjs.native.프로젝트명)
• 기본 정보 입력 후 저장

✅ App Store Connect 설정 완료!

---

🛠️ 3. Xcode 프로젝트 설정하기

xcode로 프로젝트명.xworkspace 여세요.

 

Capability 선택 후 Sign in with Apple를 선택합니다.

이렇게 추가가 되면 설정 끝

그럼 끝이냐? 아니죠 우리 아직 JS 코드 안 만졌죠.

---

npm install @invertase/react-native-apple-authentication
cd ios
rm -rf ~/Library/Caches/CocoaPods
rm -rf Pods
rm Podfile.lock
pod deintegrate
pod install --repo-update

굳이 이렇게까지 지우고 재설치 안해도 되는데 예전에 이 부분에서 삽질한 기억이 있어서 혹시 몰라 그냥 합니다.

 

...

// ++
import appleAuth, {
  AppleAuthRequestOperation,
  AppleAuthRequestScope,
} from '@invertase/react-native-apple-authentication';

const Login = ({ navigation }: Props) => {

  // ++ 
  const handleAppleLogin = async () => {
    try {
      const appleAuthRequestResponse = await appleAuth.performRequest({
        requestedOperation: AppleAuthRequestOperation.LOGIN,
        requestedScopes: [
          AppleAuthRequestScope.EMAIL,
          AppleAuthRequestScope.FULL_NAME,
        ],
      });

      console.log(
        'test appleAuthRequestResponse ::: ',
        appleAuthRequestResponse.user,
      );
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Pressable onPress={handleAppleLogin}>
        <Text>test apple login button</Text>
      </Pressable>
    </SafeAreaView>
  );
};

export default Login;

const styles = StyleSheet.create({
  container: { flex: 1 },
});

 

여기까지 했는데 안된다?
부장님 자리에 계시죠? 부장님께 던지세요.

📝 정리

1. 🛡️ Apple Developer 계정 및 Identifier, Key 생성
2. 🛒 App Store Connect에서 신규 앱 생성
3. 🛠️ Xcode에서 Capability 추가
4. 💻 React Native에 라이브러리 설치 및 JS 코드 작성
5. 🚀 실행 및 테스트