Intro to AWS amplify and using it to simplify provisioning of required resources by using cloudformation and infrastructure as code.
It is a framework (Libraries, CLI, UI, Components) to simplify use of underlying aws services. There are no additional charges for using the amplify framework. So we can consider it as a utility to simplify creation of resources in the cloud using aws cloudformation and integrating them with our application.
npm i -g @aws-amplify/cli
amplify configure
amplify init
amplify add auth
amplify push
amplify publish
For a react application we can go with the following steps
yarn add aws-amplify @aws-amplify/ui-react -S
import Amplify, { Auth } from 'aws-amplify'
import awsconfig from '../aws-exports'
App
with withAuthenticator
HOC to provide us the login interfaceimport { withAuthenticator } from '@aws-amplify/ui-react'
...
export default withAuthenticator(App)
That's it this will now give a login interface which will validate our users as per the user pool created during amplify add auth
step.
Auth
service of amplify like thisconst handleLogout = () => {
Auth.signOut()
}
or make use of signout component provided by amplify
import { AmplifySignOut } from '@aws-amplify/ui-react'
...
<AmplifySignOut />
...
I however, ran into a painful issue -
When deploying the front-end app, aws-exports.js file is git ignored then build fails because this file is not found. Hence either do amplifyPush on the build step or use the better option I think and I use is to use values from aws-exports.js in an environment variable and then import that from env variable instead of from aws-export.js file
Let me know your feedback/suggestions in the comments.
- Ayush 🙂