Angular user data coming as [object object]

Question

I have a login service with discord Oauth2.

After the user authorize discord, they are redirected to home page.

my login service is like this:

login() {
this.commonService.showLoadingOverlay();
return this.http.get('http://localhost:3000/auth/login/').subscribe((data: any) => {
  const token = data.token;
  this.token = token;
  if (token) {
    this.userInfo = data.user;
    console.log(this.userInfo);
    this.userId = data.user.user_id;
    this.discordId = data.user.discord_id;
    this.authStatusListener.next(true);
    this.isAuthenticated = true;
    const expiresInDuration = data.expiresIn;
    const now = new Date();
    const expirationDate = new Date(now.getTime() + expiresInDuration * 1000);
    this.saveAuthData(token, expirationDate, this.userId, this.userInfo);
    this.setAuthTimer(expiresInDuration);

    this.commonService.hideLoadingOverlay();
    this.router.navigate(['/']);
  }
}, error => {
  this.commonService.hideLoadingOverlay();
  this.router.navigate(['/'])
  const message = 'Not logged in...'
  this.commonService.showErrorMessage(message);
}

)
  }

Following a guide I was told to add this to save in local storage:

 private getAuthData() {
    const token = localStorage.getItem("token");
    const expirationDate = localStorage.getItem("expiration");
    const userId = localStorage.getItem("userId");
    const userInfo = localStorage.getItem("userInfo");
    if (!token || !expirationDate) {
      return;
    }
    return {
      token: token,
      expirationDate: new Date(expirationDate),
      userId: userId,
      userInfo: userInfo
    }
  }

     autoAuthUser() {
    const authInformation = this.getAuthData();
    if (!authInformation) {
      return;
    }
    const now = new Date();
    const expiresIn = authInformation.expirationDate.getTime() - now.getTime();
    if (expiresIn > 0) {
      this.token = authInformation.token;
      this.isAuthenticated = true;
      this.userId = authInformation.userId;
      this.userInfo = authInformation.userInfo;
      this.setAuthTimer(expiresIn / 1000);
      this.authStatusListener.next(true);
    }
  }

I also have this to get the user info:

getUserInfo() {
    return this.userInfo;
  }

getUserId() {
    return this.userId;
  }

in my sidenav component I am calling user info like this:

if(this.currentUser) {
  this.userId = this.authService.getUserId();
  console.log(this.userId);
  this.userInfo = this.authService.getUserInfo();
  console.log('user:')
  console.log(this.userInfo);
}

user ID is comming fine, but the user info object is coming as [Object Object], I have also tried to console.log userInfo.user_id

the data should be like this:

{user_id: "13", discord_id: "123456xxxx", username: null}

any ideas?

Thanks :)

Can you set a breakpoint in `console.log(this.userInfo);` and check the type? Set a breakpoint in `this.userInfo = data.user;` and check the value. — Thomas Sablik, Oct 27 '20 at 11:01
You should find a network monitor in your browser. There you should find a request to `http://localhost:3000/auth/login/`. What is the response? — Thomas Sablik, Oct 27 '20 at 11:05
@ThomasSablik when I console.log inside the service, the data is displaying just fine. But in the sidenav component when I call getUserInfo(); it's coming as Object Object — MG91, Oct 27 '20 at 11:07
What's the type of `this.userInfo` in the sidenav component? — Thomas Sablik, Oct 27 '20 at 11:08
@ThomasSablik in debugger it's userInfo: "[object Object]" if this is what you mean — MG91, Oct 27 '20 at 11:13
I think `const userInfo = localStorage.getItem("userInfo");` is the problem. You tried to write an actual object into local storage. That doesn't work. You have to stringify the object before you write it. — Thomas Sablik, Oct 27 '20 at 11:22
@ThomasSablik yes I tried JSON, didn't work. I have updated my question and added to extra methods getAuthData and autoAuthuser(). I think the issue is here — MG91, Oct 27 '20 at 11:22
Cause maybe the value is unsuitable to print, maybe (I have seen this on VSCode on mac) there is a problem with console.log('user:') in the previous line. Can you please try? — StPaulis, Oct 27 '20 at 11:23
Does this answer your question? [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Thomas Sablik, Oct 27 '20 at 11:34

Thomas Sablik · Accepted Answer · 2020-10-27T11:32:15.627

You can't write an actual object into local storage with localStorage.setItem and read it with localStorage.getItem. You have to stringify before you write it there and parse after you read it.

The result of writing an actual object into local storage with localStorage.setItem is that the string "[object Object]" is stored instead of the object. In

const userInfo = localStorage.getItem("userInfo");

you are reading the string from local storage and writing it into userInfo.

You should

const userInfo = JSON.parse(localStorage.getItem("userInfo"));

and

const userInfo = {user_id: "13", discord_id: "123456xxxx", username: null};
localStorage.setItem("userInfo", JSON.stringify(userInfo));

You can see the problem when you open the local storage in your browser and check the value for userInfo. It's not

{user_id: "13", discord_id: "123456xxxx", username: null}

but

[object Object]

Angular user data coming as [object object]

1 Answers1