IA Kickstarter - AWS Amplify, S3  Cognito

IA Kickstarter - AWS Amplify, S3 Cognito

Ionic AWS Kickstarter App using AWS Cognito IA Kickstarter

$25.00

Dexter Hardy

Dexter Hardy

Member since 2017

Details

Version:
1.0
Ionic:
4.x  
Platforms:
iOS, Android  
Released:
2 years ago
Updated:
2 years ago
Category:
Starters
Tags:
,

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

Quicklinks

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

Prerequisites:

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