React Native에서 OAuth 로그인 구현하기

React Native에서 Google과 Facebook을 통한 OAuth 로그인을 구현하는 방법을 설명합니다. Google 개발자 콘솔과 Facebook 개발자 페이지 설정부터 React Native 라이브러리 사용법까지, 소셜 로그인 구현 과정을 구체적으로 알아보겠습니다.

 

OAuth 로그인 소개와 필요성

모바일 앱을 개발하면서 사용자들이 손쉽게 앱에 가입하고 로그인할 수 있도록 만드는 것은 중요한 부분입니다. 초기에는 이메일과 비밀번호로 사용자 인증을 구현했지만, 많은 사용자들이 자신이 사용하는 소셜 계정을 이용해 로그인하고 싶어 했고, 이때 등장한 것이 바로 OAuth입니다.

OAuth란 무엇인가?

OAuth는 사용자가 비밀번호를 공유하지 않고도 다른 서비스(예: Google, Facebook)의 계정을 이용해 로그인할 수 있게 해주는 인증 표준입니다. 처음 OAuth를 접하면 복잡해 보이는 인증 흐름에 겁먹을 수 있지만, 실제로 구현해보면 Firebase나 React Native에서 제공하는 라이브러리를 통해 쉽게 사용할 수 있습니다.

소셜 로그인 도입의 장점

소셜 로그인은 사용자 경험을 크게 개선할 수 있습니다. 사용자는 별도의 계정을 생성할 필요 없이 이미 사용 중인 Google이나 Facebook 계정을 통해 간편하게 로그인할 수 있습니다. 개인적으로 개발했던 앱에 소셜 로그인을 도입한 후 사용자 등록률이 눈에 띄게 증가했던 경험이 있습니다. 특히 신규 사용자가 로그인 과정을 더 빠르게 완료할 수 있어 전환율이 높아졌습니다.

 

OAuth를 통한 Google 로그인 구현

Google 개발자 콘솔에서 클라이언트 설정

먼저 Google 로그인을 구현하려면 Google 개발자 콘솔에서 프로젝트를 생성하고, 해당 프로젝트에 OAuth 클라이언트를 설정해야 합니다. Google 개발자 콘솔에 접속하여 새로운 프로젝트를 만들고, OAuth 2.0 클라이언트 ID를 생성합니다. 이 과정에서 Android와 iOS의 번들 ID를 설정해야 하므로, 앱의 식별 정보를 미리 준비해두는 것이 좋습니다.

React Native Google 로그인 라이브러리 설치

Google 로그인을 React Native에 쉽게 연동하기 위해 react-native-google-signin 라이브러리를 사용합니다. 다음과 같은 명령어로 설치할 수 있습니다.

npm install @react-native-google-signin/google-signin

 

설치 후에는 Android와 iOS 각각에 필요한 설정을 진행합니다. 특히 Android에서는 google-services.json 파일을 추가하고, iOS에서는 GoogleService-Info.plist 파일을 Xcode 프로젝트에 포함시켜야 합니다.

Google 로그인 구현 코드 예제

다음은 Google 로그인을 구현하는 기본적인 코드입니다.

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

GoogleSignin.configure({
	webClientId: 'YOUR_WEB_CLIENT_ID', // Google 개발자 콘솔에서 발급받은 클라이언트 ID
});

const signInWithGoogle = async () => {
	try {
		await GoogleSignin.hasPlayServices();
		const userInfo = await GoogleSignin.signIn();
		console.log('User info:', userInfo);
	} catch (error) {
		if (error.code === statusCodes.SIGN_IN_CANCELLED) {
			console.log('User cancelled the login flow');
		} else {
			console.error(error);
		}
	}
};

 

이 코드를 통해 사용자는 Google 계정을 이용해 로그인할 수 있습니다.

 

OAuth를 통한 Facebook 로그인 구현

Facebook 개발자 페이지에서 앱 생성하기

Facebook 로그인을 구현하려면 Facebook 개발자 페이지에서 새로운 앱을 생성해야 합니다. Facebook for Developers 사이트에 접속해 앱을 생성하고, Facebook 로그인 기능을 활성화합니다. 이때 앱 ID와 앱 시크릿을 잘 기록해 두어야 하며, Android와 iOS 각각에 대한 설정을 따로 진행해야 합니다.

React Native Facebook 로그인 라이브러리 설치

Facebook 로그인을 React Native에서 구현하기 위해 react-native-fbsdk-next 라이브러리를 설치합니다.

npm install react-native-fbsdk-next

 

설치 후, Android에서는 Facebook SDK를 설정하고, iOS에서는 info.plist 파일에 필요한 설정을 추가합니다. Facebook 로그인은 설정 과정이 Google 로그인보다 조금 더 복잡하지만, 문서를 따라 차근차근 설정하면 문제없이 구현할 수 있습니다.

Facebook 로그인 구현 코드 예제

다음은 Facebook 로그인을 구현하는 예제 코드입니다.

import { LoginManager, AccessToken } from 'react-native-fbsdk-next';

const signInWithFacebook = async () => {
	try {
		const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);

		if (result.isCancelled) {
			console.log('User cancelled the login process');
		} else {
			const data = await AccessToken.getCurrentAccessToken();
			
            if (data) {
				console.log('Access Token:', data.accessToken.toString());
			}
		}
	} catch (error) {
		console.error(error);
	}
};

 

이 코드를 통해 사용자는 Facebook 계정을 사용해 쉽게 로그인할 수 있습니다. Facebook 로그인까지 도입하면 사용자에게는 더 다양한 로그인 선택지가 주어지는 것이기에 앱의 사용자 만족도가 높아질 것으로 기대할 수 있습니다.

 

Google 및 Facebook 로그인 통합 고려사항

사용자 경험 최적화하기

Google과 Facebook 로그인을 모두 지원하면 사용자가 자신에게 맞는 로그인 방식을 선택할 수 있어 사용자 경험이 크게 개선됩니다. 저는 로그인 화면에 여러 소셜 로그인 버튼을 모두 배치하고, 간단한 설명을 추가해 사용자가 쉽게 선택할 수 있도록 했습니다.

보안 관련 주의사항

소셜 로그인을 구현할 때는 보안에 대한 고려가 필수적입니다. 사용자의 액세스 토큰이 노출되지 않도록 주의하고, 서버 측에서 이를 검증하는 작업이 필요합니다. 저는 Firebase를 통해 인증 토큰을 백엔드 서버로 전달해 추가적인 검증을 진행했습니다.

 

마무리하며

React Native에서 OAuth 로그인을 구현하는 것은 사용자 경험을 향상시키고, 간편하게 계정을 관리할 수 있는 중요한 방법입니다. 앞서 살펴본 Google과 Facebook 로그인을 모두 지원함으로써 사용자에게 다양한 로그인 옵션을 제공하고, 전환율을 높일 수 있습니다. OAuth 로그인을 성공적으로 구현하여 사용자 만족도를 높이고, 사용성이 높은 앱을 만들어 보는데 작은 도움이 되는 글이길 바랍니다.