Steps for integrating Google authentication login into Angular 4

Having recently started working with Angular, I am facing an issue while trying to implement Google login. Whenever I click on the button created for the purpose, it does not redirect me to the Google login page and instead shows an error. I am unsure about what is causing this error, so here is 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 Message :

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)
    ...
angulartypescriptfirebaseangularfire2basic-authentication

Answer №1

The configuration of the module is incorrect. You have provided AngularFireAuth in the providers array for AngularFireAuth. Instead, 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 required for all functionalities
        AngularFirestoreModule, // imports firebase/firestore needed for database features
        AngularFireAuthModule, // imports firebase/auth necessary for authentication features,
        ...
    ],
    providers: [
        // leave AngularFireAuth empty
    ],
    ...
})

Refer to the Setup Guide for further details.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to retrieve specific value for the current user

I am attempting to retrieve the channel_id value from Firebase for the currently logged-in user. The database image is provided below: https://i.sstatic.net/LdxDz.png The following code snippet is returning a null value: FirebaseDatabase database = ...

javaandroidfirebasefirebase-realtime-database

Steer clear of duplicating template literal type entries when dealing with optional routes

My code includes a type called ExtractParams that extracts parameters from a URL string: type ExtractParams<Path extends string> = Path extends `${infer Start}(${infer Rest})` ? ExtractParams<Start> & Partial<ExtractParams<Rest>& ...

typescript

Effortlessly apply mapping, filtering, reducing, and more in JavaScript

Array#map and Array#filter both create a new array, effectively iterating over the original array each time. In languages like rust, python, java, c#, etc., such expression chains only iterate once, making them more efficient in certain cases. While this ...

javascripttypescript

Using a decorator with an abstract method

Discussing a specific class: export abstract class CanDeactivateComponent { abstract canLeavePage(): boolean; abstract onPageLeave(): void; @someDecorator abstract canDeactivateBeforeUnload(): boolean; } An error occurred stating that A decorat ...

typescript

Is there an array containing unique DateTime strings?

I am dealing with an Array<object> containing n objects of a specific type. { name: 'random', startDate: '2017-11-10 09:00', endDate: '2017-11-23 11:00' } My goal is to filter this array before rendering the resu ...

javascripttypescript

Implementing a Dynamic Component within ngx-datatable's row-detail feature

I'm currently working on a project where I need to implement a reusable datatable using ngx-datatable. One of the requirements is to have dynamic components rendered inside the row details. The way it's set up is that the parent module passes a c ...

angularngx-datatable

What is the best way to send two separate properties to the selector function?

My selector relies on another one, requiring the userId to function properly. Now, I want to enhance the selector to also accept a property named "userFriend". However, there seems to be an issue with passing this new parameter, as it only recognizes the ...

angulartypescriptngrx

Angular is throwing an error about an undefined JSON object, even though I am able to access it

I have searched extensively for a solution to my error, but I couldn't find anything that matches exactly. I have tried solutions for similar errors, but they have not worked either. The JSON data is structured like this: [ { "somedata": "value ...

angulartypescript

Tips for transmitting static information from route configuration to components

I am facing an issue with passing static data from a route to a component in Angular. Despite trying to pass the data in the route configuration, I keep receiving empty data when subscribing to it from the ActivatedRoute. Below is the code snippet that I h ...

angularangular2-routing

Are Typescript generics that use "extends object" unnecessary? How should this be approached for best practices?

In my observations, using the <P extends object> generic in JavaScript is often deemed pointless since virtually everything in the language is an object. Most literals behave like objects with methods such as .toString, and strings are objects with p ...

typescripttypescript-generics

Having trouble showing the specific date using the Angular datepipe

Working with angular 7 at the moment. Upon using the date pipe, I have encountered an issue where it displays the next date instead of the current one. Here's a snippet of the code: <div style="text-align: left;width: 80px;white-space:nowrap"> ...

angular

Conceal the Header on the Login Module

Within my app.component, I have a header and body component. <app-header></app-header> <div class="body"> <router-outlet></router-outlet> </div> I am looking to hide the header element when in the login co ...

angular

Experience the ease of using drag and drop functionality with Angular's ng2-dragula feature

I'm currently implementing drag and drop functionality with ng2-dragula. While I've been able to successfully drag and drop, things have become a bit complicated due to the project requirements. My goal is to dynamically add disciplines to a mou ...

angulardrag-and-dropng2-dragula

Angular 11 - New Script Inserted into scripts Directory and Linked in angular.json Configuration

I just added a new script file in the src/assets/scripts directory and updated its path in the scripts section of angular.json. My question is: Will I need to restart ng serve for the changes to take effect the next time the application is run? Thank you ...

javascriptangular

Optimal Approach for Initializing main.ts in a Standalone Angular 17+ Setup

I'm curious about the implementation of the bootstrap call in main.ts within the Angular 17 standalone API configuration. Specifically, should providers/imports be included in the bootstrap call in addition to being imported into individual components ...

angularangular17

Encountered a snag during the construction of an Angular 8 SSR application

Currently, I am in the midst of working on an angular 8 project and my goal is to build it for production. However, each time I try running the build command, a critical error arises: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation fai ...

node.jsangularnpmangular8

Error message "Potential Undefined Object" detected on a variable that is not an object in React with TypeScript

After finding and addressing the other 5-6 questions, I managed to partially fix it by using the "!" operator. Please do not remove this question for duplication purposes. However, what baffles me is that the variable is not recognized as an object. Here i ...

reactjstypescript

Validating minimum and maximum values with Angular 2 FormBuilder

I am currently developing a form using Angular 2 Formbuilder and I want to ensure that users can only input positive values into the amount field (with a minValue of 0 and maxValue of 100). How can I go about implementing minimum and maximum value validati ...

javascriptangularangular2-formbuilder

I often find myself frustrated while using Next.js because the console automatically clears itself, making it difficult for me

I am facing an issue with my form in the Next.js app. Here is how it is defined: <form onSubmit = { async() => await getCertificate(id) .then(resp => resp.json()) .then(data => console.log(data)) }> Whenever there is an erro ...

javascriptreactjsnode.jstypescriptnext.js

Firebase: Retrieving information from Firestore database

Seeking a reliable data fetching method in nextjs for my app. In my firestore database, I have user documents that need to be fetched after a successful authentication process and then utilized in various components (such as profile modal, navbar). Below i ...

reactjsfirebasegoogle-cloud-firestorenext.jsreact-context