Firebase v2 Auth Pack

Firebase v2 Auth Pack

E-mail/Password and Social Authentication with Firebase and ngCordova for Tabs, Sidemenu and Blank

$0.00

Noodlio

Noodlio

Member since 2014

Details

Version:
1.0
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
3 years ago
Category:
Starters
Tags:
firebase, auth, authentication, login, signup, modal, animation, cordovaCamera, cordova, social auth, social authentication, facebook, google, twitter,

** Firebase V3 - This version is currently not compatible with Firebase v3. Feel free to try out the Advanced Edition instead (supports Firebase v3) **

You might be also interested in Ionic Shop - Advanced Edition, which includes additional features such as inventory management, ratings, comments, attributes, and more. Have a look here

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 $cordovaCamera).

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

Getting started

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 config.xml file:

cordova-plugin-inappbrowser

Firebase Authentication Setup

To setup the back-end, please ollow these steps:

  1. Create an account on firebase.com
  2. Then create a new app and open the dashboard.
  3. On your left, go to Login & Auth
  4. Go to Email & Password and press on Enable Email & Password Authentication
  5. Go to Facebook and paste your app ids. You can obtain them by following these instructions.
  6. Go to Google and paste your app ids. You can obtain them by following these instructions.
  7. 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: <your-app-name>.firebaseio.com)

Firebase Security Rules

  1. Copy the content of the file /config/security-rules.txt
  2. Head over to your app dashboard
  3. On the left, press on Security and Rules
  4. 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