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.
- Node.js
- NPM
- Angular 2 (2.2.1)
- Ionic 2 (2.0.0-rc6)
- Ionic Cloud Auth Service (^0.9.1)
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
- 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 installfrom 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 servein a terminal from the project root to build and launch the app in the browser. - Optionally, run
ionic platform add iosand/orionic platform add androidand/orionic platform add windowsto 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 updatefor each platform that you have already added. For example, if I already added Android platform support, I would runionic 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.
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
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.