Skip to main content

Authentication

In this part, we will configure the AWS Amplify Authentication UI component, and in the next we will create it from scratch.

All the code for this part can be found at GitHub.

Cognito

Video#

Step01

Create a new project ⚛️#

react-native init auth

Launching the project 🚀

iOS

cd auth && react-native run-ios

Android

cd auth && react-native run-android

Step02

Connecting icons 👾#

Since the icons are used by the AWS Amplify framework, so we connect them according to this instructions 📃. Checking for errors.

Add to App.js

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

Step03

Registering your AWS account#

We register according to this instructions 📃 and check all 5 steps using the video tutorial.

::: caution You need a bank card 💳 where there must be more than 1 \ $ 💵

:::

We look there and set Amplify Command Line Interface (CLI)

Step04

Initializing AWS Amplify into a React Native Project#

In the root directory of the React Native project, we initialize our AWS Amplify project

amplify init

We answer the questions:

amplify init

The project was initialized 🚀

Step05

Connecting the authentication plugin#

Now that the application is in the cloud, you can add some functionality, such as allowing users to register with our application and sign in.

Team

amplify add auth

we connect the authentication function. We select the default configuration. This adds auth resource configurations locally to your ampify / backend / auth directory

Select the profile we want to use. default. Enter and how users will log in. Email (Money is charged for SMS).#

amplify init

Submitting changes to the cloud 💭

amplify push

✔ All resources are updated in the cloud

Step06

Connecting AWS Amplify to a React Native project ⚛️#

Details in this instructions 📃, but briefly and in a straight line like this:

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

After installation, be sure to go to the ios folder and put the pods

cd ios && pod install && cd ..

Step07

Editing the project structure#

Create the / src directory and move the App.js file there, renaming it to index.js

Fix the import in /auth/index.js and hide future warnings.

import { AppRegistry, YellowBox } from 'react-native'import App from './src'import { name as appName } from './app.json'
YellowBox.ignoreWarnings([  'Warning: AsyncStorage',  'Warning: componentWillReceiveProps',  'RCTRootView cancelTouches',  'not authenticated',  'Sending `onAnimatedValueUpdate`'])
//window.LOG_LEVEL = 'DEBUG'
AppRegistry.registerComponent(appName, () => App)

Step08

Minimum project configuration and module Authenticator#

Amplify.configure — project configuration

Authenticator — Module AWS Amplify Authentication provides authentication APIs and building blocks for developers who want to create user authentication capabilities.

import React from 'react'import { StatusBar } from 'react-native'import Amplify from '@aws-amplify/core'import { Authenticator } from 'aws-amplify-react-native'import awsconfig from '../aws-exports'
Amplify.configure({  ...awsconfig,  Analytics: {    disabled: true  }})
const App = () => {  return (    <>      <StatusBar barStyle="dark-content" />      <Authenticator usernameAttributes="email" />    </>  )}
export default App

We launch the simulator, where we are greeted by the authentication UI component:

Cognito

Step09

Editing inputs in App.js#

To do this, add signUpConfig

const signUpConfig = {  hideAllDefaults: true,  signUpFields: [    {      label: 'Email',      key: 'email',      required: true,      displayOrder: 1,      type: 'string',    },    {      label: 'Password',      key: 'password',      required: true,      displayOrder: 2,      type: 'password',    },  ],}

<Authenticator   usernameAttributes="email"   signUpConfig={signUpConfig}/>

Step10

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

Create an export point for our future components /src/components/index.js with content

export * from './AmplifyTheme'

and accordingly create the file /src/components/AmplifyTheme/index.js of the theme with the content

