raphaeljenni / firebaseui-angular Goto Github PK

If I load my angular2 app and click the sign in modal that contains <firebase-ui >, I'm able to login in with any of the providers I've configured. Once this happens, all subsequent attemps to display the login dialog display:
<firebase-ui ><div id="firebaseui-auth-container"></div></firebase-ui>
The container is empty, and only doing a hard refresh of the page will display them again, regardless of logged in state.

"@angular/animations": "6.0.0", "@angular/cdk": "^6.0.0", "@angular/common": "6.0.0", "@angular/compiler": "6.0.0", "@angular/core": "6.0.0", "@angular/forms": "6.0.0", "@angular/http": "6.0.0", "@angular/material": "^6.0.0", "@angular/platform-browser": "6.0.0", "@angular/platform-browser-dynamic": "6.0.0", "@angular/router": "6.0.0", "angularfire2": "^5.0.0-rc.7", "core-js": "^2.4.1", "firebase": "^4.13.1", "rxjs": "^6.1.0", "rxjs-compat": "^6.1.0", "zone.js": "^0.8.26", "@ngrx/core": "^1.2.0", "@ngrx/store": "^5.2.0", "firebaseui": "^3.0.0", "firebaseui-angular": "^2.6.3-1"

when loading the component I get exception:
ng:///AppModule/LoginComponent.ngfactory.js:17 ERROR TypeError: firebase.initializeApp is not a function
at new cm (webpack-internal:///./node_modules/firebaseui/dist/npm.js:341)
at new FirebaseuiAngularLibraryService (webpack-internal:///./node_modules/firebaseui-angular/fesm5/firebaseui-angular.js:33)
at FirebaseuiAngularLibraryService_Factory (webpack-internal:///./node_modules/firebaseui-angular/fesm5/firebaseui-angular.js:46)
at _callFactory (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:9564)
at createProviderInstance$1 (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:9530)
at resolveNgModuleDep (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:9508)
at NgModuleRef.get (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:10191)
at resolveDep (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:10556)
at createClass (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:10432)
at createDirectiveInstance (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:10313)

First, thank you VERY MUCH for putting this documentation together. It is greatly appreciated. As someone new to Angular2 and Firebase, I did get tripped up on something small in your How to use documentation. I wasn't quite able to put all the pieces together (again, I'm new) as to what you meant in the Add the firebaseui css to your imports: section.

It only took me about 10 minutes to realize that the sample code in that section was from the example project's .angular-cli.json file. Yet, I kept getting results like the following:

It took me about an hour to realize that I needed to add @import url("../node_modules/firebaseui/dist/firebaseui.css"); to my project's src/styles.css file. Success!

But that got me thinking. It seemed that the change to .angular-cli.json was redundant. So I tried returning .angular-cli.json back to its original form and, as expected, the buttons still rendered correctly.

Again, thanks for sharing this project and taking the time to document it so well.

tl dr: Angular-CLI section of How to use documentation was a red herring. Please replace that section with @import url("../node_modules/firebaseui/dist/firebaseui.css"); to example project's src/styles.css file.

How to configure requireDisplayName with firebaseUiAuthConfig?
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false
}
]

Thank you very mutch for FirebaseUI-Angular everything work like a charm.

Please where I can change change configuration for providers?

Like

• requireDisplayName
• scopes for facebook
• recaptha parameters
• redirect with success

Thank you for your answer.

Hi there. Got two warnings from firebaseui-angular (and firebaseui) :

[FirebaseUiAngular] signInSuccess callback is deprecated. Please use signInSuccessWithAuthResult callback instead. To remove this warning set disableSignInSuccessCallback on the FirebaseUiConfig Object.
[firebaseui] signInSuccess callback is deprecated. Please use signInSuccessWithAuthResult callback instead.

