Ionic & AWS Kickstarter App using AWS Cognito (IA Kickstarter)

Quicklinks

• AWS Console
• Ionic
• Angular

Architecture Overview

Ionic is a popular Javascript framework that leverages Angular and Apache Cordova to run hybrid apps on mobile devices. The app will allow users to sign-up, confirm/verify email and login to gain access to authorized AWS resources.

AWS Services used:

• Amplify
• Amazon Cognito User Pools
• Amazon Cognito Federated Identities
• Amazon S3

Included Ionic Marketplace Starter by Ntegral

• Ionic Masker App

Prerequisites:

• AWS Account
• NodeJS with NPM
• Ionic CLI
• Amplify

Features

• Updated Sass for styling UI & Custom Components
• Welcome Page
• Login Page
• Sign Up Page
• Forgot Password Page
• Phone Number Component - country-based phone number validation and formatting
• Cognito Profile Edit Page - allows adding and editing custom attributes
• Sign Out
• Stores the app user session if the app is closed until the user signs out
• RouteGuard using angular lazy loaded routing

Backend setup - or using Amplify CLI

1. Create or Sign In to your AWS Cognito environment
2. Create an AWS Cognito User Pool
3. Create an AWS Federated Identity Pool
4. Edit the AWS Federated Identity Pool, adding the AWS Cognito User Pool created in step 2(above).
5. Add an App Client to the AWS Cognito User Pool created in step 2(above). Note: Make sure to uncheck the checkbox "Generate client secret".
6. Create two custom attributes. country_code and member_since.

Ionic app setup

1. Clone this repo:
2. Open the environment.ts file; Add the informaion for the following: (or import the AWS Export)
   • region: 'your-region',
   • userPoolId: 'your-region_1gfVMWz3c',
   • appId: 'your-app-id',
   • idpUrl: 'cognito-idp.your-region.amazonaws.com',
   • userPoolWebClientId: 'your-region:guid-of-the-identityPool'
3. Open a bash shell and navigate to the project folder.
4. Then run.

bash $ sudo npm install

Then, to run it, and run:

bash $ ionic cordova prepare ios

Substitute ios for android if not on a Mac. Note: you can also substitute ios for browser if you want to run the application in a browser:

bash $ ionic serve