React Native 인증 시스템 구축: Firebase Auth와 OAuth

작성일 : 2024-07-14

React Native 인증 시스템 구축: Firebase Auth와 OAuth

React Native를 사용하여 모바일 애플리케이션을 개발할 때, 사용자 인증은 필수적인 요소 중 하나입니다. Firebase Authentication과 OAuth를 활용하면 보다 효율적이고 안전한 인증 시스템을 구현할 수 있습니다. 이 문서에서는 두 가지 방법을 활용해 사용자 인증을 구축하는 방법을 단계별로 설명합니다.

Firebase Auth 설정

Firebase Authentication은 Google이 제공하는 강력한 인증 도구로, 이메일/비밀번호, 전화번호, 소셜 로그인을 포함한 다양한 인증 수단을 제공합니다. 다음은 Firebase Auth를 React Native 애플리케이션에 설정하는 기본적인 절차입니다.

Step 1: Firebase 프로젝트 생성

웹 브라우저를 열고 Firebase Console을 방문하세요.
새 프로젝트를 생성하거나 기존 프로젝트를 선택합니다.
웹 애플리케이션을 추가하고 Firebase SDK를 설정합니다.

Step 2: Firebase Auth 라이브러리 설치

firebase와 @react-native-firebase/auth 모듈을 설치하여 Firebase Auth를 React Native 프로젝트에 통합합니다.


bash
npm install @react-native-firebase/app
npm install @react-native-firebase/auth

Step 3: Firebase 설정

firebase.config.js 파일을 생성하고 Firebase 설정을 추가합니다.


javascript
import firebase from '@react-native-firebase/app';
import auth from '@react-native-firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export { auth };

Step 4: 인증 기능 구현

이제, Firebase Auth를 사용하여 사용자 인증 기능을 구현합니다. 아래는 이메일과 비밀번호를 사용한 로그인 예제입니다.


javascript
import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { auth } from './firebase.config';

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleLogin = () => {
    auth().signInWithEmailAndPassword(email, password)
      .then(() => {
        console.log('User signed in!');
      })
      .catch(error => {
        setErrorMessage(error.message);
      });
  };

  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
      {errorMessage ? <Text>{errorMessage}</Text> : null}
    </View>
  );
};

export default LoginScreen;

OAuth 설정

OAuth는 제3자의 애플리케이션이 사용자의 자원을 접근할 수 있도록 하는 안전한 인증 프로토콜입니다. React Native에서 OAuth를 사용하여 소셜 로그인을 구현할 수 있습니다. 이 문서에서는 react-native-app-auth 라이브러리를 사용하여 OAuth를 설정합니다.

Step 1: react-native-app-auth 설치


bash
npm install react-native-app-auth

Step 2: 설정 파일 생성

OAuth 공급자의 클라이언트 ID와 리디렉션 URI 등을 포함한 설정 파일을 생성합니다.


javascript
const config = {
  clientId: 'YOUR_CLIENT_ID',
  redirectUrl: 'YOUR_REDIRECT_URL',
  scopes: ['openid', 'profile'],
  serviceConfiguration: {
    authorizationEndpoint: 'https://accounts.google.com/o/oauth2/auth',
    tokenEndpoint: 'https://oauth2.googleapis.com/token',
  },
};

Step 3: 로그인 함수 구현

로그인 함수를 구현하여 OAuth 인증 프로세스를 처리합니다.


javascript
import { authorize } from 'react-native-app-auth';

const signInWithGoogle = async () => {
  try {
    const result = await authorize(config);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
};

Step 4: UI와 연동

이제 로그인 버튼을 추가하여 OAuth 로그인 기능을 활성화합니다.


javascript
import React from 'react';
import { View, Button } from 'react-native';

const OAuthLoginScreen = () => {
  return (
    <View>
      <Button title="Login with Google" onPress={signInWithGoogle} />
    </View>
  );
};

export default OAuthLoginScreen;

마무리

이제 Firebase Auth와 OAuth를 활용하여 React Native 애플리케이션에서 효율적이고 안전한 사용자 인증 시스템을 구축할 수 있습니다. 각 방법의 장단점을 고려하여 적절한 인증 방식을 선택하십시오. Firebase Auth는 간편하고 다양한 기본 인증 방법을 제공하며, OAuth는 소셜 로그인과 같은 더 복잡한 인증 시나리오를 지원합니다.