I only used the signInSuccessWithAuthResult in my template (but it's not documented (yet?)). After diging through the code, I saw that the firebaseUiAngular warning is emited independently of the use or not of either callback, which seems weird.
So well, I used disableSignInSuccessCallback=false but ... didn't understood all that.

Thanks

In AngularFire2 (version 5.0.0-rc.9), a new feature in auth is made available. AngularFire2 added user and idTokenResult Observables to AngularFireAuth. How do we use idTokenResult with FirebaseUI-Angular?

Hello
I've got this message in my console which leads to the firebaseui-angular.js file

Looks like there are some imports inside the firebaseui-angular module

So, I'm wondering, do you plan to fix this?
And thanks for the great module

This used to work fine but stopped working after updating dependencies.
Currently I'm investigating what causes the problem,
but here's what I get:
video here http://recordit.co/vMDm8Wj3Y8

The error (signInWithCredential failed: First argument "credential" must be a valid credential.) happens for both AccountChooser and OneTap CredentialHelpers.

My set up is pretty simple:

export const firebaseUiAuthConfig: FirebaseUIAuthConfig = {
  providers: [
    // googleCustomConfig,
    AuthProvider.Google,
    AuthProvider.Facebook,
    AuthProvider.Password,
    AuthProvider.Phone
  ],
  method: AuthMethods.Popup,
  credentialHelper: CredentialHelper.AccountChooser
};
....
FirebaseUIModule.forRoot(firebaseUiAuthConfig),

and dependencies:

"dependencies": {
    ...
    "@angular/common": "^5.2.6",
    "@angular/compiler": "^5.2.6",
    "@angular/core": "^5.2.6",
    ...
    "angularfire2": "^5.0.0-rc.6",
    "firebase": "^4.10.1",
    "firebaseui": "^2.6.1",
    "firebaseui-angular": "^2.6.1",
    ...
  },

Does anyone have something similar?

I confess I haven't used this module, but I based my own code off it, and the way firebaseui is imported likely results in importing firebase twice, which can cause serious issues if the firebase modules are two different versions.

Should not import * as firebaseui from 'firebaseui'

Instead follow procedure detailed here

When I navigate away from this component using firebase-ui to some other component, then come back then again click on some other component, this is the error I get.
Note: The error occurs while trying to navigate away again, any other component doesn't use firebase-ui element.

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../../shared/services/auth.service';
import { FirebaseUISignInSuccess } from 'firebaseui-angular';

@Component({
  selector: 'app-home',
  template: `
          <div class="page-content">
            <firebase-ui (signInSuccess)="successCallback($event)"></firebase-ui>
            <router-outlet *ngIf="isLoggedin()"></router-outlet>
          </div>
`,
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private authService: AuthService) {
  }

  ngOnInit(): void {
    console.log('homepage:user::' + this.authService.getCurrentUser());
  }

  successCallback(data: FirebaseUISignInSuccess) {
    console.log('data:' + data);
  }
}

Error Stacktrace:

core.js:1350 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at FirebaseUIComponent.ngOnDestroy (index.js:132)
    at callProviderLifecycles (core.js:12434)
    at callElementProvidersLifecycles (core.js:12399)
    at callLifecycleHooksChildrenFirst (core.js:12383)
    at destroyView (core.js:13727)
    at callViewAction (core.js:13878)
    at execComponentViewsAction (core.js:13790)
    at destroyView (core.js:13726)
    at callWithDebugContext (core.js:14740)
    at Object.debugDestroyView [as destroyView] (core.js:14291)
    at FirebaseUIComponent.ngOnDestroy (index.js:132)
    at callProviderLifecycles (core.js:12434)
    at callElementProvidersLifecycles (core.js:12399)
    at callLifecycleHooksChildrenFirst (core.js:12383)
    at destroyView (core.js:13727)
    at callViewAction (core.js:13878)
    at execComponentViewsAction (core.js:13790)
    at destroyView (core.js:13726)
    at callWithDebugContext (core.js:14740)
    at Object.debugDestroyView [as destroyView] (core.js:14291)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4620)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)

