React Native에서 사용자 인증 구현하기

React Native는 모바일 애플리케이션을 개발할 때 널리 사용되는 프레임워크입니다. 이 글에서는 React Native에서 사용자 인증을 구현하는 기본 원리와 방법을 소개하며, 코드 예시를 통해 구현 과정을 설명하겠습니다.

사용자 인증의 기본 원리

사용자 인증(Authentication)은 사용자가 누구인지 확인하는 과정입니다. 일반적으로 사용자 인증에는 다음과 같은 단계를 포함합니다:

1. 사용자 로그인 정보 입력: 사용자는 이메일, 비밀번호와 같은 자격 증명을 입력합니다.
2. 서버로 인증 요청: 애플리케이션은 입력된 정보를 서버로 전송합니다.
3. 자격 증명 확인: 서버는 데이터베이스를 조회하거나 외부 인증 시스템(OAuth, Firebase Authentication 등)을 사용해 사용자 정보를 확인합니다.
4. 인증 토큰 발급: 인증이 성공하면 서버는 클라이언트에 인증 토큰(JWT 등)을 반환합니다.
5. 토큰 저장 및 사용: 클라이언트는 이 토큰을 안전한 저장소(Secure Storage, AsyncStorage 등)에 저장하고, 이후 요청 시 인증 헤더에 포함해 서버와 통신합니다.

React Native에서 사용자 인증 구현 방법

1. 라이브러리 설치

React Native에서 사용자 인증을 구현하기 위해 필요한 라이브러리를 설치합니다.

npm install axios react-native-async-storage/async-storage

• Axios: HTTP 요청을 보내기 위한 라이브러리
• AsyncStorage: 인증 토큰을 로컬에 저장하기 위한 라이브러리

2. API 클라이언트 설정

서버와 통신하는 Axios 인스턴스를 설정합니다.

// api.js
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Axios 인스턴스 생성
const api = axios.create({
  baseURL: 'https://your-api-url.com', // API의 기본 URL
  timeout: 10000,
});

// 요청 인터셉터: 토큰 추가
api.interceptors.request.use(async (config) => {
  const token = await AsyncStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

export default api;

3. 로그인 화면 구현

사용자로부터 이메일과 비밀번호를 입력받아 서버에 요청을 보내는 UI와 기능을 구현합니다.

// LoginScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import api from './api';

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

  const handleLogin = async () => {
    try {
      const response = await api.post('/login', { email, password });
      const { token } = response.data;
      // 토큰 저장
      await AsyncStorage.setItem('authToken', token);
      Alert.alert('로그인 성공!', '홈 화면으로 이동합니다.');
      navigation.replace('Home');
    } catch (error) {
      Alert.alert('로그인 실패', '이메일 또는 비밀번호를 확인하세요.');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>로그인</Text>
      <TextInput
        style={styles.input}
        placeholder="이메일"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        style={styles.input}
        placeholder="비밀번호"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <Button title="로그인" onPress={handleLogin} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginBottom: 15,
    borderRadius: 5,
  },
});

export default LoginScreen;

4. 인증된 사용자만 접근 가능한 화면

토큰을 확인하여 인증된 사용자만 특정 화면에 접근할 수 있도록 설정합니다.

// HomeScreen.js
import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const HomeScreen = ({ navigation }) => {
  const [token, setToken] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      const storedToken = await AsyncStorage.getItem('authToken');
      if (!storedToken) {
        navigation.replace('Login');
      } else {
        setToken(storedToken);
      }
    };
    fetchToken();
  }, [navigation]);

  const handleLogout = async () => {
    await AsyncStorage.removeItem('authToken');
    navigation.replace('Login');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>홈 화면</Text>
      <Text>인증 토큰: {token}</Text>
      <Button title="로그아웃" onPress={handleLogout} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
});

export default HomeScreen;

5. 보안 고려 사항

사용자 인증을 구현할 때는 보안을 염두에 두어야 합니다:

• 비밀번호 보안: 최소 길이와 복잡성을 요구해 안전한 비밀번호를 사용하도록 유도합니다.
• 토큰 보안: JWT 토큰을 로컬 저장소가 아닌 안전한 보안 저장소에 저장하는 것을 권장합니다. 예를 들어, Secure store와 같은 라이브러리를 사용할 수 있습니다.
• HTTPS 사용: 네트워크 통신을 위해 항상 HTTPS를 사용하여 전송 중 데이터의 보안을 유지합니다.

마무리

React Native에서 사용자 인증을 구현하는 것은 사용자 경험을 높이고 보안을 강화하는 중요한 부분입니다. Axios와 AsyncStorage 같은 도구를 사용하면 복잡한 인증 절차를 간단하게 구현할 수 있습니다. 위의 예제를 통해 여러분의 프로젝트에서도 쉽게 사용자 인증 기능을 추가해 보세요!

사용자 인증에 대해 더 깊이 이해하거나 추가적인 방법에 대해 알고 싶다면, 댓글로 질문을 남겨주세요!