AWS Amplify를 이용한 React Native 앱 개발기 (2) 인증(authentication)

인증 기능을 위해 AWS Cognito를 Amplify 상에서 사용할 것이다.

기존 AWS Cognito 리소스와 통합할 수도 있고, Amplify Studio에서 새로 리소스를 생성할 수도 있다.

 

Cognito는 사용자 인증 및 권한 부여를 처리하는 서비스이다. Cognito에서 사용자 풀을 생성하면 가입 및 로그인 기능을 쉽게 앱에 추가할 수 있다.

---

1. AWS - 인증 구성 및 배포

Amplify 스튜디오에서 인증 기능을 설정하면 CloudFormation에서 Cognito를 코드 기반으로 구성한다.

 

로그인 방식과 회원가입 방식을 선택한 후, Deployment를 진행한다.

 

로그인 방식은 이미지처럼 전화번호, 이메일, 유저명, 간편로그인(페이스북, 구글, 아마존, 애플) 중 선택할 수 있고, 회원가입 방식에서는 사용자로부터 받을 정보, 비밀번호 강도, 가입 인증 방식 등을 설정할 수 있다.

 

2. Local - Amplify pull

로컬에서 pull 명령어를 수행해 AWS 콘솔에서 설정한 내용을 가져오도록 한다.

amplify pull --appId (AppId) --envname (Status)

 

backend/auth/(앱이름)/build/parameters.json에 앞서 구성했던 정보가 그대로 들어가고, aws-exports.js 파일에서도 인증 관련 정보가 업데이트된다.

 

3. Local  - UI 구성

화면 구성에 필요한 패키지들을 설치한다.

yarn add @aws-amplify/ui-react-native aws-amplify @aws-amplify/react-native react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values
# 또는
npm install @aws-amplify/ui-react-native aws-amplify @aws-amplify/react-native react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values

 

다음 코드를 사용해 로그인, 회원가입, 로그아웃 등의 기능을 쉽게 사용할 수 있다. 공식 문서를 보면 더 다양한 기능이 나와있다.

import { signIn } from 'aws-amplify/auth';
import { signUp } from 'aws-amplify/auth';
import { confirmSignUp } from 'aws-amplify/auth';
import { signOut } from 'aws-amplify/auth';

 

Enable sign-up, sign-in, and sign-out - React Native - AWS Amplify Gen 1 Documentation

 

 

로그인 화면, 회원가입 화면, 인증 코드 입력 화면, 로그인 성공 화면을 구현한다.

 

SignIn.js

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { signIn } from 'aws-amplify/auth';

import AppTextInput from '../components/AppTextInput';
import AppButton from '../components/AppButton';


function SignIn({ navigation, updateAuthState }) {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
  
    async function handleSignIn() {
      try {
        await signIn({ username, password });
        console.log('✅ Success');
        updateAuthState('loggedIn');
      } catch (error) {
        console.log('❌ Error signing in...', error);
      }
    }
  
    return (
      <SafeAreaView style={styles.safeAreaContainer}>
        <View style={styles.container}>
          <Text style={styles.title}>Sign in to your account</Text>
          <AppTextInput
            value={username}
            onChangeText={text => setUsername(text)}
            leftIcon="account"
            placeholder="Enter username"
            autoCapitalize="none"
            keyboardType="email-address"
            textContentType="emailAddress"
          />
          <AppTextInput
            value={password}
            onChangeText={text => setPassword(text)}
            leftIcon="lock"
            placeholder="Enter password"
            autoCapitalize="none"
            autoCorrect={false}
            secureTextEntry
            textContentType="password"
          />
          <AppButton title="Login" onPress={handleSignIn} />
          <View style={styles.footerButtonContainer}>
            <TouchableOpacity onPress={() => navigation.navigate('SignUp')}>
              <Text style={styles.forgotPasswordButtonText}>
                Dont have an account? Sign Up
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    safeAreaContainer: {
      flex: 1,
      backgroundColor: 'white'
    },
    container: {
      flex: 1,
      alignItems: 'center'
    },
    title: {
      fontSize: 20,
      color: '#202020',
      fontWeight: '500',
      marginVertical: 15
    },
    footerButtonContainer: {
      marginVertical: 15,
      justifyContent: 'center',
      alignItems: 'center'
    },
    forgotPasswordButtonText: {
      color: 'tomato',
      fontSize: 18,
      fontWeight: '600'
    }
});


export default SignIn;

 

SignUp.js

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { signUp } from 'aws-amplify/auth';

import AppTextInput from '../components/AppTextInput';
import AppButton from '../components/AppButton';