Probably this is a question/feature request [if unavailable]

I am building an e-commerce application and when an unauthorized user is about checkout any item purchased, I would like to authorize him with the phone number he entered [phone number is mandatory], with which I can also assure that he is a valid user.

Is it possible to invoke phone auth specifically on some action with the phone number prefilled?

Hello,
Recently I update dependencies, and afterwards getting error

depedency version

let me know, how to solve this.

In the FirebaseUI for Web - Auth, there is an option to specify the credentialHelper to use (https://github.com/firebase/firebaseui-web#credential-helper) in the options. This is option is missing in your library. Is there a temporary workaround?

Running the sample produces a firebaseui-angular has no exported member "authprovider" and "authproviderwithcustomconfig". It seems to be because of AngularFire Version 4. Any ideas on a fix?

In the docs it's written that the "method" option of the configuration is optional and that "AuthMethods.Popup" will be used is none is specified.
I tried using the package with minimal configuration (only "providers" array and only Password provider) and Angular complained about needing the "method" option.

If I set that option, it works just fine.

In the provided example:

successCallback(signInSuccessData: FirebaseUISignInSuccess) {
...
}

Where do I import FirebaseUISignInSuccess from?

We just upgraded from Angular 4 to 5. Sign in with Google, Facebook etc work in dev mode but when building for production with the --prod flag, the app crashes with the exception "Cannot read property 'GoogleAuthProvider' of undefined:"

If I build with --prod --aot=true --build-optimizer=false then no exception is generated

@RaphaelJenni for version 3.0.3 of https://github.com/RaphaelJenni/FirebaseUI-Angular/blob/master/projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.component.ts

did you see Line 68 of above image
in your /node_modules/firebaseui-angular in (see Line 155 of image below)?

I am currently using the latest version of firebaseui-angular 3.0.3

In summary, my version of node_modules/firebaseui-angular is not the same as Github code. May I know if PR code has been pushed to npm package manager?

I believe it has been pushed because you increased the version from 3.0.2 to 3.0.3. However, I understand that version 3.0.2 and version 3.0.3 are exactly the same code after I installed the library. I am wondering could there be a chance when upgrading to 3.0.3, but the Pull Request of #59 did not get push into npm package manager.

I tried many approaches to clean up and verify the package version. i.e. npm cache clean --force.

@RaphaelJenni could you help me verify this? Thank you very much.

I'm getting this error.
Angular fire version 4.0.0-rc.0

Going through the code in the .../node_modules/firebaseUI-Angular , I found out that the code here at the repository is different. So I tried to update the packages with npm update.

Even Reinstalling the package with npm install firebaseUI-Angular --save doesn't download the new version of the package

Using custom modules that are being lazy loaded and that import FirebaseUIModule results in Error: An AuthUI instance already exists for the key "[DEFAULT]" Error: An AuthUI instance already exists for the key "[DEFAULT] error.

Consider this scenario

app.module.ts

import { environment }    from '../environments/environment';
import { AppComponent }   from './app.component';

import { AngularFireModule }      from 'angularfire2';
import { AngularFireAuthModule }  from 'angularfire2/auth';
import { FirebaseUIModule }       from 'firebaseui-angular';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    FirebaseUIModule.forRoot(environment.firebaseUiConfig),    
    AppRouting
  ],
  declarations: [
    AppComponent
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.routing.ts

import { NgModule }             from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { path: 'login',        loadChildren: 'app/login/login.module#LoginModule'  },
  { path: 'register',   loadChildren: 'app/register/register.module#RegisterModule' }

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ],
})
export class AppRouting { }

Now the login and register feature. Each having their own module.

login.module.ts

import { environment }    from '../../environments/environment';
import { NgModule }     from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule }  from '@angular/forms';

import { FirebaseUIModule } from 'firebaseui-angular';

