Facebook authentication with Ionic 1.x and Firebase
Starter code is HERE
A mobile app template built with ionic framework.
For android you also must install the sdk:
Then select the package and install it after agreeing to the license. I got a
Error: Please install Android target: "android-22". That’s the error installing the packages should get rid of.
To test our app in the browser run
$ ionic serve
Normally if we were authenticating with facebook in the browser using angular.js and firebase we have a whole list of methods. Check out the angularFire documentation. For auth in the browser we could use
$authWithOAuthRedirect. Those do not work for a mobile application.
That said, using the plugin we can’t test authentication in the web browser, we have to use the emulator. If you try to go
$ ionic serve and then click login with facebook you’ll get an error in the console:
ERROR: Cannot authenticate via a web browser
So we’ll have to test that our authentication works with
The emulator is slow but deal with it. For our other features we’ll test using
ionic serve cause changes are reflected instantly.
For all those notes we haven’t written any code. When the user first fires up our app I want to go to a login screen, then after they log in redirect them to the app.
We need to install dependencies. Ionic comes with bower as a package manager. Bower is for installing client side libraries.
This installs these in
www/lib as specified in the
.bowerrc file. The
--save flag makes them persistent (added to
We have the client side dependencies, now load them into
www/index.html like a boss.
Script tags look like whoa:
Ionic uses angular ui-router
Cool. So in the app variable declaration we add ngCordova and firebase. Those modules come from the libraries we installed via bower. Then set up a login state to render a template when the user hits
/login route. For the mobile app obviously there is no url bar. When we test using
$ ionic serve you will see the urls, but not in device emulation mode. The default if no route matches is to go to the login template (that’s the last line of code).
Create the login template in www/templates/login.html. A whole bunch of stuff got generated using “sidemenu” in the beginning. It’s fine to delete code.
Then there’s the auth controller, this is where all the work really gets done:
This little gem is largely taken from @nraboy‘s blog post. There are definite ways to clean this up, but for now you can emulate, log in with facebook and then see the user’s credentials in the browse template:
For the record those
ion- html tags are angular.js directives. They make all the awesome ionic styling that we get for free.
For all this to work we have to create a facebook app. The variable
fb_app_id is my public app id. I also had to add those credentials to my firebase forge.
You get your credentials from developers.facebook.com/apps:
Make sure to go to
Settings > Advanced and add
http://localhost/callback to “Valid OAuth redirect URIs”:
Now you have authentication with facebook started for a mobile app. Build something awesome.
Here is the ionic-firebase-auth-starter code.
Questions? Comments? hit me up on twitter