AWS Amplify + React Native Authentication 🔐 FULL SETUP

Одна из самых запрашиваемых тем, среди подписчиков моего канала Димка Реактнативный — это аутентификация и авторизация в приложении React Native. Поэтому я решил посветить этому вопросу отдельный пост. Перед тем как мы начнем кодить, необходимо разобраться с определением Аутентификация/Авторизация.

Чат поддержки: Telegram

Аутентификация — это проверка соответствия субъекта и того, за кого он пытается себя выдать, с помощью некой уникальной информации (отпечатки пальцев, цвет радужки, голос и т д.), в простейшем случае — с помощью почты и пароля.

Авторизация — это проверка и определение полномочий на выполнение некоторых действий в соответствии с ранее выполненной аутентификацией

В конце этой статьи, мы с вами сделаем это мобильное приложение:

Аутентификация являются неотъемлемой частью практически любого приложения. Знание того, кто пользователь, уникальный идентификатор пользователя, какие разрешения имеет пользователь, и вошли ли они в систему, позволяет вашему приложению отображать правильные представления и возвращать правильные данные для текущего вошедшего в систему пользователя.

Большинству приложений требуются механизмы для регистрации пользователей, их входа в систему, обработки шифрования и обновления паролей, а также множества других задач, связанных с управлением идентификацией. Современные приложения часто требуют таких вещей, как OAUTH (открытая аутентификация), MFA (многофакторная аутентификация) и TOTP (основанные на времени пароли времени).

В прошлом разработчикам приходилось вручную раскручивать все эти функции аутентификации с нуля. Одна только эта задача может занять у команды разработчиков недели или даже месяцы, чтобы сделать все правильно и сделать это безопасно. К счастью, сегодня есть полностью управляемые сервисы аутентификации, такие как Auth0, Okta и Amazon Cognito, которые обрабатывают все это для нас.

В этой статье вы узнаете, как правильно и безопасно внедрить аутентификацию в приложении React Native с использованием Amazon Cognito с AWS Amplify.

Amazon Cognito — это полностью управляемый сервис идентификации от AWS. Cognito обеспечивает простую и безопасную регистрацию пользователей, вход в систему, контроль доступа, обновление токенов и управление идентификацией пользователей. Cognito масштабируется до миллионов пользователей, а также поддерживает вход в систему с поставщиками социальных сетей, такими как Facebook, Google и Amazon.

Cognito состоит из двух основных частей: пулов пользователей и пулов идентификации.

User Pools — пулы пользователей предоставляют защищенный каталог пользователей, который хранит всех ваших пользователей и масштабируется до сотен миллионов пользователей. Это полностью управляемый сервис. Как бессерверная технология, пользовательские пулы легко настраиваются, не беспокоясь о том, чтобы поддерживать любую инфраструктуру. Пулы пользователей — это то, что управляет всеми пользователями, которые регистрируются и входят в учетную запись, и является основной частью, на которой мы сосредоточимся в этой статье.

Identity pools — пулы удостоверений позволяют вам авторизовать пользователей, вошедших в ваше приложение, для доступа к различным другим сервисам AWS. Допустим, вы хотите предоставить пользователю доступ к лямбда-функции, чтобы он мог получать данные из другого API. Вы можете указать это при создании пула удостоверений. В пулы пользователей входит то, что источником этих идентификаторов может быть пул пользователей Cognito или даже Facebook или Google.

Сценарий, когда пул пользователей Amazon Cognito и пул удостоверений используются вместе.

Смотрите схему для общего сценария Amazon Cognito. Здесь цель состоит в том, чтобы аутентифицировать вашего пользователя, а затем предоставить ему доступ к другому сервису AWS.

1. На первом этапе пользователь вашего приложения входит в систему через пул пользователей и получает токены пула пользователей после успешной аутентификации.
2. Затем ваше приложение обменивает токены пула пользователей на учетные данные AWS через пул удостоверений.
3. Наконец, пользователь вашего приложения может затем использовать эти учетные данные AWS для доступа к другим сервисам AWS, таким как Amazon S3 или DynamoDB.

Cognito User Pools позволяет вашему приложению вызывать различные методы для службы для управления всеми аспектами идентификации пользователя, включая такие вещи, как:

• Регистрация пользователя
• Вход в систему пользователя
• Выход пользователя
• Смена пароля пользователя
• Сброс пароля пользователя
• Подтверждение кода MFA
• Интеграция Amazon Cognito с AWS Amplify

AWS Amplify поддерживает Amazon Cognito различными способами. Прежде всего вы можете создавать и настраивать сервисы Amazon Cognito непосредственно из интерфейса командной строки AWS Amplify. Создав службу аутентификации через CLI, вы можете вызывать различные методы (например, signUp, signIn и signOut) из приложения JavaScript с помощью клиентской библиотеки Amplify JavaScript.

