javascript - How to fix "TypeError: Cannot read property 'getIdToken' of null" on browser refr

admin管理员组

文章数量:1344238

I am using firebase in angular 8 to authenticate the user both in frontend and backend. To authenticate the user in the backend I need to send user Id token.

I am using firebase getIdToken to get the token and it works but partially. The error "TypeError: Cannot read property 'getIdToken' of null" occurs when I refresh the page.

I have tried to hard code the token to the getToken() method and it works even on refresh but that is not feasible, so I made the getToken method to return Observable.

That observable is fetched in Http interceptor TokenInterceptorService, to add the token to all the requests.

export class AuthService {

  constructor(
    public afs: AngularFirestore,   // Inject Firestore service
    public afAuth: AngularFireAuth, // Inject Firebase auth service
    public router: Router,
    public ngZone: NgZone // NgZone service to remove outside scope warning
  ) {}


  // Other authentication methods for sign up etc.
  // removed here for readability


  getToken(): Observable<string> {

    // getIdToken() returns promise so using 'from' to 
    // convert it to an Observable
    const result = from(this.afAuth.auth.currentUser.getIdToken()
      .then( token => {
          console.log(token);
          return token;
      })
    );

    return result;
  }


}

export class TokenInterceptorService implements HttpInterceptor {


  constructor(private authService: AuthService) { }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return this.authService.getToken()
      .pipe(
        switchMap(token => {

          const newRequest = request.clone({
            setHeaders: {Authorization: `JWT ${token}`}
          });

          return next.handle(newRequest);

        })
      );

 }

}

I have seen similar questions and I am using that solution with some modification.

I have even tried returning promise from getToken() method but that too doesn't work.

I am using firebase in angular 8 to authenticate the user both in frontend and backend. To authenticate the user in the backend I need to send user Id token.

I am using firebase getIdToken to get the token and it works but partially. The error "TypeError: Cannot read property 'getIdToken' of null" occurs when I refresh the page.

I have tried to hard code the token to the getToken() method and it works even on refresh but that is not feasible, so I made the getToken method to return Observable.

That observable is fetched in Http interceptor TokenInterceptorService, to add the token to all the requests.

export class AuthService {

  constructor(
    public afs: AngularFirestore,   // Inject Firestore service
    public afAuth: AngularFireAuth, // Inject Firebase auth service
    public router: Router,
    public ngZone: NgZone // NgZone service to remove outside scope warning
  ) {}


  // Other authentication methods for sign up etc.
  // removed here for readability


  getToken(): Observable<string> {

    // getIdToken() returns promise so using 'from' to 
    // convert it to an Observable
    const result = from(this.afAuth.auth.currentUser.getIdToken()
      .then( token => {
          console.log(token);
          return token;
      })
    );

    return result;
  }


}

export class TokenInterceptorService implements HttpInterceptor {


  constructor(private authService: AuthService) { }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return this.authService.getToken()
      .pipe(
        switchMap(token => {

          const newRequest = request.clone({
            setHeaders: {Authorization: `JWT ${token}`}
          });

          return next.handle(newRequest);

        })
      );

 }

}

I have seen similar questions and I am using that solution with some modification.

I have even tried returning promise from getToken() method but that too doesn't work.

• javascript
• angular
• firebase
• firebase-authentication

Share Improve this question Follow edited Nov 12, 2020 at 17:47 benomatis 5,64377 gold badges3939 silver badges6060 bronze badges asked Oct 30, 2019 at 12:42 isAifisAif 2,37455 gold badges2626 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

getting the currentUser is asynchronous, so it would be expected that initially it will be null. Like mentioned in documentation:

Note: currentUser might also be null because the auth object has not finished initializing.

Instead you should be using authState to get the current user. Then from the user you get from there, you can call getIdToken(), which returns a promise. You can use from there to convert it to an observable:

getToken(): Observable<string | null> {
  return this.afAuth.authState.pipe(
    take(1),
    switchMap((user) => {
      if (user) {
        return from(user.getIdToken())
      }
      return of(null);
    })
  )
}

Then in your interceptor, also do a check if token exists. If there is no user, it will return null

if you're using the latest angular 17 and you're looking for suggestions and also if you're using a functional interceptor then you can create your interceptor something like this:-

this is my interceptor

import { HttpInterceptorFn } from '@angular/mon/http';
import { inject } from '@angular/core';
import { authService } from '../auth.service';
import { switchMap, pipe } from 'rxjs';

export const appendPropertiesInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);

  return authService.getFireToken().pipe(
    switchMap((token: any) => {
      let authRequest = req;

      if (
        !req.url.includes('https://storage.googleapis.') &&
        !req.url.includes('https://hooks.slack.')
      ) {
        authRequest = authRequest.clone({
          headers: req.headers
            .set('x-token', token)
        });
      }

      return next(authRequest);
    })
  );
};

this is my function which I have added in auth service.

    import { Observable, Subject, catchError, from, of, switchMap } from 'rxjs';
    import { Auth } from '@angular/fire/auth';


    export class AuthService {
    getFireToken(): Observable<string> {
        const currentUser = this.auth.currentUser;
        if (!currentUser) {
          return of('');
        }
        const result: Observable<string> = from(currentUser.getIdToken()).pipe(
          switchMap((token: string) => {
            console.log(token);
            return of(token);
          }),
          catchError((error: any) => {
            console.error('Error getting the token:', error);
            return of(''); 
          })
        );
        return result;
      }
    }

本文标签：