Using keytar inside electron with angular

Question

I need to use keytar with electron, but I'm using Angular and Typescript. I have imported the module in main.ts

import * as keytar from 'keytar';

but It fails to load.

Alternatively, in a module, I'm using import * as keytar from '../../../node_modules/keytar';

But Electron return this error in development console

Uncaught Error: node-loader: Error: Invalid package /home/project/angularelectron/node_modules/electron/dist/resources/electron.asar at Object. (keytar.node:5) at Object../node_modules/keytar/build/Release/keytar.node (keytar.node:6) at webpack_require (bootstrap:79) at Object../node_modules/keytar/lib/keytar.js (keytar.js:1) at webpack_require (bootstrap:79) at Module../src/app/home/home.component.ts (main.js:4089) at webpack_require (bootstrap:79) at Module../src/app/home/home-routing.module.ts (detail.module.ts:13) at webpack_require (bootstrap:79) at Module../src/app/app-routing.module.ts

How I can load keytar correctly? Thanks you

Answer 1

Firstly, please do not use the remote module, as it is deprecated for a reason.

I just had the same problem and managed to solve it with some tinkering.

Since keytar is a node module with native dependencies to use with the electron renderer process there're several hoops to jump through. Make sure nodeIntegration is set to true and contextIsolation is set to false when creating a browser window. In earlier versions setting nodeIntegration was enough but not anymore.

Then to use it with angular there are additional steps. You have to be using @angular-builders/custom-webpack and node-loader. Then in your component or service import keytar as import * as keytar from "keytar"; and in your component definition declare private keytar: typeof keytar;. Now this is the important bit: in your constructor this.keytar = window.require("keytar"); You have to use the electron's require function or else you get the error in the question. The standard import at the top will provide you with typing info.

Answer 2

Im using Vue with Electron and have the same issue. So the problem was in using keytar in renderer process, where you cant access native api so easily.

const keytar = require("electron").remote.require("keytar");

Using keytar like that in my component solved the problem