How can I correctly configure FirebaseUI into my Angular project?

user_1833945 0
Viewed 1011

I am working on an Angular application and I have the following doubt. This application uses the FirebaseUI library to handle the Firebase authentication. In the past, I have used it configuring it directly into my login component. This time I am following the official guide configuring it directly into the app.module.ts file (what solution is better?)

So into my app.module.ts file now I have something like this:

import {
    BrowserModule
} from '@angular/platform-browser';
import {
    NgModule
} from '@angular/core';
import {
    FormsModule
} from '@angular/forms';
import {
    AppComponent
} from './app.component';
import {
    firebase,
    firebaseui,
    FirebaseUIModule
} from 'firebaseui-angular';
import {
    environment
} from '../environments/environment';
import {
    AppRoutingModule
} from './app-routing.module';
import {
    AngularFireModule
} from '@angular/fire';
import {
    AngularFireAuth,
    AngularFireAuthModule
} from '@angular/fire/auth';
import {
    BrowserAnimationsModule
} from '@angular/platform-browser/animations';


import {
    HomeComponent
} from './home/home.component';
import {
    LoginComponent
} from './login/login.component';
import {
    SidebarComponent
} from './sidebar/sidebar.component';

import {
    ButtonModule
} from 'primeng/button';
import {
    SidebarModule
} from 'primeng/sidebar';


const firebaseUiAuthConfig: firebaseui.auth.Config = {
    signInFlow: 'popup',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID

    ],
    //tosUrl: '<your-tos-link>',
    //privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
    credentialHelper: firebaseui.auth.CredentialHelper.NONE
};


@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        SidebarComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        ButtonModule,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFireAuthModule,
        FirebaseUIModule.forRoot(firebaseUiAuthConfig),

        SidebarModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

It works fine. My doubt is related to how I can set a custom name for the tag related to the FirebaseUI component.

As said into another project I configured it directly into my loging component, something like this:

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

    ui: firebaseui.auth.AuthUI;

    constructor(private afAuth: AngularFireAuth,
        private router: Router,
        private ngZone: NgZone) {

    }

    ngOnInit() {

        const uiConfig = {
            signInOptions: [
                firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                firebase.auth.EmailAuthProvider.PROVIDER_ID
            ],
            callbacks: {

                signInSuccessWithAuthResult: this
                    .onLoginSuccessful
                    .bind(this)
            }

        };

        this.ui = new firebaseui.auth.AuthUI(this.afAuth.auth);

        this.ui.start('#firebaseui-auth-container', uiConfig);


    }

    ngOnDestroy() {
        this.ui.delete();
    }

    onLoginSuccessful(result) {

        console.log("Firebase UI result:", result);

        //this.ngZone.run(() => this.router.navigateByUrl('/work-shift-allocator'));
        this.ngZone.run(() => this.router.navigate(['/work-shift-allocator']));

        //this.router.navigate(['/heroes', { id: itemId }]);

    }
}

As you can see in this last snippet (related to another project) I am configuring it into my component declaring the ** ui: firebaseui.auth.AuthUI;** variable and then set on it the value of the tag by:

this.ui.start('#firebaseui-auth-container', uiConfig);

I want to know if and how I can do the same thing also in this project where I declared the FirebaseUI configuration directly into the app.module.ts file.

firebaseui angular
1 Answers

You are asking if configuring your FirebaseUI directly in app.module.ts is the correct approach as per official doc.

The answer is no - this approach is actually not mentioned in the official Google/Firebase doc (available here and here), not even as an option.

What you are using in your current code is a non-official Angular wrapper around the (official) FirebaseUI API.

Namely, FirebaseUI-Angular, a non-official Angular wrapper, available on Github here.

There is obviously nothing wrong implementing one of the many helpful Angular wrappers available out there, like FirebaseUI-Angular. In their doc, they indeed instruct to configure it mostly from within your app.module.ts but this is non-standard.

Just my opinion here, but I think implementing FirebaseUI directly from the official package should be a better choice, expect if there is something really specific you need from other alternative packages.

I do use the official FirebaseUI in several of my Angular apps and it plays along smoothly with Angular. No major adjustment/tweak required. I do not see the need for a "less supported" wrapper.

So, in short, I believe it is better to keep configuring it directly into your login component - as you used to do, and as per the official instructions from the Firebase team.

user_137148700
Related