Firebase v2 Auth Pack
E-mail/Password and Social Authentication with Firebase and ngCordova for Tabs, Sidemenu and Blank
** Firebase V3 - This version is currently not compatible with Firebase v3. Feel free to try out the Advanced Edition instead (supports Firebase v3) **
All you need to start with Firebase and Ionic
This is an all-in-one multi-functional package to start using Firebase with Ionic. It consists of pre-configured authentication methods (e-mail & password, facebook, twitter, google) for all the three Ionic starter apps (blank, tabs, sidemenu). As a bonus I have included an exercise on how to setup an username for each profile, with obviously testing whether the username exists first. The package is also SASS ready and has ngCordova pre-configured (which we use to manage our profile pictures using
This pack is a trimmed version of the Social Network Starter, which includes additional functionalities (such as posting tweets, following users, managing and browsing timelines, etc.).
An overview of the functionalities in this package:
- Sign up and sign in with E-mail and Password
- Recover a forgotten password
- Edit your E-mail and Password
- Sign in with Twitter, Google or Facebook (social authentication)
- Manage your profile settings (details, profile picture, username, etc.)
- Change your profile picture (import from your phone albums or take a new picture)
- Check whether an username is taken
- Pre-configured SASS settings
- Pre-configured ngCordova
To start editing this code, make sure that NodeJS is installed in your workspace. Then run the following npm commands to install cordova and ionic globally (and Bower if necessary):
npm install -g cordova ionic
npm install -g bower Install gulp
Once the installation is complete, unzip the content of this package to the appropriate folder. ngCordova and other necessary plugins are included in the files.
If you are deploying this starter with Phonegap Build, make sure that you add the following cordova plugins in the
Firebase Authentication Setup
To setup the back-end, please ollow these steps:
- Create an account on firebase.com
- Then create a new app and open the dashboard.
- On your left, go to Login & Auth
- Go to Email & Password and press on Enable Email & Password Authentication
- Go to Facebook and paste your app ids. You can obtain them by following these instructions.
- Go to Google and paste your app ids. You can obtain them by following these instructions.
- Go to Twitter and paste your app ids. You can obtain them by following these instructions.
Steps 5 to 7 are optional. It is only if you wish to enable Social Authentication.
The final step is to point the app to the appropriate Firebase back-end. Open the file
www/js/app.js and replace the variable
FBURL with the appropriate url of your app (when you open your app dashboard, it's the url in the browser; something like:
Firebase Security Rules
- Copy the content of the file
- Head over to your app dashboard
- On the left, press on Security and Rules
- Paste and replace the content
Try before you buy
Download Ionic View (view.ionic.io), sign in, and enter the following app id:
- Tabs: 775be665
- Blank: 9ab41804
- Sidemenu: 1377d683