Amplify также имеет предварительно настроенные компоненты пользовательского интерфейса, которые позволяют выстраивать целые потоки аутентификации всего за пару строк кода для таких сред, как React, React Native, Vue и Angular.

Вы спросите и сколько же это все стоит?

Платите только за то, чем пользуетесь. Никаких минимальных платежей.

Используя Amazon Cognito Identity для создания пула пользователей, вы платите только за количество активных пользователей в месяц (MAU). MAU — это пользователи, которые в течение календарного месяца выполнили хотя бы одну операцию идентификации: регистрацию, авторизацию, обновление токена или изменение пароля. Последующие сессии активных пользователей и неактивные пользователи в этом календарном месяце не оплачиваются.

CODING TIME 👨🏼‍💻👩🏻‍💻

PART 1

Весь код для этой части можно найти на Github.

Видео по этой части:

Step 1

Создаем новый проект ⚛️

react-native init messaga

Запускаем проект 🚀

iOS

cd messaga && react-native run-ios

Android

cd messaga && react-native run-android

Step 2

Подключаем иконки 👾

Так как иконки используются фреймворком AWS Amplify, поэтому подключаем их согласно этой инструкции 📃.
Проверяем наличие ошибок. Добавляем в App.js

import Icon from 'react-native-vector-icons/FontAwesome5'
const App = () => {
  return (
    <>
      <Icon name="comments" size={30} color="#900" />
    </>
  )
}

Step 3

Регистрируем свой AWS account

Регестрируемся согласно этой инструкции 📃 и по видеоучебнику📺 чекаем все 5 шагов.
Внимание!!! Потребуется банковская карта 💳, где должно быть более 1$ 💵
Там же смотрим и ставим Amplify Command Line Interface (CLI)

Step 4

Инициализация AWS Amplify в проект React Native

В корневой директории проекта React Native инициализируем наш бэкенд

amplify init

Отвечаем на вопросы:

Дальше начинается инициализация проекта 🚀
⠧ Initializing project in the cloud…
Your project has been successfully initialized and connected to the cloud!

Step 5

Подключаем плагин аутентификации — Auth 🔐

Теперь, когда приложение находится в облаке, вы можете добавить некоторые функции, такие как предоставление пользователям возможности зарегистрироваться в нашем приложении и войти в систему.

Командой

amplify add auth

подключаем плагин аутентификации. Выбираем конфигурацию по умолчанию. Это добавляет конфигурации ресурсов auth локально в ваш каталог ampify/backend/auth

Выбираем профиль, который мы хотим использовать. default. Enter и как пользователи будут входить в систему. Email(За SMS списывают деньги).

Successfully added resource yourname locally

Отправляем изменения в облако 💭

amplify push

✔ All resources are updated in the cloud

Step 6

Подключаем AWS Amplify в проект React Native ⚛️

Подробности в этой инструкции 📃, а коротко и по прямой так:

yarn add aws-amplify @aws-amplify/core aws-amplify-react-native amazon-cognito-identity-js @react-native-community/netinfo

После установки обязательно заходим в папку ios и ставим поды

cd ios && pod install && cd ..

Step 7

Редактируем структуру проекта

Создаем директорию /src и переносим туда файл App.js, переименовывая его в index.js

Правим импорт в /messaga/index.js и скрываем будущие предупреждения.

Step 8

Минимальная конфигурация проекта и модуль Authenticator

Amplify.configure — конфигурация проекта

Authenticator — Модуль AWS Amplify Authentication предоставляет API-интерфейсы аутентификации и стандартные блоки для разработчиков, которые хотят создавать возможности аутентификации пользователей.

Запускаем симулятор

Step 9

Правим инпуты в App.js

Step 10

Меняем тему UI 🖌

Создаем точку экспорта наших будущих компонентов /src/components/index.js с содержанием

export * from './AmplifyTheme'

и соответствено создаем сам файл /src/components/AmplifyTheme/index.js темы с содержанием

И подключаем тему в компонент Authenticator src/index.js

Step 11

Подключаем русский язык 🇷🇺

Добавляем экспорт в /src/components/index.js

export * from './Localei18n'

Cоздаем сам файл /src/components/Localei18n/index.js с содержанием

И подключаем компонент Localei18n в src/index.js

PART 2

Весь код для этой части можно найти на Github.

Во первых в официальной документации Amplify написано

Data is stored unencrypted when using standard storage adapters (localStorage in the browser and AsyncStorage on React Native). Amplify gives you the option to use your own storage object to persist data. With this, you could write a thin wrapper around libraries like:

react-native-keychain

react-native-secure-storage

Expo’s secure store

что данные хранятся в не зашифрованном виде, а это риск 🕷 информационной безопасности с возможными негативными последствиями 🕸.

Во вторых стандартный UI от Amplify далеко не всегда удовлетворяет UX приходящий со стороны заказчика, поэтому мы решим эти две задачи в этой части.

Step 1

Подключаем UI Kit, библиотеку компонентов согласно этой статьи.

Step 2