import { LoginComponent } from './login.component';
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        FirebaseUIModule
    ],
    declarations: [
        LoginComponent
     ],
    exports: [ LoginComponent ],
})
export class LoginModule { }

register.module.ts

import { environment }   from '../../environments/environment';
import { NgModule }     from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule }  from '@angular/forms';

import { FirebaseUIModule } from 'firebaseui-angular';

import { RegisterComponent } from './register.component';
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        FirebaseUIModule
    ],
    declarations: [
         RegisterComponent
     ],
    exports: [ RegisterComponent ],
})
export class RegisterModule { }

When the app redirects to either /login or /register for the first time Firebase UI is presented without any problem. If the first visited path is visited next time (without visiting the other one) UI is also presented without any problem (e.g. user visits /login consecutively several times). On the other hand if the second visited path is not same as the first visited path (e.g. user visits first /login and then visits /register) the error is thrown.

Full error message

ERROR Error: Uncaught (in promise): Error: An AuthUI instance already exists for the key "[DEFAULT]"
Error: An AuthUI instance already exists for the key "[DEFAULT]"
    at new Dl (npm.js:334)
    at new FirebaseUIService (index.js:15)
    at _createClass (core.es5.js:9520)
    at _createProviderInstance$1 (core.es5.js:9492)
    at resolveNgModuleDep (core.es5.js:9477)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10569)
    at resolveDep (core.es5.js:11072)
    at createClass (core.es5.js:10931)
    at createDirectiveInstance (core.es5.js:10756)
    at createViewNodes (core.es5.js:12197)
    at new Dl (npm.js:334)
    at new FirebaseUIService (index.js:15)
    at _createClass (core.es5.js:9520)
    at _createProviderInstance$1 (core.es5.js:9492)
    at resolveNgModuleDep (core.es5.js:9477)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10569)
    at resolveDep (core.es5.js:11072)
    at createClass (core.es5.js:10931)
    at createDirectiveInstance (core.es5.js:10756)
    at createViewNodes (core.es5.js:12197)
    at resolvePromise (zone.js:795)
    at resolvePromise (zone.js:766)
    at zone.js:844
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

The error might be caused by the fact that every time FirebaseUIModule is imported then also firebaseui.service is loaded.

• When a module is loaded normally it is registered in the root app injector and a service that module is also loading is injected. Now Angular can find the given service in the app root injector and provides a singleton for the whole app. No new service provider instances are created.

• When a module is lazy-loaded a child injector is created and the given service is registered with that child injector.
  Now, when lazy component is created it must inject the given service. The given service provider is in child injector of that lazily-loaded module. So a new instance of the service is created. This happens for each lazily-loaded module. Here it causes to create multiple AuthUI instances.

Full explanation is given here - https://angular.io/guide/ngmodule-faq#q-why-bad

The solution might be to want from developer to import firebaseui.service in the app.module and put it in providers so the service is available globally and not load firebaseui.service in firebaseui.module?

I checked out version 2.6.2 and confirmed that the sample ran as expected. I then updated the sample project to use firebase 5.0.2, angualrfire 5.0.0-rc.7 and firebaseui v3.0.0.

I see this warning:

[WDS] Warnings while compiling.
index.js:147
./node_modules/firebaseui-angular/index.js
index.js:153
87:25-31 "export 'auth' (imported as 'auth$2') was not found in 'firebase/app'
@ ./node_modules/firebaseui-angular/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts
./node_modules/firebaseui-angular/index.js

I then hit this exception:

TypeError: Cannot read property 'GoogleAuthProvider' of undefined
index.js:87
at eval (/Users/keithcoughtrey/NativeMobile/Trove/FirebaseUI-Angular/sample/node_modules/firebaseui-angular/index.js:87:1)
at Object../node_modules/firebaseui-angular/index.js (http://localhost:4200/vendor.bundle.js:204:1)

Hi Raphael,
Thank you for your library.
One question: ¿Is there any way to know when the login action is in progress? I'd like to show a custom spinner...
I see that they add/remove an element with the class ".firebaseui-callback-indicator-container" while it's login but I can't find the mechanism.
Thanks!

This is a question/feature request [if unavailable]

Hello,
Is there a way to change the UI's language according to FirebaseUi languages ?

Thank you.

We need this to retrieve the facebook access token.
credential.accessToken has that token when credential.providerId == 'facebook.com'

Latest AngularFire2 release is 4.0.0-rc.0
https://www.npmjs.com/package/angularfire2

I'm getting this error when I try to build with version 2.6.0:

ERROR in ./node_modules/firebaseui-angular/index.js
Module not found: Error: Can't resolve '@firebase/auth-types' in 'C:\Users\Bryan\Documents\GitHub\woodstock\node_modules\firebaseui-angular'

I installed @firebase/auth-types in my main ./node_modules folder but it still doesn't work. Should it be included in the peer dependencies?

Hello,
Firstly, thanks for the great work!

This is a duplicate of #4

I am running the code in /sample and this is what I see...
firebaseui-angular"' has no exported member 'AuthProvider'.
firebaseui-angular"' has no exported member 'AuthProviderWithCustomConfig'

This is my configuration...
[email protected]
[email protected]
[email protected]
[email protected]

As you mentioned, it has something to do with this: https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md

Does your /sample code already support the latest angularfire2 version or do we need to modify your code to make it work as per the link above?

Thanks again!

With angular 6 comes the tooling for creating libraries. Rewrite this library to use those new features as soon as Ng@6 is released.

The deeplink actual fires before the login finishes its loading state. Need to be able to release to the next view.

    const authObserver = afAuth.authState.subscribe(user => {
      if (!user) {
        this.rootPage = WelcomePage;
      } else {
        if (this.nav.getActive().name) {
          this.nav.setRoot(this.nav.getActive().name);
        }
        else {
          this.rootPage = 'MyStuffPage';
        }
      }
    });

if I remove

        if (this.nav.getActive().name) {
          this.nav.setRoot(this.nav.getActive().name);
        }

It will just stay on the same login page, because the view has already loaded. I need a promise or something to continue forward.

On lines of #14
I need to reset my user object in browser, signOutSuccess callback seems to be the best non-hackish approach but we dont have it yet.

My OneTap is not working in my localhost environment. Is yours working?
It could have been my setting misconfigured.
My only configuration is

import {
  AuthMethods, AuthProvider, CredentialHelper,
  FirebaseUIAuthConfig
} from 'firebaseui-angular';

export const FirebaseUiAuthConfig: FirebaseUIAuthConfig = {
  providers: [
    AuthProvider.Google,
    AuthProvider.Password
  ],
  method: AuthMethods.Popup,
  credentialHelper: CredentialHelper.OneTap // this is the only configuration I set from None to OneTap
};

*note: In localhost environment OneTap should work without need for approval.

Trying to run the current sample code I see:
firebaseui-angular"' has no exported member 'CredentialHelper'

I presume this is caused by the dependency "firebaseui-angular": "0.4.2" .

Experimenting with the dependencies I found that the following combination works:

"angularfire2": "^5.0.0-rc.1",
"core-js": "^2.4.1",
"firebase": "^4.5.0",
"firebaseui": "^2.2.1",
"firebaseui-angular": "0.4.5",

Hi, any idea on how to make this localised? I would like to show the contents in Czech language preferably. I am aware that there is an localised widget for FirebaseUI for inline insertion through <script> tag, however, that does not seem to apply for NPM modules or Angular CLI. I guess I could clone and rebuild the original FirebaseUI with localised data and somehow make FirebaseUI-Angular use it, but I am not really sure how exactly and I am afraid that it will make later updates on the package bit more messy. Any suggestions please?

If I change the sample app to use AuthMethods.Redirect and CredentialHelper.OneTap, there is an uncaught exception after signing in. I tried logging in with both Google and Facebook providers, but they both have the exception.

Hello,

Does this module work with Angular 4 ?

I have followed all the steps here, and the module does not appear on the login page, i have no error in building nor on the page with the console

Any idea ?

Thanks in advance

Thanks for your work!

The only question I have if it is possible to get the localized version of the FirebaseUI?

I installed this package on a new Angular6 project, and followed the installation instructions. My app.module.ts looks like this:

    ...
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig)
],