function SignUp({ navigation }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  async function handleSignUp() {
    try {
      const { isSignUpComplete, userId, nextStep } = await signUp({ username, password, options: { userAttributes: { email } } });
      console.log('✅ Sign-up Confirmed : ', userId);
      navigation.navigate('ConfirmSignUp');
    } catch (error) {
      console.log('❌ Error signing up...', error);
    }
  }

  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <View style={styles.container}>
        <Text style={styles.title}>Create a new account</Text>
        <AppTextInput
          value={username}
          onChangeText={text => setUsername(text)}
          leftIcon="account"
          placeholder="Enter username"
          autoCapitalize="none"
          keyboardType="email-address"
          textContentType="emailAddress"
        />
        <AppTextInput
          value={password}
          onChangeText={text => setPassword(text)}
          leftIcon="lock"
          placeholder="Enter password"
          autoCapitalize="none"
          autoCorrect={false}
          secureTextEntry
          textContentType="password"
        />
        <AppTextInput
          value={email}
          onChangeText={text => setEmail(text)}
          leftIcon="email"
          placeholder="Enter email"
          autoCapitalize="none"
          keyboardType="email-address"
          textContentType="emailAddress"
        />
        <AppButton title="Sign Up" onPress={handleSignUp} />
        <View style={styles.footerButtonContainer}>
          <TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
            <Text style={styles.forgotPasswordButtonText}>
              Already have an account? Sign In
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
    safeAreaContainer: {
      flex: 1,
      backgroundColor: 'white'
    },
    container: {
      flex: 1,
      alignItems: 'center'
    },
    title: {
      fontSize: 20,
      color: '#202020',
      fontWeight: '500',
      marginVertical: 15
    },
    footerButtonContainer: {
      marginVertical: 15,
      justifyContent: 'center',
      alignItems: 'center'
    },
    forgotPasswordButtonText: {
      color: 'tomato',
      fontSize: 18,
      fontWeight: '600'
    }
});


export default SignUp;

 

ConfirmSignUp.js

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { confirmSignUp } from 'aws-amplify/auth';

import AppTextInput from '../components/AppTextInput';
import AppButton from '../components/AppButton';


function ConfirmSignUp({ navigation }) {
  const [username, setUsername] = useState('');
  const [confirmationCode, setConfirmationCode] = useState('');

  async function handleSignUpConfirmation() {
    try {
      await confirmSignUp({username, confirmationCode});
      console.log('✅ Code confirmed');
      navigation.navigate('SignIn');
    } catch (error) {
      console.log(
        '❌ Error confirming...', error
      );
    }
  }

  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <View style={styles.container}>
        <Text style={styles.title}>Confirm Sign Up</Text>
        <AppTextInput
          value={username}
          onChangeText={text => setUsername(text)}
          leftIcon="account"
          placeholder="Enter username"
          autoCapitalize="none"
          keyboardType="email-address"
          textContentType="emailAddress"
        />
        <AppTextInput
          value={confirmationCode}
          onChangeText={text => setConfirmationCode(text)}
          leftIcon="numeric"
          placeholder="Enter verification code"
          keyboardType="numeric"
        />
        <AppButton title="Confirm Sign Up" onPress={handleSignUpConfirmation} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
    safeAreaContainer: {
      flex: 1,
      backgroundColor: 'white'
    },
    container: {
      flex: 1,
      alignItems: 'center'
    },
    title: {
      fontSize: 20,
      color: '#202020',
      fontWeight: '500',
      marginVertical: 15
    }
});


export default ConfirmSignUp;

 

Home.js

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { signOut } from 'aws-amplify/auth';


function Home({ updateAuthState }) {
  async function handleSignOut() {
    try {
      await signOut();
      updateAuthState('loggedOut');
    } catch (error) {
      console.log('Error signing out: ', error);
    }
  }

  return (
    <View style={styles.container}>
      <Text>💙 + 💛</Text>
      <Button title="Sign Out" color="tomato" onPress={handleSignOut} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 20
  }
});


export default Home;

 

앱을 실행하면 인증 flow가 잘 작동하는 것을 볼 수 있다.

 

회원가입 화면에서 Amplify Studio에서 선택했던 정보들을 입력하도록 구성했고, confirm 화면으로 넘어가면 입력한 메일로 인증코드가 발송된다. 인증코드를 바르게 입력하면 회원가입이 완료된다. 그리고 가입한 정보들로 로그인하면 로그인 성공 화면이 나오는 것을 볼 수 있다.

 

로그인을 성공했을 때의 화면

 

 

회원가입이 정상적으로 완료되면 Amplify Studio와 Cognito 유저풀에서도 사용자가 추가된 것을 확인할 수 있다.