Ставим навигацию react-navigation, также как написано здесь (на момент написание этой статьи):

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack

Добавляем поды под iOS

cd ios && pod install && cd ..

📌 Рекомендую после каждой установки запускать приложение под iOS и Android, чтобы потом не искать библиотеку из-за которой приложение падает.

Step 3

Ставим react-native-keychain

Безопасное хранилище ключей react-native-keychain для React Native.

yarn add react-native-keychain

И добавляем поды под iOS

cd ios && pod install && cd ..

Подключаем react-native-keychain

Согласно тому, что нам говорит официальная документация:

При использовании аутентификации с AWS Amplify вам не нужно обновлять токены Amazon Cognito вручную. Токены автоматически обновляются библиотекой при необходимости. Токены безопасности, такие как IdToken или AccessToken, хранятся в localStorage для браузера и в AsyncStorage для React Native. Если вы хотите хранить эти токены в более безопасном месте или используете Amplify на стороне сервера, вы можете предоставить свой собственный объект хранения для хранения этих токенов.

конфигурируем наш src/index.js

Step 4

Константы

Чтобы не копипастить одни и те же значения, мы создаем файл с константами для общего использования в компонентах src/constants.js

Step 5

AppNavigator

Создаем файл с конфигурацией навигации для нашей кастомной аутентификации src/AppNavigator.js

Step 6

Hello screen

Создаем точку входа, где будут лежать наши экраны аутентификации src/screens/Authenticator/index.js , где подключаем экран приветсвия

export * from './Hello'

Создаем экран приветствия src/screens/Authenticator /Hello/index.js В хуке useEffect мы выполняем проверку на наличие токена пользователя, где в случае true мы отправляемся на экран User, а в случае false остаемся на этом экране.

Собираем приложение и встречаем экран приветствия.

Step 7

SIGN UP

Создаем экран регистрации SIGN_UP src/screens/Authenticator/SignUp/index.js , где для аутентификации мы используем метод Auth.signUp

Step 8

CONFIRM SIGN UP

После успешного ответа с сервера, мы переходим на экран подтверждения и ввода кода, пришедшего нам на почту. Для этого создаем экран CONFIRM_SIGN_UP src/screens/Authenticator/ConfirmSignUp/index.js

RESEND CODE

Если код не пришел, то мы должны предоставить пользователю возможность отправить код повторно. Для этого на кнопку Resend code? мы вешаем метод Auth.resendSignUp(userInfo.email)

В случае успешного вызова метода

Auth.confirmSignUp(email, code, { forceAliasCreation: true })

мы должны вызывать метод

Auth.signIn(email, password)

Step 9

USER

и в случае успеха переходим на экран USER, который мы создаем c кнопкой выхода из приложения и очисткой токенов src/screens/Authenticator/User/index.js

Step 10

SIGN IN

После того, как зарегистрировали пользователя, мы должны предоставить юзеру возможность войти в приложение через логин и пароль. Для этого мы создаем экран SIGN_IN src/screens/Authenticator/SignIn/index.js

В случае успеха, мы отправляем юзера на экран USER, который мы уже ранее сделали, а если юзер забыл или не правильно ввел пароль, то мы показываем ошибку Forgot Password? и предлагаем сбросить пароль.

Step 11

FORGOT

Для этого мы создаем экран FORGOT src/screens/Authenticator/Forgot/index.js

Step 12

FORGOT PASSWORD SUBMIT

После подтверждения e-mail, мы вызываем метод Auth.forgotPassword(email) и в случае, если такой юзер есть, то отправляем пользователя на экран FORGOT_PASSWORD_SUBMIT src/screens/Authenticator/ForgotPassSubmit/index.js

где после ввода кода, отправленного на почту, нового пароля и его подтверждения, мы вызываем метод смены пароля Auth.forgotPasswordSubmit(email, code, password) успех которого отправляет юзера на экран USER.

Step 13

Подключаем все созданые компоненты в src/screens/Authenticator/index.js

export * from './Hello'
export * from './User'
export * from './SignIn'
export * from './SignUp'
export * from './Forgot'
export * from './ForgotPassSubmit'
export * from './ConfirmSignUp'

Step 14

добавляем файл конфигурации навигации:

Step 15

Clean Up

Так как мы используем кастомную тему, то удаляем компоненты AmplifyTheme и Localei18n

Step 16

Debug

Для того, чтобы понимать, что происходит с токенами в вашем приложении, добавьте в корневой /index.js

window.LOG_LEVEL = 'DEBUG'

📌 Только не забудьте удалить, перед тем как будуте выкладывать приложение в сторы.

Done✅

Продолжение Часть II — CRUD (Create Read Update Delete) AWS Amplify(AppSync) + React Native 🛰

REFERENCES:

1. https://aws-amplify.github.io
2. https://aws.amazon.com/ru/cognito/
3. https://learning.oreilly.com/library/view/full-stack-serverless/9781492059882/