However I am getting this exception:

ERROR Error: Uncaught (in promise): TypeError: firebase.initializeApp is not a function
TypeError: firebase.initializeApp is not a function
    at new cm (npm.js:340)
    at new FirebaseuiAngularLibraryService (firebaseui-angular.js:16)
    at FirebaseuiAngularLibraryService_Factory (firebaseui-angular.js:29)
    at _callFactory (core.js:9292)
    at _createProviderInstance$1 (core.js:9258)
    at resolveNgModuleDep (core.js:9236)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)
    at resolveDep (core.js:10284)
    at createClass (core.js:10160)
    at createDirectiveInstance (core.js:10041)
    at new cm (npm.js:340)
    at new FirebaseuiAngularLibraryService (firebaseui-angular.js:16)
    at FirebaseuiAngularLibraryService_Factory (firebaseui-angular.js:29)
    at _callFactory (core.js:9292)
    at _createProviderInstance$1 (core.js:9258)
    at resolveNgModuleDep (core.js:9236)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)
    at resolveDep (core.js:10284)
    at createClass (core.js:10160)
    at createDirectiveInstance (core.js:10041)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

Upgrade to "angularfire2": "4.0.0-rc.1" and "firebaseui": "2.1.1" not working with "firebaseui-angular": "0.3.0".

Current working but outdated versioning:

"angularfire2": "4.0.0-rc.0",
"firebaseui": "2.0.0",
"firebaseui-angular": "0.3.0"

Look forward to upgrade to angularfire2 rc1 and firebaseui 2.1.1.

Hi @RaphaelJenni,
First of all, thanks a lot for your package and it saved me lot of time to develop my own.

I was struggling to troubleshooting an error occurred in this package after upgrading other packages, similar to ERROR in ./node_modules/rxjs/_esm5/observable/BoundNodeCallbackObservable.js

After commenting out the line import 'rxjs/Rx' from file index.js, the issue disappears.

There are also some recommendations on how to import rxjs/Rx from the thread to avoid such issues.

thanks again and Best regards

-John

How to provide upgrading of anonymous users? It is a feature available in Firebase Web UI. https://github.com/firebase/firebaseui-web#upgrading-anonymous-users

Warning produced under latest firebase/angular:

When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

I believe the issue is here: https://github.com/RaphaelJenni/FirebaseUI-Angular/blob/master/projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.component.ts#L9

And I think the fix is changing that line to simply: import * as firebase from 'firebase/app'; but then you'll also need to include the auth module: import 'firebase/auth';.

I'm not sure how to best test the change, else I would PR myself.

Thanks.

I am trying to get a fresh project working after the v3 release though getting the below errors, should I lock down the versions to something stable?

Error after ng serve

ERROR in node_modules/angularfire2/auth/auth.d.ts(4,10): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'User'. node_modules/angularfire2/auth/auth.d.ts(4,16): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'auth'. node_modules/angularfire2/firebase.app.module.d.ts(2,10): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'app'. node_modules/angularfire2/firebase.app.module.d.ts(2,15): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'auth'. node_modules/angularfire2/firebase.app.module.d.ts(2,21): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'database'. node_modules/angularfire2/firebase.app.module.d.ts(2,31): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'firestore'. node_modules/angularfire2/firebase.app.module.d.ts(2,42): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'functions'. node_modules/angularfire2/firebase.app.module.d.ts(2,53): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'messaging'. node_modules/angularfire2/firebase.app.module.d.ts(2,64): error TS2305: Module '"../node_modules/firebase/app/index"' has no exported member 'storage'.

