Btukfyl

I'm making a web application in where I have an authorisation button for GitHub, which gets access to the personal GitHub repositories. These repositories will be displayed on the web app.

import {Component, OnInit} from '@angular/core';

import {DataService} from '../../services/data/data.service';

import {AuthService} from '../../services/auth/auth.service';

import {DatabaseService} from '../../services/share/database.service';

import {AuthdataDto} from '../../services/dto/authdata.dto';

import { map } from 'rxjs/operators';



@Component({

  selector: 'app-repositories',

  templateUrl: './repositories.component.html',

  styleUrls: ['./repositories.component.sass']

})

export class RepositoriesComponent implements OnInit {



  repositories: Object;

  authData: AuthdataDto;

  //loggedin: boolean;





  constructor(private data: DataService, public authService: 

     AuthService, private dbService: DatabaseService) { }



  ngOnInit() {

   this.getSomething().subscribe(data => { 

   this.data.getrepositories(this.authService.token, 

   this.authService.username)});

   }



   getSomething(){

     return this.dbService.getFromDatabase('user', 

      this.authService.userDetails.uid).pipe(

       map((data => {this.authData = data})));

    }

   }

this is the error i get
I'm trying to retrieve all data first by the doSomething() method within my component and after that has been done the ngOnInit() method should get the repositories. However That is not working.

Any suggestions?

Edit: This is the AuthService class.

import {Injectable} from '@angular/core';

import * as firebase from 'firebase';

import {AngularFireAuth} from 'angularfire2/auth';

import {Router} from '@angular/router';

import {Observable, throwError} from 'rxjs'; 

import {UserDto} from '../dto/user.dto';

import {DatabaseService} from '../share/database.service';

import {AuthdataDto} from '../dto/authdata.dto';



@Injectable({

  providedIn: 'root'

})

  export class AuthService {

  private _user: Observable<firebase.User>;

  private _userdata: UserDto;

  private _userDetails: firebase.User = null;



  private _username;

  private _token;



  constructor(private _afAuth: AngularFireAuth, private router: 

Router, private databaseService: DatabaseService) {

    this._user = _afAuth.authState;

    this._user.subscribe(

      (user) => {

        if (user) {

           this._userDetails = user;

        } else {

          this._userDetails = null;

        }

      }

    );

  }



  public loginwithGithub() {

    return new Promise<any>((resolve, reject) => {

      this.loginwithGithubProvider().then(

        res => {

          this.userdata = new 

UserDto().deserialize(JSON.parse(JSON.stringify(this.userDetails)));

          this.databaseService.pushToDatabase('user', 'tim', 

this.userdata);

          console.log(this.databaseService.getFromDatabase('user', 

'kevin'));

          resolve(res);

        }, err => {

          console.log(err);

          reject(err);

        });

    });

  }



  public loginwithGithubProvider(): 

Promise<firebase.auth.UserCredential> {

    return new Promise<any>((resolve, reject) => {

      this._afAuth.auth.signInWithPopup(

        new firebase.auth.GithubAuthProvider()).then(res => {

        const data = new AuthdataDto(res.additionalUserInfo.username, 

res.credential['accessToken'])

        this.databaseService.pushToDatabase('user', res.user.uid, 

data);

      }, err => {

        console.log(err);

        reject(err);

      });

    });

  }



  public logout(): Promise<boolean | Observable<never> | never> {

    return this._afAuth.auth.signOut()

      .then((res) => this.router.navigate(['/'])

        .catch((err) => throwError('signout failed')));

  }



  public get isLoggedIn(): boolean {

    return this._userDetails != null;

  }



  get user(): Observable<firebase.User> {

    return this._user;

  }



  get userDetails(): firebase.User {

    return this._userDetails;

  }





  get userdata(): UserDto {

    return this._userdata;

  }



  set userdata(value: UserDto) {

    this._userdata = value;

  }





  get token() {

    return this._token;

  }



  set token(value) {

    this._token = value;

  }





  get username() {

    return this._username;

  }



  set username(value) {

    this._username = value;

  }





  get afAuth(): AngularFireAuth {

    return this._afAuth;

  }



  set afAuth(value: AngularFireAuth) {

this._afAuth = value;

  }

    }

check your .subscribe(). If you peer close you might notice that "data" is grayed out, meaning it's never used.

The error seems to be clear, "cannot read prorperty 'uid' of null"
Inside your "getSomething" you are calling "this.authService.userDetails.uid" where "userDetails" is null, can you check if "userDetails" have a value ?

EDIT

In your service you are getting User but user is null so you are setting userDetails null too, look here :

this._user.subscribe(

  (user) => {

    if (user) {

       this._userDetails = user;

    } else {



      // Put a breakpoint here

      this._userDetails = null;

    }

  }

EDIT 2

Ok I suggest you to make your _user public or create a new subject which represent the original _user observable ( but it's already what you are doing by setting "_user = afAuth.authState");

If you do this, you will able to know the state of the observable and then wait for you "user" data to be retrieved before call other methods.

You can use the "switchMap" operator like this :

Component

getSomething(){

 return this.authService.user$.pipe(

  switchMap(userData => 

      this.dbService.getFromDatabase('user', userData.uid)),

  map(data => {this.authData = data}));

}

}

marble up here => https://rxviz.com/v/0oqMeYwo