How to implement the google auth login in angular 4

Question

I am new to angular, i am stuck with implementing the google login. I have created a button which on click it is not redirecting me to google login page i am getting error. I don't know what is causing this error. So I'm sharing my code:

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


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent  {
  constructor(private afAuth: AngularFireAuth ){}

  loginbtn() {
    return this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }

}

module:

import { AngularFireAuth} from 'angularfire2/auth';
providers: [AngularFireAuth]

error :

core.js:1449 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
    NullInjectorError: No provider for AngularFireAuth!
Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
    NullInjectorError: No provider for AngularFireAuth!
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

You need to add the `AngularFireAuth` into your modules `providers` array — user184994, Aug 08 '18 at 17:07
Thanks for the reply, as per your suggestion i have added this dependency still it's not working. — Umesh C, Aug 08 '18 at 17:11
Can you edit your question and add the code for your module then please? — user184994, Aug 08 '18 at 17:12
What exactly is AngularFireAuth? Is it a class? Is it an instance? Depending on this, you will need to change your provider statement to reflect the type of provider that you are adding. For example, if AngularFireAuth is a class that requires instancing, you would provide it like this `{ provide: 'AngularFireAuth', useClass: AngularFireAuth }`. If you are dealing with an instance or an import that does not require instancing, your do `{ provide: 'AngularFireAuth', useValue: AngularFireAuth }`. In your component, both cases, injecting would look like `@Inject('AngularFireAuth') private afAuth` — alexc, Aug 08 '18 at 17:23
Possible duplicate of [No provider for AngularFireDatabase, AngularFireAuth](https://stackoverflow.com/questions/43772474/no-provider-for-angularfiredatabase-angularfireauth) — user184994, Aug 08 '18 at 17:53

score 0 · Answer 1 · answered Aug 09 '18 at 05:49

0

The module setup is wrong. Your providing for AngularFireAuth (providers: [AngularFireAuth]). Remove this and add AngularFireAuthModule to your imports:

...
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';
...

@NgModule({
    imports: [
        ...
        // Firebase
        AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
        AngularFirestoreModule, // imports firebase/firestore, only needed for database features
        AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
        ...
    ],
    providers: [
        // remove AngularFireAuth
    ],
    ...
})

Check the Setup Guide for more information.

answered Aug 09 '18 at 05:49

Tim Martens

1,464
9
18

Hi Tim, i am getting compilation error with import { AngularFirestoreModule } from 'angularfire2/firestore'; – Umesh C Aug 09 '18 at 15:20
@UmeshC can you add version numbers of angularfire2, firebase and also the error you're getting – Tim Martens Aug 10 '18 at 05:02
Please check the version numbers , "angularfire2": "^4.0.0-rc.1", "firebase": "^4.2.0", and the error : [ts] Cannot find module 'angularfire2/firestore'. – Umesh C Aug 10 '18 at 16:31

How to implement the google auth login in angular 4

1 Answers1