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.
Launching the project 🚀
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
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)
In the root directory of the React Native project, we initialize our AWS Amplify project
We answer the questions:
The project was initialized 🚀
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.
we connect the authentication function. We select the default configuration. This adds auth resource configurations locally to your ampify / backend / auth directory
Submitting changes to the cloud 💭
✔ All resources are updated in the cloud
Details in this instructions 📃, but briefly and in a straight line like this:
After installation, be sure to go to the ios folder and put the pods
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.
Amplify.configure — project configuration
Authenticator — Module AWS Amplify Authentication provides authentication APIs and building blocks for developers who want to create user authentication capabilities.
We launch the simulator, where we are greeted by the authentication UI component:
To do this, add signUpConfig
Create an export point for our future components /src/components/index.js with content
and accordingly create the file /src/components/AmplifyTheme/index.js of the theme with the content
And connect the theme to the component Authenticator src/index.js
In our case, the Russian language 🇷🇺
Add export to /src/components/index.js
Create the file /src/components/Localei18n/index.js with the content
И подключаем компонент Localei18n в src/index.js
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
Thanks goes to these wonderful people (emoji key):