Ionic AWS Cognito  S3 Authenticaion

Ionic AWS Cognito S3 Authenticaion

An Ionic Authentication App using AWS Cognito and S3. Persists the user session and incorporates a 'WhatsApp' inspired phone number mask and validation component.

$10.00

Dexter Hardy

Dexter Hardy

Member since 2017

Details

Version:
0.0.3
Ionic:
3.x  
Platforms:
iOS, Android  
Released:
3 years ago
Updated:
3 years ago
Category:
Starters
Tags:
AWS, S3, Cognito, Authentication, WhatsApp inspired phone number validation, ,

Mobile Ionic Authenticaton App using AWS Cognito (iCognito). Persists the user session and incorporates a 'WhatsApp' inspired phone number mask and validation component.

Mobile Ionic Authenticaton App using AWS Cognito (iCognito)

Features

  • Welcome Page
  • Login Page
  • Show Hide Password Component
  • Forgot Password Page
  • Sign Up Page
  • Phone Number Component
  • Home Page - List of Cognito Profile Attributes
  • Edit Profile Page
  • Change Password Page
  • Sign Out
  • Stores the App User session if the app is closed until user Signs out### 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:

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

Included Ionic Marketplace Starter by Ntegral

Prerequisites:

Backend setup

  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 congito.config.ts file; Add the informaion for the following:
    • region: 'your-region',
    • userPoolId: 'your-region_1gfVMWz3c',
    • appId: 'your-app-id',
    • idpUrl: 'cognito-idp.your-region.amazonaws.com',
    • identityPoolId: '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 platform add ios $ ionic cordova run 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 cordova run browser