package.json extract

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angularfire2": "^5.0.0-rc.10",
    "core-js": "^2.4.1",
    "firebase": "^5.0.4",
    "firebaseui": "^3.0.0",
    "firebaseui-angular": "^3.0.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

Integrates one-tap sign-up with FirebaseUI-web: https://developers.google.com/identity/one-tap/web/overview

Available with v2.5 of FirebaseUI-web https://github.com/firebase/firebaseui-web/releases

Hello, I started integrating FirebaseUI-Angular into my ionic 3/angular 4 app. It was very straightforward, although the formatting is not working properly as you can see. I link to the .css file from within index.html, and that should work.

Any idea what might be going wrong? This is pretty much a cut and paste from the sample program.

I get the following typescript error:
Namespace ''*'' has no exported member 'auth'.
on line 4 of firebaseui.service.d.ts:

export declare class FirebaseUIService {
    firebaseUiInstance: firebaseui.auth.AuthUI;
    constructor(angularFireAuth: AngularFireAuth);

i have the following package versions:

[email protected]
[email protected]
[email protected]
[email protected]
@angular/<ALL_REQUIRED>@4.1.1

maybe it is also important to mention that im trying this in a ionic project.

After entering 6 digit number --> click on Continue button. following error message in the console log.

IN FIREFOX,

ERROR TypeError: a is undefined
core.js:1448
Stack trace:
Ca@webpack-internal:///../../../../firebaseui/dist/npm.js:83:211
Fl@webpack-internal:///../../../../firebaseui/dist/npm.js:324:257
G.phoneSignInFinish/g<@webpack-internal:///../../../../firebaseui/dist/npm.js:325:436
ak/<@webpack-internal:///../../../../firebaseui/dist/npm.js:282:164
Wi/<@webpack-internal:///../../../../firebaseui/dist/npm.js:239:404
oe@webpack-internal:///../../../../firebaseui/dist/npm.js:141:339

See this issue which is affecting FirebaseUI-Angular:
firebase/firebase-js-sdk#388

I.e. ngrx has forRoot & forFeature https://stackoverflow.com/questions/46348412/what-is-the-difference-between-storemodule-forroot-and-storemodule-forfeature

For FirebaseUI-Angular by having .forRoot that initialises in the AppModule, we could also have an instance of .forFeature that is being used for lazy loaded feature modules. So this would be possible to also use
<firebase-ui></firebase-ui>
in other lazy loaded modules.

webpack-internal:///../../../../firebaseui-angular/index.js:103 Uncaught TypeError: Cannot read property 'GoogleAuthProvider' of undefined
at eval (webpack-internal:///../../../../firebaseui-angular/index.js:103)
at Object.../../../../firebaseui-angular/index.js (vendor.bundle.js:3279)
at webpack_require (inline.bundle.js:55)
at eval (webpack-internal:///../../../../../src/app/app.module.ts:12)
at Object.../../../../../src/app/app.module.ts (main.bundle.js:44)
at webpack_require (inline.bundle.js:55)
at eval (webpack-internal:///../../../../../src/app/index.ts:3)
at Object.../../../../../src/app/index.ts (main.bundle.js:304)
at webpack_require (inline.bundle.js:55)
at eval (webpack-internal:///../../../../../src/main.ts:6)

dependencies": {
"@angular/animations": "^5.2.0",
"@angular/cdk": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/platform-server": "^5.2.0",
"@angular/router": "^5.2.0",
"@firebase/app": "^0.1.6",
"angularfire2": "^5.0.0-rc.6.0",
"firebase": "^4.13.1",
"firebaseui": "^2.7.0",
"firebaseui-angular": "^2.6.2",
....
},