ReferenceError: localStorage is not defined

I am trying to make User Authentication with Angular and ASP.NET Core.

I am following the tutorial found here:

https://fullstackmark.com/post/10/user-authentication-with-angular-and-asp-net-core

I followed all the steps with no errors.

The app runs, but when I go to "/register" or "/login" routes, I get

NodeInvocationException: Uncaught (in promise): ReferenceError: localStorage is not defined
ReferenceError: localStorage is not defined


the service that uses it is:

import { Injectable, Inject } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { UserRegistration } from '../shared/models/user.registration.interface';
import { ConfigService } from '../shared/utils/config.service';

import { BaseService } from "./base.service";

import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/Rx';

//import * as _ from 'lodash';

// Add the RxJS Observable operators we need in this app.
import '../rxjs-operators';

@Injectable()
export class UserService extends BaseService {

baseUrl: string = '';

// Observable navItem source
private _authNavStatusSource = new BehaviorSubject<boolean>(false);
// Observable navItem stream
authNavStatus$ = this._authNavStatusSource.asObservable();

private loggedIn = false;

constructor(private http: Http, private configService: ConfigService) {
super();
this.loggedIn = !!localStorage.getItem('auth_token');
// ?? not sure if this the best way to broadcast the status but seems to resolve issue on page refresh where auth status is lost in
// header component resulting in authed user nav links disappearing despite the fact user is still logged in
this._authNavStatusSource.next(this.loggedIn);
this.baseUrl = configService.getApiURI();
}

register(email: string, password: string, firstName: string, lastName: string,location: string): Observable<UserRegistration> {
let body = JSON.stringify({ email, password, firstName, lastName,location });
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

return this.http.post(this.baseUrl + "/accounts", body, options)
.map(res => true)
.catch(this.handleError);
}

login(userName: any, password: any) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');

return this.http
.post(
this.baseUrl + '/login',
JSON.stringify({ userName, password }),{ headers }
)
.map(res => res.json())
.map(res => {
localStorage.setItem('auth_token', res.auth_token);
this.loggedIn = true;
this._authNavStatusSource.next(true);
return true;
})
.catch(this.handleError);
}

logout() {
localStorage.removeItem('auth_token');
this.loggedIn = false;
this._authNavStatusSource.next(false);
}

isLoggedIn() {
return this.loggedIn;
}
}


the register ts is:

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

import { UserRegistration } from '../../shared/models/user.registration.interface';
import { UserService } from "../../services/user.service";

declare var localStorage: any;

@Component({
selector: 'app-registration-form',
templateUrl: './registration-form.component.html'
})
export class RegistrationFormComponent implements OnInit {

errors: string;
isRequesting: boolean;
submitted: boolean = false;

constructor(private userService: UserService, private router: Router) {

}

ngOnInit() {

}

registerUser({ value, valid }: { value: UserRegistration, valid: boolean }) {
this.submitted = true;
this.isRequesting = true;
this.errors='';
if(valid)
{
this.userService.register(value.email,value.password,value.firstName,value.lastName,value.location)
.finally(() => this.isRequesting = false)
.subscribe(
result => {if(result){
this.router.navigate(['/login'],{queryParams: {brandNew: true,email:value.email}});
}},
errors => this.errors = errors);
}
}
}


the login is:

import { Subscription } from 'rxjs';
import { Component, OnInit,OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { Credentials } from '../../shared/models/credentials.interface';
import { UserService } from '../../services/user.service';

@Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html'
})
export class LoginFormComponent implements OnInit, OnDestroy {

private subscription: Subscription;

brandNew: boolean;
errors: string;
isRequesting: boolean;
submitted: boolean = false;
credentials: Credentials = { email: '', password: '' };

constructor(private userService: UserService, private router: Router,private activatedRoute: ActivatedRoute) { }

ngOnInit() {

// subscribe to router event
this.subscription = this.activatedRoute.queryParams.subscribe(
(param: any) => {
this.brandNew = param['brandNew'];
this.credentials.email = param['email'];
});
}

ngOnDestroy() {
// prevent memory leak by unsubscribing
this.subscription.unsubscribe();
}

login({ value, valid }: { value: Credentials, valid: boolean }) {
this.submitted = true;
this.isRequesting = true;
this.errors='';
if (valid) {
this.userService.login(value.email, value.password)
.finally(() => this.isRequesting = false)
.subscribe(
result => {
if (result) {
this.router.navigate(['/home']);
}
},
error => this.errors = error);
}
}
}


I tried the solution from:

localStorage is not defined (Angular Universal)

but it does not work...

What am I missing

Continue reading...