/ionic2-cloud-auth-starter-tabs

An Ionic 2 tabs starter app with Ionic Cloud Auth Service integration. The app contains a complete user login/registration flow with password reset functionality via the Ionic Cloud Auth service.

Primary LanguageTypeScriptMIT LicenseMIT

Ionic 2 Cloud Auth Starter App (Tabs)

An Ionic 2 tabs starter app with Ionic Cloud Auth Service integration. This version of the app contains a complete user login/registration flow with password reset functionality via the Ionic Cloud Auth service, with custom form validations and error messaging. Once a user is logged in, they are shown a modified version of the default Ionic 2 Tabs Starter App HomePage. Two buttons have been added to this page: Sign Out and Delete Account.

ANOTHER VERSION OF THIS APP IS AVAILABLE with a completely functional user settings tab which allows the user to update their personal details, displays a user avatar image, and demonstrates managing custom user data (user birthday, collected via ion-datetime) to store additional data not assignable to the Ionic Auth User.details object. If you would rather use or preview this more involved example, you want to go here instead: https://github.com/RandyLedbetter/ionic2-cloud-auth-starter-tabs/tree/tabs_settings_page.

Table of Contents

Dependencies

App Preview

You can view a live demo of this app on iOS and Android mobile devices by downloading the Ionic View App for your desired platform and entering the following code: 72656763

Sneak Peek

Getting Started

  • Install Ionic CLI and Cordova: npm install -g ionic cordova. Include iOS, Android, and/or Windows platform support, as appropriate.
  • Clone this repository: git clone https://github.com/RandyLedbetter/ionic2-cloud-auth-starter-tabs.git
  • Run npm install from the project root
  • Create an Ionic Cloud account for free at: https://ionic.io/cloud
  • Login to your Ionic Cloud account and create a new app along with an Ionic Cloud API Key (you will need your app id, app name, and your Ionic Cloud API key for the next steps).
  • Open ionic.config.json in the project root and replace 'YOUR_IONIC_APP_NAME' and 'YOUR_IONIC_APP_ID' with your actual app name and app id created from the previous step.
  • Open .io-config.json in the project root and replace 'YOUR_IONIC_APP_ID' and 'YOUR_IONIC_CLOUD_API_KEY' with your actual app id and your Ionic Cloud API key.
  • Open config.xml in the project root and replace 'com.YOUR_ORGANIZATION_NAME.YOUR_IONIC_APP_NAME' with your unique app store identifier. For example, if my organization's name is 'Jedi Coders' and I named my app 'Padawan Trainer', I would replace 'com.YOUR_ORGANIZATION_NAME.YOUR_IONIC_APP_NAME' with 'com.jedicoders.padawantrainer'. Next, replace the second instance of 'YOUR_IONIC_APP_NAME' with your actual Ionic App name. For example, 'padawantrainer'.
  • Finally, open app.module.ts and replace 'YOUR_IONIC_APP_ID' with your actual app id
  • Run ionic serve in a terminal from the project root to build and launch the app in the browser.
  • Optionally, run ionic platform add ios and/or ionic platform add android and/or ionic platform add windows to allow for development with a particular platform.
  • IMPORTANT: If you have already added one or more of these platforms to the project, you must run ionic platform update for each platform that you have already added. For example, if I already added Android platform support, I would run ionic platform update android. This is necessary to update platform configuration files with your actual Ionic App Id and Ionic App Name.
  • You're all set.

File Structure of App

ionic2-cloud-auth-starter-tabs/
|-- resources/
|-- src/
|    |-- app/
|    |    +-- app.component.ts
|    |    +-- app.html
|    |    +-- app.module.ts
|    |    +-- app.scss
|    |    +-- main.ts
|    |    +-- md5.ts                                    * Gravatar account email hashing
|    |
|    |-- assets/
|    |    +-- icon/
|    |    |    +-- favicon.ico
|    |    |
|    |    +-- images/
|    |         +-- icon.png
|    |         +-- splash.png
|    |
|    |-- pages/                                         * Contains all of our pages
|    |    +-- about/                                    * About tab page
|    |    |    +-- about.html                           * AboutPage template
|    |    |    +-- about.ts                             * AboutPage code
|    |    |    +-- about.scss                           * AboutPage stylesheet
|    |    |
|    |    +-- confirm-password-reset/                   * Confirm Password Reset page
|    |    |    +-- confirm-password-reset.html          * ConfirmPasswordResetPage template
|    |    |    +-- confirm-password-reset.ts            * ConfirmPasswordResetPage code
|    |    |    +-- confirm-password-reset.scss          * ConfirmPasswordResetPage stylesheet
|    |    |
|    |    +-- contact/                                  * Contact tab page
|    |    |    +-- contact.html                         * ContactPage template
|    |    |    +-- contact.ts                           * ContactPage code
|    |    |    +-- contact.scss                         * ContactPage stylesheet
|    |    |
|    |    +-- forgot-password/                          * Forgot Password page
|    |    |    +-- forgot-password.html                 * ForgotPasswordPage template
|    |    |    +-- forgot-password.ts                   * ForgotPasswordPage code
|    |    |    +-- forgot-password.scss                 * ForgotPasswordPage stylesheet
|    |    |
|    |    +-- home/                                     * Home tab page
|    |    |    +-- home.html                            * HomePage template
|    |    |    +-- home.ts                              * HomePage code
|    |    |    +-- home.scss                            * HomePage stylesheet
|    |    |
|    |    +-- login/                                    * Login page
|    |    |    +-- login.html                           * LoginPage template
|    |    |    +-- login.ts                             * LoginPage code
|    |    |    +-- login.scss                           * LoginPage stylesheet
|    |    |
|    |    +-- signup/                                   * Signup page
|    |    |    +-- signup.html                          * SignupPage template
|    |    |    +-- signup.ts                            * SignupPage code
|    |    |    +-- signup.scss                          * SignupPage stylesheet
|    |    |
|    |    +-- tabs/                                     * Tabs page
|    |         +-- tabs.html                            * TabsPage template
|    |         +-- tabs.ts                              * TabsPage code
|    |
|    +-- services/                       * Contains all Injectables
|    |     +-- custom-validators.ts      * CustomValidators code
|    |     +-- error-messages.ts         * ErrorMessages code
|    |     +-- user-data.ts              * UserData code
|    +-- theme/                          * App theme files
|    |     +-- variables.scss            * App Shared Sass Variables
|    |
|    |-- index.html
|
+-- .editorconfig                       * Defines coding styles between editors
+-- .gitignore                          * Example git ignore file
+-- io-config.json                      * Ionic Cloud configuration file
+-- LICENSE                             * Apache License
+-- README.md                           * This file
+-- config.xml                          * Cordova configuration file
+-- ionic.config.json                   * Ionic configuration file
+-- package.json                        * Defines our JavaScript dependencies
+-- tsconfig.json                       * Defines the root files and the compiler options
+-- tslint.json                         * Defines the rules for the TypeScript linter

Contributing

Contributions are welcome. If you feel that this project can be improved upon, please feel free to submit a pull request, along with a short explanation of what your proposed modification or addition is designed to do. Alternatively, feel free to fork this repo and do whatever you want.