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

3 min readDec 13, 2020

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 this.storage in the angular-electron/src/app/providers/login.service.ts file.

this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.get('user'))); this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(this.storage.get('user')));

localStorage.setItem('user', JSON.stringify(user)); this.storage.save('user', user);

localStorage.removeItem('user'); this.storage.remove('user');

return localStorage.getItem('user'); return this.storage.get('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:

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:

this.electron.remote.app.getPath('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'; @Injectable({ providedIn: 'root' }) export class StorageService { isElectron: boolean; confExists: boolean; electron: ElectronService; configFile: string; constructor(electron: ElectronService) { this.electron = electron; if (this.electron.isElectron()) { this.initElectron(); } } save(key: string, content: string) { if (this.isElectron) { let data = {}; data[key] = content; this.electron.fs.writeFileSync(this.configFile, JSON.stringify(data)); return; } localStorage.setItem(key, JSON.stringify(content)); } remove(key: string) { if (this.isElectron) { // Remove file this.electron.fs.unlinkSync(this.configFile); return; } localStorage.removeItem(key); } 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 = this.electron.remote.app.getPath('userData') + '/' + AppConfig.configFile; this.confExists = this.electron.fs.existsSync(this.configFile); } }

save

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)); return; } 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.

remove

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.