import { StyleSheet } from 'react-native'
export const deepSquidInk = '#152939'export const linkUnderlayColor = '#FFF'export const errorIconColor = '#30d0fe'
const AmplifyTheme = StyleSheet.create({  container: {    flex: 1,    flexDirection: 'column',    alignItems: 'center',    justifyContent: 'space-around',    paddingTop: 20,    width: '100%',    backgroundColor: '#FFF'  },  section: {    flex: 1,    width: '100%',    padding: 30  },  sectionHeader: {    width: '100%',    marginBottom: 32  },  sectionHeaderText: {    color: deepSquidInk,    fontSize: 20,    fontWeight: '500'  },  sectionFooter: {    width: '100%',    padding: 10,    flexDirection: 'row',    justifyContent: 'space-between',    marginTop: 15,    marginBottom: 20  },  sectionFooterLink: {    fontSize: 14,    color: '#30d0fe',    alignItems: 'baseline',    textAlign: 'center'  },  navBar: {    marginTop: 35,    padding: 15,    flexDirection: 'row',    justifyContent: 'flex-end',    alignItems: 'center'  },  navButton: {    marginLeft: 12,    borderRadius: 4  },  cell: {    flex: 1,    width: '50%'  },  errorRow: {    flexDirection: 'row',    justifyContent: 'center'  },  errorRowText: {    marginLeft: 10  },  photo: {    width: '100%'  },  album: {    width: '100%'  },  button: {    backgroundColor: '#30d0fe',    alignItems: 'center',    padding: 16  },  buttonDisabled: {    backgroundColor: '#85E4FF',    alignItems: 'center',    padding: 16  },  buttonText: {    color: '#fff',    fontSize: 14,    fontWeight: '600'  },  formField: {    marginBottom: 22  },  input: {    padding: 16,    borderWidth: 1,    borderRadius: 3,    borderColor: '#C4C4C4'  },  inputLabel: {    marginBottom: 8  },  phoneContainer: {    display: 'flex',    flexDirection: 'row',    alignItems: 'center'  },  phoneInput: {    flex: 2,    padding: 16,    borderWidth: 1,    borderRadius: 3,    borderColor: '#C4C4C4'  },  picker: {    flex: 1,    height: 44  },  pickerItem: {    height: 44  }})
export { AmplifyTheme }

And connect the theme to the component Authenticator src/index.js

import { AmplifyTheme } from './components';<Authenticator usernameAttributes="email" signUpConfig={signUpConfig} theme={AmplifyTheme} />

AmplifyTheme

Step11

We connect localization#

In our case, the Russian language 🇷🇺

Add export to /src/components/index.js

export * from './Localei18n'

Create the file /src/components/Localei18n/index.js with the content

import { NativeModules, Platform } from 'react-native'import { I18n } from '@aws-amplify/core'
let langRegionLocale = 'en_US'
// If we have an Android phoneif (Platform.OS === 'android') {  langRegionLocale = NativeModules.I18nManager.localeIdentifier || ''} else if (Platform.OS === 'ios') {  langRegionLocale = NativeModules.SettingsManager.settings.AppleLocale || ''}
const authScreenLabels = {  en: {    'Sign Up': 'Create new account',    'Sign Up Account': 'Create a new account'  },  ru: {    'Sign Up': 'Создать аккаунт',    'Forgot Password': 'Забыли пароль?',    'Sign In Account': 'Войдите в систему',    'Enter your email': 'Введите email',    'Enter your password': 'Введите пароль',    Password: 'Пароль',    'Sign In': 'Вход',    'Please Sign In / Sign Up': 'Войти / Создать аккаунт',    'Sign in to your account': 'Войдите в свой аккаунт',    'Create a new account': 'Cоздайте свой аккаунт',    'Confirm a Code': 'Подтвердите код',    'Confirm Sign Up': 'Подтвердите регистрацию',    'Resend code': 'Еще отправить код',    'Back to Sign In': 'Вернуться к входу',    Confirm: 'Подтвердить',    'Confirmation Code': 'Код подтверждения',    'Sign Out': 'Выход'  }}
// "en_US" -> "en", "es_CL" -> "es", etcconst languageLocale = langRegionLocale.substring(0, 2)I18n.setLanguage(languageLocale)I18n.putVocabularies(authScreenLabels)
const Localei18n = () => null
export { Localei18n }

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

import {   AmplifyTheme,   Localei18n} from './components'

<Localei18n /><Authenticator  usernameAttributes="email"  signUpConfig={signUpConfig}  theme={AmplifyTheme}/>

We launch the project, where we see that the localization has not yet been applied. Therefore, we change the language in the settings of our simulator to Russian

Localei18n

Done ✅#

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

📖💵

Become a Patron!