Challenges arise when integrating Angular with Firebase, particularly in the realms of authentication and user

Question

Challenges arise when integrating Angular with Firebase, particularly in the realms of authentication and user

Currently, I am working on a project using Angular and Firebase. However, in the auth.service.ts file, Visual Studio Code is not recognizing the imports for auth and User.

import { auth } from 'firebase/app';
import { User } from 'firebase';

import { AngularFireAuth } from '@angular/fire/auth'

@Injectable()
export class AuthService {
  public user:User;

  constructor(public afAuth: AngularFireAuth) { }

  async login( email:string, password:string){}
  register(){}
  logout(){}
  getCurrentUser(){}

}

The issue arises with these lines:

import { auth } from 'firebase/app';

import { User } from 'firebase';

I could really use some help resolving this problem. These are the errors that I am encountering:

The error message 'auth' is declared but its value is never read.ts(6133) Module ""../../../../node_modules/firebase"" has no exported member 'auth'. Did you mean to use 'import auth from "../../../../node_modules/firebase"' instead?ts(2614).'

Furthermore, there is an error with importing User where it states: import User Module '"../../../../node_modules/firebase"' has no exported member 'User'. Did you mean to use 'import User from "../../../../node_modules/firebase"' instead?ts(2614).

angular typescript firebase

Answer 1

Answer №1

AngularFireAuth is a wrapper class that eliminates the need for auth. The error message indicates that the firebase package does not have any exported member named User or auth. Consult the documentation for guidance on utilizing AngularFireAuth:

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.user | async as user; else showLogin">
      <h1>Hello {{ user.displayName }}!</h1>
      <button (click)="logout()">Logout</button>
    </div>
    <ng-template #showLogin>
      <p>Please login.</p>
      <button (click)="login()">Login with Google</button>
    </ng-template>
  `,
})
export class AppComponent {
  constructor(public auth: AngularFireAuth) {
  }
  login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

Answer 2

AngularFireAuth is a wrapper class that eliminates the need for auth. The error message indicates that the firebase package does not have any exported member named User or auth. Consult the documentation for guidance on utilizing AngularFireAuth:

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.user | async as user; else showLogin">
      <h1>Hello {{ user.displayName }}!</h1>
      <button (click)="logout()">Logout</button>
    </div>
    <ng-template #showLogin>
      <p>Please login.</p>
      <button (click)="login()">Login with Google</button>
    </ng-template>
  `,
})
export class AppComponent {
  constructor(public auth: AngularFireAuth) {
  }
  login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.signOut();
  }
}

Challenges arise when integrating Angular with Firebase, particularly in the realms of authentication and user

Answer №1

Similar questions

Refresh Angular Component upon query parameter modification

"Optimizing Angular (v4+) for Peak Performance: Expert Strategies and

What is the reason for the lack of functionality of the "unique" field when creating a schema?

Inquiring about Vue 3 with TypeScript and Enhancing Types for Compatibility with Plugins

Angular 13.0 version is experiencing issues when trying to run the "ng serve" command

Steps to activate a function within an angular6 form-related directive

Waiting for update completion in Firebase Firestore (Javascript for web development)

What is the process of creating a for loop in FindById and then sending a response with Mongoose?

Error: script took too long to execute, no response received within 11 seconds

The combination of Object.keys() and the find function

Ensuring robust type safety when using various maps and multiple enums as their keys

Issues with ng2-pdf-viewer arising in Angular versions 12 and above

Sharing a value across an entire angular 11 project: Best practices

Reducing the Angular version from 11 to 9

Exploring the world of third-party APIs

Nativescript encountered an error due to an undefined variable called FIRAuth

Retrieve an array of specific column values from an array of objects using Typescript

Using the TypeScript NextPage function along with the getInitialProps static method and @typescript-eslint/unbound-method

Encountering a problem with lazy loading of module routing paths. Issue arises when attempting to navigate to http://localhost:4200

Tips for calculating the total of keyup elements in an Angular application