Integrating AWS Cognito with a 2FA in an Ionic/Angular App with Amplify.

Cloning an Ionic/Angular project

# git clone https://github.com/aosolorzano/ionic-ui-components-showcase.git
# mv ionic-ui-components-showcase ionic-amplify-auth-example
# cd ionic-amplify-auth-example
# rm -rf .git
# idea .
# npm install
# ionic build
# ionic serve

Adding Amplify support

# amplify init
npm install aws-amplify @aws-amplify/ui-angular
@import '~@aws-amplify/ui-angular/theme.css';

Adding Amplify Auth support (with Cognito)

# amplify add auth
# amplify status
# amplify push
# ionic g service services/auth/authentication
# ionic g service services/auth/auth-guard
# ionic g page pages/login
  1. app.component.ts: this component is notified by the authenticator service when the user is signed in.
  2. App.component.html: adding a “log out” button. Furthermore, the Ionic side menu must be activated when the user is logged in.
  3. app-routing.module.ts: the existing page’s components routing config were moved to a new file called “pages-routing.module.ts” created inside the pages folder. These pages are now part of a unique app routing URL defined as “/app”. Finally, the new activation component is used as an auth-guard for the “/app” pages.

Create and push this app to a GitHub repo (optional)

# git init
# git add .
# git commit -m "Initial commit"
# git remote add origin https://github.com/<your-username>/ionic-amplify-auth-example.git
# git push -u origin master

Adding Hosting environment on Amplify Console (optional)

Deleting Amplify resources on AWS (optional)

# amplify delete

Deploying the app anew using Amplify (optional)

# git clone https://github.com/aosolorzano/ionic-amplify-auth-example.git
# cd ionic-amplify-auth-example
# amplify init

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store