Angular-Electronjs – Token registration using the fs API from Nodejs

In the article « Angular-ElectronJS – Login API REST jwt », the user’s token was saved in his browser thanks to localStorage.

But here, our goal is to create a cross-platform application: desktop software and web application, so we will adjust our code to meet this goal.

A few steps :

  • Creation of a shared storageService that records the information returned by the server:
    • either localStorage (in the webapp context)
    • or in a json file (in the electronjs context)
  • Replacing calls from localStorage .


The creation of this service is done with the following Angular command:

ng g service providers/storage 

The following files are created :

  • angular-electron/src/app/providers/storage.service.ts
  • angular-electron/src/app/providers/storage.service.spec.ts

Let’s modify angular-electron/src/app/providers/login.service.ts and import the ElectronService. ElectronService is a service pre-installed in the application. It allows to use the Electronjs API in an Angular application.

import { StorageService } from './storage.service';
import { ElectronService } from './electron.service';

Let’s add some variables before the constructor

public storage: StorageService; 

Then let’s add in the manufacturer the ElectronService

constructor(private http: HttpClient, private electron: ElectronService)  

Replace all localStorage directives with in the angular-electron/src/app/providers/login.service.ts file.

Old CodeNew code
this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.get('user')));this.currentUserSubject = new BehaviorSubject<User>(JSON.parse('user')));
localStorage.setItem('user', JSON.stringify(user));'user', user);
return localStorage.getItem('user');return'user');

As seen above, the information returned by the server (if the user has been authenticated) will be saved in a .json file (in the electronjs context). We will save the « name of this file » in the configuration file specific to the environment used. Remember that we have chosen the 3 following environments:

  • DEV
  • PROD

The LOCAL environment (angular-electron/src/environments/environment.ts) contains the following code

export const AppConfig = {
  production: false,
  environment: 'LOCAL',
  apiUrl: 'http://localhost:3008/api',
  configFile: 'token.json'

Line 5 of this file contains the .json file name. This file is located at the following location for the windows OS: C:\Users\~\AppData\Roaming\angular-electron\token.json. The ElectronJs API allows to retrieve the path of this file. Here is an example of this call:'userData') + '/' + AppConfig.configFile

The file angular-electron/src/app/providers/storage.service.ts contains the following code

import { Injectable } from '@angular/core';
import {ElectronService} from "./electron.service";
import { AppConfig } from '../../environments/environment';

  providedIn: 'root'
export class StorageService  {

  isElectron: boolean;
  confExists: boolean;
  electron: ElectronService;
  configFile: string;

  constructor(electron: ElectronService) {
    this.electron = electron;

    if (this.electron.isElectron()) {


  save(key: string, content: string) {
    if (this.isElectron) {
      let data =  {};
      data[key] =  content;
      this.electron.fs.writeFileSync(this.configFile, JSON.stringify(data));

    localStorage.setItem(key, JSON.stringify(content));

  remove(key: string) {

    if (this.isElectron) {
      // Remove file


  get(key: string) {

    if (this.isElectron &amp;&amp; this.electron.fs.existsSync(this.configFile)) {
      let jsonContents = this.electron.fs.readFileSync(this.configFile, "utf8");
      jsonContents = JSON.parse(jsonContents); 
      return JSON.stringify(jsonContents[key]);
    return localStorage.getItem(key);

  private initElectron() {
    this.isElectron = true;
    this.configFile ='userData') + '/' + AppConfig.configFile; 
    this.confExists = this.electron.fs.existsSync(this.configFile);


If we look closely at the save method that saves the information returned by the server.

save(key: string, content: string) {
    if (this.isElectron) {
      let data =  {};
      data[key] =  content;
      this.electron.fs.writeFileSync(this.configFile, JSON.stringify(data));

    localStorage.setItem(key, JSON.stringify(content));

Line 2-7 checks if we are in the electronjs context. If so, the information returned by the server (including the token) will be recorded in the json C:\Users\~AppData\Roaming\angular-electron\token.json .This is possible thanks to the API of electronjs which makes it possible to save a file on the machine. This API simply uses the fs API of nodejs.

this.electron.fs.writeFileSync(this.configFile, JSON.stringify(data));

Line 9 is used in the web application context.


The remove method is slightly different depending on the context:

  • electronjs: the file C:\Users\~AppData\Roaming\angular-electron\token.json will be deleted.
  • webapplication: the localstorage containing the user key will be deleted.


The get method is similar in both contexts:

  • read the information contained in localstorage or in the json file

And there you have it, we’ve achieved our goal. Our cross-platform application is working properly.

Webapplication capture

Capture electronjsapplication


Translated by Andy A