title: ReferenceError: localStorage is not defined
body: <p>I am trying to make User Authentication with Angular and ASP.NET Core.</p>
  
  <p>I am following the tutorial found here:</p>
  
  <p><a href="https://fullstackmark.com/post/10/user-authentication-with-angular-and-asp-net-core" rel="noreferrer">https://fullstackmark.com/post/10/user-authentication-with-angular-and-asp-net-core</a></p>
  
  <p>I followed all the steps with no errors.</p>
  
  <p>The app runs, but when I go to "/register" or "/login" routes, I get </p>
  
  <pre><code>NodeInvocationException: Uncaught (in promise): ReferenceError: localStorage is not defined
  ReferenceError: localStorage is not defined
  </code></pre>
  
  <p>the service that uses it is:</p>
  
  <pre><code>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&lt;boolean&gt;(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&lt;UserRegistration&gt; {
      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 =&gt; 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 =&gt; res.json())
        .map(res =&gt; {
          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;
    }  
  }
  </code></pre>
  
  <p>the register ts is:</p>
  
  <pre><code>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(() =&gt; this.isRequesting = false)
                     .subscribe(
                       result  =&gt; {if(result){
                           this.router.navigate(['/login'],{queryParams: {brandNew: true,email:value.email}});                         
                       }},
                       errors =&gt;  this.errors = errors);
       }      
    }  
  }
  </code></pre>
  
  <p>the login is:</p>
  
  <pre><code>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) =&gt; {
           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(() =&gt; this.isRequesting = false)
          .subscribe(
          result =&gt; {         
            if (result) {
               this.router.navigate(['/home']);             
            }
          },
          error =&gt; this.errors = error);
      }
    }
  }
  </code></pre>
  
  <p>I tried the solution from:</p>
  
  <p><a href="https://stackoverflow.com/questions/39085632/localstorage-is-not-defined-angular-universal">localStorage is not defined (Angular Universal)</a></p>
  
  <p>but it does not work...</p>
  
  <p>What am I missing </p>