I am trying to authenticate users of my Firebase application (Angularfire) using Facebook login.
Everything works as expected when I authenticate in a pop-up window, but supports as many browsers as possible (Chrome on iOS does not support pop-ups, for example) I want to return to authentication using redirection ( $authWithOAuthRedirect ).
I confirmed that my Facebook settings are correct (for example, my application identifier and secret), but when I redirect back to my application after authenticating with Facebook redirect, $onAuth works, but I don't have my facebook authData .
Instead, I have anonymous authData . For a bit of background; all users authenticate anonymously unless otherwise authenticated (e.g. Facebook).
I can’t understand why this would be - now the user must be authenticated using Facebook and have Facebook authData .
Except for some of my codes below:
It starts when the user presses the login button.
function logIn () { firebaseAuth .$authWithOAuthRedirect('facebook', function (error) { if (error) { console.log(error); } }); }
$onAuth (inside my Angular run application)
function run ($rootScope, firebaseAuth, sessionStore) { $rootScope .$on('$routeChangeError', function (event, next, prev, error) { if (error === 'AUTH_REQUIRED') { console.log(error); } }); $rootScope .$on('$routeChangeSuccess', function (event, current, prev) { $rootScope.title = current.$$route.title; }); firebaseAuth .$onAuth(onAuth); function onAuth (authData) { console.log(authData); } }
Router for anonymous user authentication
function sessionState ($q, firebaseAuth) { var deferred = $q.defer(); firebaseAuth .$requireAuth() .then(deferred.resolve, guest); return deferred.promise; function guest () { firebaseAuth .$authAnonymously() .then(deferred.resolve, rejected); } function rejected () { deferred.reject('AUTH_REQUIRED'); } }
The router ( sessionState ) checks if the user has already been verified, and if not, tries to authenticate them anonymously.
After the authentication is redirected to Facebook, the user will be authenticated and, therefore, does not need anonymous authentication.
But it seems that they are? Since $onAuth writes authData to the console and anonymously.
Any help with this would be much appreciated! I am sure this has something to do with my route resolver, as pop-up authentication works fine (route already allowed).
EDIT: I tried to completely remove my route resolver if this caused a problem, but it didn't make any difference. The user was simply "not authenticated" instead of being authenticated using Facebook (after $authWithOAuthRedirect ) or anonymously.
UPDATE: I tried authentication with Twitter and the redirect transport, and I ran into the same problem. I also tried using port 80 instead of port 3000 so that my application is served locally, but without joy.
UPDATE:. When I turn off html5Mode in my application - and the routes now start with # - $authWithOAuthRedirect , it works fine. From this, we can only assume that $authWithOAuthRedirect does not support AngularJS html5Mode . Can someone confirm that this is a problem, or do I need to change my code to support html5Mode and authWithOAuthRedirect ?
REPO EXAMPLE The following is an example repo showing the problem: https://github.com/jonathonoates/myapp
Look at the dist directory - you can download it and run the application to reproduce the problem. The scripts/main.js uses the JS application; I added a few comments, but this is pretty clear.
To reproduce the problem: click the Facebook Login button and you will be redirected to Facebook for authentication. FB will redirect you back to the application, but here is the problem: you will not be authenticated, and the returned authData will be empty - you will see this on the console
UPDATE:. When I add hashPrefix to html5Mode for example.
$locationProvider .html5Mode(true) .hashPrefix('!');
The app works as I expected - Facebook authentication and transport redirection.
A couple of insignificant:
#%3F added to URL and available / displayed in browser history.- This would rewrite the URLs with
#! in browsers that do not support History.pushState ( html5Mode ), and some less advanced search engines may search for HTML snippets due to "hashbang".
I will look at how to redirect a URL, redirecting back from Facebook instead of using hashPrefix . The url has __firebase_request_key , which can be significant, for example.
http://localhost:3000/