-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path29308b07.c956ee42.js
1 lines (1 loc) · 36 KB
/
29308b07.c956ee42.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{111:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var a=n(0),i=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var s=i.a.createContext({}),u=function(e){var t=i.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},p=function(e){var t=u(e.components);return i.a.createElement(s.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(n),d=a,m=p["".concat(c,".").concat(d)]||p[d]||b[d]||o;return n?i.a.createElement(m,r(r({ref:t},s),{},{components:n})):i.a.createElement(m,r({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,c=new Array(o);c[0]=d;var r={};for(var l in t)hasOwnProperty.call(t,l)&&(r[l]=t[l]);r.originalType=e,r.mdxType="string"==typeof e?e:a,c[1]=r;for(var s=2;s<o;s++)c[s]=n[s];return i.a.createElement.apply(null,c)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},112:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/patreon-15b4e66595efdb2e079faf18b89cff7c.png"},116:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/01-a23cc15b10aa8903a2768742f2d5f639.png"},117:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/02-d8f056a9ee77817d5fa34ed27b8a9ded.png"},120:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/03-99e9f84b954c87f14c5b1c2a2fc7beb5.png"},121:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/04-b7fa82403420155f5bc0c2e2b713251f.png"},122:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/05-1c1a60851841e4476b56c3edf139208b.png"},123:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/06-e6c67e52061de238f27f3c609644f4b9.png"},124:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/07-8a3ce13813e6679ceb6d32560f619235.png"},129:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/08-c284e2b885bb0393ec87b2e5af025826.png"},130:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/09-e3185a977d8228e9551c978b4032cfeb.png"},134:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/00-1339b6b03bac7ae4b5b7308a8055bf6b.gif"},135:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/auth02-a6bbe130e5a203fb1094bf10025c251c.png"},136:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/auth03-c26b5e57e8cf643cec8fddc2a31ad7d1.png"},137:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/10-4f1052b7e740229f97d3918602f76c7b.png"},138:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"},235:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/auth1-03-88700e306447c1f61eec163996795af2.png"},236:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/auth04-99f177458c06fdc7cc3638c6949ba155.png"},237:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/auth05-3b5240f6aaf72df4b53c73151461c994.png"},238:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/auth06-7a3e969a187355bd1c9c2a365ecb85a3.png"},76:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return r})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var a=n(3),i=n(8),o=(n(0),n(111)),c={id:"auth1-01",title:"Authentication",sidebar_label:"Default setup"},r={unversionedId:"auth1-01",id:"auth1-01",isDocsHomePage:!1,title:"Authentication",description:"I decided to make two-part authentication series. In this first part, we will make default authentication",source:"@site/docs/auth1.01.md",slug:"/auth1-01",permalink:"/docs/auth1-01",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/docs/auth1.01.md",version:"current",sidebar_label:"Default setup",sidebar:"someSidebar",previous:{title:"Introduction",permalink:"/docs/auth1-00"},next:{title:"Authentication",permalink:"/docs/auth1-02"}},l=[{value:"Create a new project \u269b\ufe0f",id:"create-a-new-project-\ufe0f",children:[]},{value:"Connect the icons \ud83d\udc7e",id:"connect-the-icons-",children:[]},{value:"Register your AWS account",id:"register-your-aws-account",children:[]},{value:"Initializing AWS Amplify in a React Native Project",id:"initializing-aws-amplify-in-a-react-native-project",children:[]},{value:"Connect authentication plugin",id:"connect-authentication-plugin",children:[]},{value:"Connect AWS Amplify to React Native",id:"connect-aws-amplify-to-react-native",children:[]},{value:"Edit the project structure",id:"edit-the-project-structure",children:[]},{value:"Minimum project configuration and Authenticator module",id:"minimum-project-configuration-and-authenticator-module",children:[]},{value:"Edit Inputs in ./src/index.js",id:"edit-inputs-in-srcindexjs",children:[]},{value:"Change UI theme \ud83d\udd8c",id:"change-ui-theme-",children:[]},{value:"Connect localization",id:"connect-localization",children:[]},{value:"Done \u2705",id:"done-",children:[]}],s={rightToc:l};function u(e){var t=e.components,c=Object(i.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"I decided to make two-part authentication series. In this first part, we will make default authentication\nUI component from AWS Amplify, and in the next part we will look through how to create it from scratch\nwith custom design."),Object(o.b)("p",null,"The source code for this part is available on ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/fullstackserverless/auth/tree/part1"}),"GitHub"),"."),Object(o.b)("p",null,Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://youtu.be/QMObthDaewQ"}),Object(o.b)("img",{alt:"AWS Amplify",src:n(134).default}))),Object(o.b)("p",null,Object(o.b)("img",{alt:"Cognito",src:n(235).default})),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step01",src:n(116).default})),Object(o.b)("h2",{id:"create-a-new-project-\ufe0f"},"Create a new project \u269b\ufe0f"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"npx react-native init auth\n")),Object(o.b)("p",null,"We start the project \ud83d\ude80\nEnter the project folder from run it."),Object(o.b)("p",null,"iOS"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"cd auth && react-native run-ios\n")),Object(o.b)("p",null,"Android"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"cd auth && react-native run-android\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step02",src:n(117).default})),Object(o.b)("h2",{id:"connect-the-icons-"},"Connect the icons \ud83d\udc7e"),Object(o.b)("p",null,"Since the icons are used by the AWS Amplify framework, we therefore connect them according to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/oblador/react-native-vector-icons#installation"}),"this")," instructions \ud83d\udcc3.\nCheck for errors."),Object(o.b)("p",null,"Add to App.js"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),'import Icon from \'react-native-vector-icons/FontAwesome5\'\n\nconst App = () => {\n return (\n <>\n <Icon name="comments" size={30} color="#900" />\n </>\n )\n}\n')),Object(o.b)("p",null,"In order to see errors and automatically align the code, install ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://fullstackserverless.github.io/docs/start03"}),"ESLint & Prettierrc")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step03",src:n(120).default})),Object(o.b)("h2",{id:"register-your-aws-account"},"Register your AWS account"),Object(o.b)("p",null,"Register using ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native"}),"this")," instruction \ud83d\udcc3 and check out all 5 steps in the video tutorial."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"You need a bank card \ud83d\udcb3, where should be more than 1 \\$ \ud83d\udcb5")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}))),Object(o.b)("p",null,"There we look and put the Amplify Command Line Interface (CLI)"),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step04",src:n(121).default})),Object(o.b)("h2",{id:"initializing-aws-amplify-in-a-react-native-project"},"Initializing AWS Amplify in a React Native Project"),Object(o.b)("p",null,"Initialize our AWS Amplify project in the root directory."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"amplify init\n")),Object(o.b)("p",null,"Answer these questions:"),Object(o.b)("p",null,Object(o.b)("img",{alt:"amplify init",src:n(135).default})),Object(o.b)("p",null,"The project successfully initialized \ud83d\ude80"),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step05",src:n(122).default})),Object(o.b)("h2",{id:"connect-authentication-plugin"},"Connect authentication plugin"),Object(o.b)("p",null,"Now that the application is in the cloud, you can add some features, such as allowing users to register with our application and log in."),Object(o.b)("p",null,"Use command:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"amplify add auth\n")),Object(o.b)("p",null,"Connect the authentication function. Select the default configuration. This adds auth resource configurations locally to your ampify/backend/auth directory"),Object(o.b)("div",{class:"alert alert--info",role:"alert"},"\ud83d\udccc Select the profile we want to use. default. Enter and how users will log in. Email (write off money for SMS)."),Object(o.b)("p",null,Object(o.b)("img",{alt:"amplify init",src:n(136).default})),Object(o.b)("p",null,"Submit changes to the cloud \ud83d\udcad"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"amplify push\n")),Object(o.b)("p",null,"\u2714 All resources are updated in the cloud"),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step06",src:n(123).default})),Object(o.b)("h2",{id:"connect-aws-amplify-to-react-native"},"Connect AWS Amplify to React Native"),Object(o.b)("p",null,"Details can be found in ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://aws-amplify.github.io/docs/js/react"}),"this")," instruction \ud83d\udcc3.In short, you can add these dependencies below to connect AWS Amplify:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"yarn add aws-amplify @aws-amplify/core aws-amplify-react-native amazon-cognito-identity-js @react-native-community/netinfo\n")),Object(o.b)("p",null,"After installation, make sure to go to the ios folder and set the pods"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-bash"}),"cd ios && pod install && cd ..\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step07",src:n(124).default})),Object(o.b)("h2",{id:"edit-the-project-structure"},"Edit the project structure"),Object(o.b)("p",null,"Create /src directory and transfer the App.js file there, then rename it to index.js"),Object(o.b)("p",null,"Edit import in /auth/index.js and hide future warnings."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"import { AppRegistry, YellowBox } from 'react-native'\nimport App from './src'\nimport { name as appName } from './app.json'\n\nYellowBox.ignoreWarnings([\n 'Warning: AsyncStorage',\n 'Warning: componentWillReceiveProps',\n 'RCTRootView cancelTouches',\n 'not authenticated',\n 'Sending `onAnimatedValueUpdate`'\n])\n\n//window.LOG_LEVEL = 'DEBUG'\n\nAppRegistry.registerComponent(appName, () => App)\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step08",src:n(129).default})),Object(o.b)("h2",{id:"minimum-project-configuration-and-authenticator-module"},"Minimum project configuration and Authenticator module"),Object(o.b)("p",null,"Amplify.configure - project configuration"),Object(o.b)("p",null,"Authenticator - The ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://aws-amplify.github.io/docs/js/authentication#using-components-in-react--react-native"}),"AWS Amplify Authentication")," Module provides authentication APIs and building blocks for developers who want to create user authentication."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"import React from 'react'\nimport { StatusBar } from 'react-native'\nimport Amplify from '@aws-amplify/core'\nimport { Authenticator } from 'aws-amplify-react-native'\nimport awsconfig from '../aws-exports'\n\nAmplify.configure({\n ...awsconfig,\n Analytics: {\n disabled: true\n }\n})\n\nconst App = () => {\n return (\n <>\n <StatusBar barStyle=\"dark-content\" />\n <Authenticator usernameAttributes=\"email\" />\n </>\n )\n}\n\nexport default App\n")),Object(o.b)("p",null,"We start the simulator, where we are met by the authentication UI component:"),Object(o.b)("p",null,Object(o.b)("img",{alt:"Cognito",src:n(236).default})),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step09",src:n(130).default})),Object(o.b)("h2",{id:"edit-inputs-in-srcindexjs"},"Edit Inputs in ./src/index.js"),Object(o.b)("p",null,"To do this, add signUpConfig"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"const signUpConfig = {\n hideAllDefaults: true,\n signUpFields: [\n {\n label: 'Email',\n key: 'email',\n required: true,\n displayOrder: 1,\n type: 'string',\n },\n {\n label: 'Password',\n key: 'password',\n required: true,\n displayOrder: 2,\n type: 'password',\n },\n ],\n}\n\n\n<Authenticator\n usernameAttributes=\"email\"\n signUpConfig={signUpConfig}\n/>\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step10",src:n(137).default})),Object(o.b)("h2",{id:"change-ui-theme-"},"Change UI theme \ud83d\udd8c"),Object(o.b)("p",null,"Create an export point for our future components /src/components/index.js with content"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"export * from './AmplifyTheme'\n")),Object(o.b)("p",null,"and accordingly create the /src/components/AmplifyTheme/index.js theme file itself with the content"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"import { StyleSheet } from 'react-native'\n\n// Colors\nexport const deepSquidInk = '#152939'\nexport const linkUnderlayColor = '#FFF'\nexport const errorIconColor = '#DD3F5B'\nexport const textInputColor = '#000000'\nexport const textInputBorderColor = '#C4C4C4'\nexport const placeholderColor = '#C7C7CD'\nexport const buttonColor = '#FF06F4'\nexport const disabledButtonColor = '#FF9FFB'\n\nconst AmplifyTheme = StyleSheet.create({\n container: {\n flex: 1,\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'space-around',\n paddingTop: 20,\n width: '100%',\n backgroundColor: '#FFF'\n },\n section: {\n flex: 1,\n width: '100%',\n justifyContent: 'space-between',\n paddingHorizontal: 20\n },\n sectionScroll: {\n flex: 1,\n width: '100%',\n paddingHorizontal: 20\n },\n sectionHeader: {\n width: '100%',\n marginBottom: 32,\n paddingTop: 20\n },\n sectionHeaderText: {\n color: deepSquidInk,\n fontSize: 20,\n fontWeight: '500'\n },\n sectionFooter: {\n width: '100%',\n padding: 10,\n flexDirection: 'row',\n justifyContent: 'space-between',\n marginTop: 15,\n marginBottom: 20\n },\n sectionFooterLink: {\n fontSize: 14,\n color: buttonColor,\n alignItems: 'baseline',\n textAlign: 'center'\n },\n sectionFooterLinkDisabled: {\n fontSize: 14,\n color: disabledButtonColor,\n alignItems: 'baseline',\n textAlign: 'center'\n },\n navBar: {\n marginTop: 35,\n padding: 15,\n flexDirection: 'row',\n justifyContent: 'flex-end',\n alignItems: 'center'\n },\n navButton: {\n marginLeft: 12,\n borderRadius: 4\n },\n cell: {\n flex: 1,\n width: '50%'\n },\n errorRow: {\n flexDirection: 'row',\n justifyContent: 'center'\n },\n errorRowText: {\n marginLeft: 10\n },\n photo: {\n width: '100%'\n },\n album: {\n width: '100%'\n },\n button: {\n backgroundColor: buttonColor,\n alignItems: 'center',\n padding: 16\n },\n buttonDisabled: {\n backgroundColor: disabledButtonColor,\n alignItems: 'center',\n padding: 16\n },\n buttonText: {\n color: '#fff',\n fontSize: 14,\n fontWeight: '600'\n },\n formField: {\n marginBottom: 22\n },\n input: {\n padding: 16,\n borderWidth: 1,\n borderRadius: 3,\n borderColor: textInputBorderColor,\n color: textInputColor\n },\n inputLabel: {\n marginBottom: 8\n },\n phoneContainer: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n phoneInput: {\n flex: 2,\n padding: 16,\n borderWidth: 1,\n borderRadius: 3,\n borderColor: textInputBorderColor,\n color: textInputColor\n },\n picker: {\n flex: 1,\n height: 44\n },\n pickerItem: {\n height: 44\n },\n signedOutMessage: {\n textAlign: 'center',\n padding: 20\n }\n})\n\nexport { AmplifyTheme }\n")),Object(o.b)("p",null,"Apply the theme into the Authenticator component src/index.js"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),'import { AmplifyTheme } from \'./components\'\n\nconst App = () => {\n return (\n <>\n <StatusBar barStyle="dark-content" />\n <Authenticator usernameAttributes="email" signUpConfig={signUpConfig} theme={AmplifyTheme} />\n </>\n )\n}\n')),Object(o.b)("p",null,Object(o.b)("img",{alt:"AmplifyTheme",src:n(237).default})),Object(o.b)("p",null,Object(o.b)("img",{alt:"Step11",src:n(138).default})),Object(o.b)("h2",{id:"connect-localization"},"Connect localization"),Object(o.b)("p",null,"In our case, the Russian language \ud83c\uddf7\ud83c\uddfa"),Object(o.b)("p",null,"Add export to /src/components/index.js"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"export * from './Localei18n'\n")),Object(o.b)("p",null,"Create the file /src/components/Localei18n/index.js with the contents"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"import { NativeModules, Platform } from 'react-native'\nimport { I18n } from '@aws-amplify/core'\n\nlet langRegionLocale = 'en_US'\n\n// If we have an Android phone\nif (Platform.OS === 'android') {\n langRegionLocale = NativeModules.I18nManager.localeIdentifier || ''\n} else if (Platform.OS === 'ios') {\n langRegionLocale = NativeModules.SettingsManager.settings.AppleLocale || ''\n}\n\nconst authScreenLabels = {\n en: {\n 'Sign Up': 'Create new account',\n 'Sign Up Account': 'Create a new account'\n },\n ru: {\n 'Sign Up': '\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442',\n 'Forgot Password': '\u0417\u0430\u0431\u044b\u043b\u0438 \u043f\u0430\u0440\u043e\u043b\u044c?',\n 'Sign In Account': '\u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443',\n 'Enter your email': '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 email',\n 'Enter your password': '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c',\n 'Password': '\u041f\u0430\u0440\u043e\u043b\u044c',\n 'Sign In': '\u0412\u0445\u043e\u0434',\n 'Please Sign In / Sign Up': '\u0412\u043e\u0439\u0442\u0438 / \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442',\n 'Sign in to your account': '\u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442',\n 'Create a new account': 'C\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442',\n 'Confirm a Code': '\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u043a\u043e\u0434',\n 'Confirm Sign Up': '\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e',\n 'Resend code': '\u0415\u0449\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u0434',\n 'Back to Sign In': '\u0412\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0432\u0445\u043e\u0434\u0443',\n 'Confirm': '\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c',\n 'Confirmation Code': '\u041a\u043e\u0434 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f',\n 'Sign Out': '\u0412\u044b\u0445\u043e\u0434'\n }\n}\n\n// \"en_US\" -> \"en\", \"es_CL\" -> \"es\", etc\nconst languageLocale = langRegionLocale.substring(0, 2)\nI18n.setLanguage(languageLocale)\nI18n.putVocabularies(authScreenLabels)\n\nconst Localei18n = () => null\n\nexport { Localei18n }\n")),Object(o.b)("p",null,"And we connect the Localei18n component in src/index.js"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"import {\n AmplifyTheme,\n Localei18n\n} from './components'\n\n\n<Localei18n />\n<Authenticator\n usernameAttributes=\"email\"\n signUpConfig={signUpConfig}\n theme={AmplifyTheme}\n/>\n")),Object(o.b)("p",null,"We start the project, where we see that localization has not yet been applied. Therefore, we change the language into Russian in the settings of our simulator"),Object(o.b)("p",null,Object(o.b)("img",{alt:"Localei18n",src:n(238).default})),Object(o.b)("h2",{id:"done-"},"Done \u2705"),Object(o.b)("p",null,Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.patreon.com/bePatron?u=34467235"}),Object(o.b)("img",{alt:"Become a Patron!",src:n(112).default}))))}u.isMDXComponent=!0}}]);