Popup shows up and then it closes instantly

Question

I'm trying follow the guide from angularfire2 docs on github, but when I try to open the popup window for google login it just closes instantly.

I've tried with different browsers, but I can't figure out what's going on.

Here's the HTML of my form component:

<div class="container " >
<h2 class="date">Wallet manager</h2>
<h1>SUBBO</h1>

<form>
  <div class="form-group">
    <label class="date" for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label class="date" for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" (click)="login()" style="margin-top:20px" class="btn btn-outline-warning">Login</button>
  <button type="submit" (click)="logout()" style="margin-top:20px" class="btn btn-outline-warning">Logout</button>
</form>

</div>

and here is the code:

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {

  constructor(public afAuth: AngularFireAuth) {
  }
  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }

  ngOnInit() {
  }

}

With the login button I call Login() and I was expecting the window to popup and stay there, but it close immediately.

I've uploaded the project to Firebase and it give's me the same problem: https://subbo-wallet-manager.firebaseapp.com/

Answer 1

I had this same problem using Firebase Authentication. The solution for me was to go into the Firebase Control Panel, select my project, select authentication and under "Sign-in method" I had to add my domain to the authorized domain list. Once I did that, and reloaded the page, it worked.