
IA Kickstarter - AWS Amplify, S3 Cognito
Ionic AWS Kickstarter App using AWS Cognito IA Kickstarter
$25.00
Details
- Version:
- 1.0
- Ionic:
- 4.x
- Platforms:
- iOS, Android
- Released:
- 1 year ago
- Updated:
- 1 year 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:
- 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
- Create or Sign In to your AWS Cognito environment
- Create an AWS Cognito User Pool
- Create an AWS Federated Identity Pool
- Edit the AWS Federated Identity Pool, adding the AWS Cognito User Pool created in step 2(above).
- 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".
- Create two custom attributes. country_code and member_since.
Ionic app setup
- Clone this repo:
- 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'
- Open a bash shell and navigate to the project folder.
- 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