Angular2 + Ionic2 + Auth0 (Role-based Authentication) + SQLite (Pre-loading Database) + Camera + FileSystem + Firebase. Still working on it...
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bower_components/platform.js
resources
src
.editorconfig
.gitignore
LICENSE
README.md
config.xml
ionic.config.json
package.json
tsconfig.json
tslint.json

README.md

angular2-ionic2-demo

An experimental project for testing Ionic2 role-based authentication, SQLite pre-loading and native functionalities of mobile platforms(Android && iOS) in using TypeScript, Angular2, RxJS, Ionic2, Cordova, SQLite, Auth0, Firebase.

About

This repo could be used to explore:

  1. How to enrich Auth0 JWT Payload with roles/groups/permissions info by using Auth0 Authorization Extension.
  2. How to implement a customisable login page with Auth0 endpoints instead of using Auth0 JS SDK and Auth0 UI Components => [code].
  3. How to use RxJS to handle nested async calls and session expiration issues(renew JWT or force to re-login) => [code].
  4. How to customise Ionic2 tabs based on different user roles => [code].
  5. How to share data between controllers and services by
    • Route parameters => [code]
    • Angular2 setter/getter service for sync data flow => [code]
    • Ionic2 publish/subscribe pattern for async data flow => [code]
    • Mobile native storage => [code]
    • SQLite DB => [code]
  6. How to use cordova plugins(both ionic-native and other extra cordova plugins) to access mobile native functionalities, such as network, device, battery, camera, file system, etc. => [code].
  7. How to prepare and preload SQLite database once users install the app in order to support OFFLINE Mode => [code].
  8. How to implement InfiniteScroll => [code] with async SQL queries => [code].
  9. How to integrate Firebase(customisable token authentication and real-time storage) to support ONLINE Mode.

Get started

Setup

$ npm install -g cordova ionic
$ git clone https://github.com/crabcanon/angular2-ionic2-demo.git
$ cd angular2-ionic2-demo
$ npm install
$ ionic build
$ cp src/data.db www
$ ionic platform add ios
$ ionic platform add android

// If any error regarding cordova-plugin-dbcopy, please run:
$ cordova plugin add https://github.com/an-rahulpandey/cordova-plugin-dbcopy.git --save

$ ionic build ios
$ ionic build android

$ ionic emulate ios/android(your choice)

// Do not test this project with browsers.
// Open project from Android Studio or Xcode instead of running `ionic emulate`.
// Import project from the platforms/ios or platforms/android directory.

Testing credentials(role: username/password)

  • Super Admin: super_admin@test.com/super_admin
  • Reseller Admin: reseller_admin@test.com/reseller_admin
  • Customer Admin: customer_admin@test.com/customer_admin
  • User Admin: user_admin@test.com/user_admin

PS: With different roles, you will see different contents and initial routes.

TODO List

  • Enrich Auth0 JWT Payload with roles info
  • Customisable login page with Auth0 RESTful endpoints
  • Role-based authentication
  • Customisable session-expiration handlers(two use cases: JWT metadata or customisable expiration time period)
  • Share data between pages by different methods
  • Preloading SQLite database
  • InfiniteScroll for list
  • Search InfiniteScroll list
  • Signin Firebase with custom tokens provided by Auth0
  • CURD methods for Firebase nodes
  • Take photoes and store to the iOS/Android camera gallery
  • Take photoes and store base64 data to Firebase
  • Upload files from devices to Firebase

License

MIT License


yehuang.me  ·  GitHub @crabcanon  ·  Gmail @sysuhuangye