Ionic 2 Cloud Auth Starter App (Sidemenu)

An Ionic 2 sidemenu 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 Sidemenu Starter App Page1. 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 page 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-sidemenu/tree/sidemenu_settings_page.

Dependencies
App Preview
Getting Started
File Structure of App
Contributing

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: e2e5393d

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-sidemenu.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-sidemenu/
|-- resources/
|-- src/
|    |-- app/
|    |    +-- app.component.ts
|    |    +-- app.html
|    |    +-- app.module.ts
|    |    +-- app.scss
|    |    +-- main.ts
|    |
|    |-- assets/
|    |    +-- icon/
|    |    |    +-- favicon.ico
|    |    |
|    |    +-- images/
|    |         +-- icon.png
|    |         +-- splash.png
|    |
|    |-- pages/                                         * Contains all of our pages
|    |    +-- 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
|    |    |
|    |    +-- forgot-password/                          * Forgot Password page
|    |    |    +-- forgot-password.html                 * ForgotPasswordPage template
|    |    |    +-- forgot-password.ts                   * ForgotPasswordPage code
|    |    |    +-- forgot-password.scss                 * ForgotPasswordPage stylesheet
|    |    |
|    |    +-- login/                                    * Login page
|    |    |    +-- login.html                           * LoginPage template
|    |    |    +-- login.ts                             * LoginPage code
|    |    |    +-- login.scss                           * LoginPage stylesheet
|    |    |
|    |    +-- page1/                                    * Page1 page
|    |    |    +-- page1.html                           * Page1 template
|    |    |    +-- page1.ts                             * Page1 code
|    |    |    +-- page1.scss                           * Page1 stylesheet
|    |    |
|    |    +-- page2/                                    * Page2 page
|    |    |    +-- page2.html                           * Page2 template
|    |    |    +-- page2.ts                             * Page2 code
|    |    |    +-- page2.scss                           * Page2 stylesheet
|    |    |
|    |    +-- signup/                                   * Signup page
|    |         +-- signup.html                          * SignupPage template
|    |         +-- signup.ts                            * SignupPage code
|    |         +-- signup.scss                          * SignupPage stylesheet
|    |
|    +-- 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.

RicardoASilva / ionic2-cloud-auth-starter-sidemenu