Firebase login with AngularDart in Chrome browser - google-chrome

Question

I am testing a web app of firebase login with angular Dart in Chrome browser at localhost, but while clicking on the sign-in the popup for login gets disappeared within 1 sec and doesn't result with successful login. While testing it on Chromium it's working.
Can anyone tell what should I do to fix this?
firebase_service.dart
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:firebase/firebase.dart' as fb;
#Injectable()
class FirebaseService {
fb.User user;
fb.Auth _fbAuth;
fb.GoogleAuthProvider _fbGoogleAuthProvider;
FirebaseService() {
fb.initializeApp(
apiKey: "AIzaSyBOShlCgUeqTL99n32bjWdNlkH1RPk9Xx4",
authDomain: "my-app.firebaseapp.com",
databaseURL: "https://my-app.firebaseio.com",
storageBucket: "my-app.appspot.com",
);
_fbGoogleAuthProvider = new fb.GoogleAuthProvider();
_fbAuth = fb.auth();
_fbAuth.onAuthStateChanged.listen(_authChanged);
}
void _authChanged(fb.User event) {
user = event;
}
Future signIn() async {
try {
await _fbAuth.signInWithPopup(_fbGoogleAuthProvider);
}
catch (error) {
print("$runtimeType::login() -- $error");
}
}
void signOut() {
_fbAuth.signOut();
}
}
app_component.html
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">{{appTitle}}</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<material-button class="material-drawer-button" icon
materialTooltip="Notifications"
(trigger)="">
<material-icon icon="notifications"></material-icon>
</material-button>
<div id="popup-sign-out" class="popup-user" *ngIf="fbService.user != null">
<material-button class="material-drawer-button" icon
popupSource
#source="popupSource"
materialTooltip="More options"
(trigger)="basicPopupVisible = !basicPopupVisible">
<material-icon icon="more_vert"></material-icon>
</material-button>
<material-popup defaultPopupSizeProvider
enforceSpaceConstraints
[source]="source"
[(visible)]="basicPopupVisible">
<div header class="custom-header">
<img id="popup-user-image" [src]="fbService.user?.photoURL">
<div class="user-detail">
<div id="user-name">{{fbService.user?.displayName}}</div>
<div id="email">{{fbService.user?.email}}</div>
</div>
</div>
<div group class="custom-popup-body">
<material-list class="popup-list" size="3">
<div group>
<material-list-item class="sign-out-button"
*ngIf="fbService.user != null"
(trigger)="fbService.signOut()">
<material-icon icon="exit_to_app" [style.color]="iconColor"
class="material-list-item-primary" aria-hidden="true">
</material-icon>
Sign out
</material-list-item>
</div>
</material-list>
</div>
</material-popup>
</div>
</nav>
<nav class="material-navigation">
<div id="sign-in" class="user" *ngIf="fbService.user == null">
<material-button raised class="sign-in-button" (trigger)="fbService.signIn()">
<img class="google-icon" src="g-logo.png"/>
Sign In
</material-button>
</div>
<div id="sign-out" class="user" *ngIf="fbService.user != null">
<img id="header-user-image" [src]="fbService.user?.photoURL">
</div>
</nav>
</div>
</header>
app_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:yns_app/services/firebase_service.dart';
#Component(
selector: 'my-app',
styleUrls: const [
'app_component.css',
'package:angular_components/src/components/app_layout/layout.scss.css',
],
templateUrl: 'app_component.html',
directives: const [
materialDirectives,
DeferredContentDirective,
MaterialButtonComponent,
MaterialIconComponent,
MaterialPersistentDrawerDirective,
MaterialToggleComponent,
MaterialListComponent,
MaterialListItemComponent,
ClickableTooltipTargetDirective,
DarkThemeDirective,
MaterialIconTooltipComponent,
MaterialInkTooltipComponent,
MaterialPaperTooltipComponent,
MaterialPopupComponent,
MaterialTooltipDirective,
MaterialTooltipTargetDirective,
MaterialTooltipSourceDirective,
NgIf,
Search,
NameGenerator,
],
providers: const [
materialProviders,
popupBindings,
DefaultPopupSizeProvider,
],
)
class AppComponent {
final FirebaseService fbService;
bool basicPopupVisible = false;
bool end = false;
String get tooltipMsg => 'All the best messages appear in tooltips.';
String get longString => 'Learn more about web development with AngularDart '
'here. You will find tutorials to get you started.';
AppComponent(FirebaseService this.fbService);
}
#Injectable()
PopupSizeProvider createPopupSizeProvider() {
return const PercentagePopupSizeProvider();
}
#Directive(selector: '[defaultPopupSizeProvider]', providers: const [
const Provider(PopupSizeProvider, useFactory: createPopupSizeProvider)
])
class DefaultPopupSizeProvider {}

Answer 1

connect the domain or the sub-domain to the hosted project, under the Hosting section.