Firebase: Google OAuth Infinite Redirects

I'm fairly new to Firebase. I'm trying to hook up Google OAuth to my Firebase instance.

I set everything up and got the client ID and client secrete. I added localhost to the whitelist in the Firebase dashboard. I then used the Firebase example below:

<html>
<head>
  <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script>

  var ref = new Firebase("https://<firebase url>.firebaseio.com");
  ref.authWithOAuthRedirect("google", function(error, authData) {
    if (error) {
      console.log("Login Failed!", error);
    } else {
      console.log("Authenticated successfully with payload:", authData);
    }
  });

</script>
</body>
</html>

When I open it, it asks permission to authenticate with Google. When I accept it, it just keeps doing redirects (infinity) and doesn't finish loading. Any insight on the problem will be helpful. Thanks.

Edit: I've noticed that: authWithOAuthPopup() method works but the redirect just stuck in an infinite redirect loop.

Solution

Any time you call ref.authWithOAuthRedirect(...), you're telling Firebase to initiate the redirect-based authentication flow and redirect the browser to the OAuth provider. Calling this method will always attempt to create a new session, even if one is already persisted in the browser.

To only attempt creation of a new login session if one doesn't already exist, try the following which makes use of the onAuth(...) event listener:

var ref = new Firebase("https://<firebase url>.firebaseio.com");
ref.onAuth(function(authData) {
  if (authData !== null) {
    console.log("Authenticated successfully with payload:", authData);
  } else {
    // Try to authenticate with Google via OAuth redirection
    ref.authWithOAuthRedirect("google", function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      }
    });
  }
})