[2/15] react native에 aws amplify를 붙여보자

AWS Amplify를 사용해서 Social Login이 되는 React Native App을 만들어보자!

 

AWS Amplify - Amplify project 생성, auth 설정

아래 링크를 참고 했다.

https://dev.to/aws/the-complete-react-native-guide-to-user-authentication-with-the-amplify-framework-ib2

The Complete React Native Guide to User Authentication with the Amplify Framework

공식 문서도 같이 참고하자 : https://aws-amplify.github.io/docs/js/authentication#social-providers-and-federation

 

1) AWS Amplify CLI 설치

CLI에서 명령어로 간단하게 설정할 수 있기 때문에 아래 패키지를 설치한다.

$ npm install -g @aws-amplify/cli

2) amplify configure

AWS 서버에 있는 내 계정에 IAM user를 등록하자.

~/work  amplify configure                     
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  ap-northeast-2
Specify the username of the new IAM user:
? user name:  molike-test
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=molike-test&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  **********
? secretAccessKey:  ********************
This would update/create the AWS Profile in your local machine
? Profile Name:  default

Successfully set up the new user.

 

3) amplify init

내 앱이 사용하게 될 Amplify Project를 만들자. 이 명령어를 실행한 곳에서 amplify 폴더가 만들어진다.

 ~/work  amplify init                               ✔  2 ⚙  2500  18:12:16
Note: It is recommended to run this command from the root of your app directory

? Enter a name for the project 
> work
? Enter a name for the environment 
> local
? Choose your default editor: 
> Visual Studio Code
? Choose the type of app that youre building 
> javascript
Please tell us about your project
? What javascript framework are you using 
> react-native
? Source Directory Path:  /
? Distribution Directory Path: /
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default

 

4) amplify add auth

이거 설정을 잘못해서 3)으로 몇 번을 돌아갔는지....ㅜㅜㅜ

warning을 무시하면 안된다ㅜㅜ

기본 로그인 속성을 이름으로 설정해주자.

~/work  amplify add auth                           ✔  2 ⚙  2502  18:14:47
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? 
 > Default configuration with Social Provider (Federation)
 
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? 
 > Username
 Do you want to configure advanced settings? 
 > Yes, I want to make some additional changes.
 Warning: you will not be able to edit these selections.
 What attributes are required for signing up? 
 > Name
 Do you want to enable any of the following capabilities?
 What domain name prefix you want us to create for you? 
 > molike-test
 Enter your redirect signin URI: 
 > myapp://
? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: 
 > myapp://
? Do you want to add another redirect signout URI No
 Select the social providers you want to configure for your user pool: 
 > Facebook, Google

 You've opted to allow users to authenticate via Facebook.  If you haven't alrea
 dy, you'll need to go to https://developers.facebook.com and create an App ID.

 Enter your Facebook App ID for your OAuth flow:  *********
 Enter your Facebook App Secret for your OAuth flow:  *********

 You've opted to allow users to authenticate via Google.  If you haven't already
 , you'll need to go to https://developers.google.com/identity and create an App
 ID.

 Enter your Google Web Client ID for your OAuth flow:  *********.apps.googleusercontent.com
 Enter your Google Web Client Secret for your OAuth flow:  *********

 Successfully added resource work locally
 

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

 

5) amplify push 

aws server로 설정한 정보를 보내자

 ~/work  amplify push                               ✔  2 ⚙  2574  00:55:56
✔ Successfully pulled backend environment local from the cloud.

Current Environment: local

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Auth     | molike************ | Create    | awscloudformation |

끝!

 

AWS amplify, cognito를 확인해보면 CLI에서 작업했던 내역이 설정돼있다.