Keytar

amoss

Hi
I’m trying to figure out how to integrate keytar. In the code I tried both

const keytar = require("keytar");

and

import {keytar} from "keytar".

Both resulted with the following error:

Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

I searched for it and got here: https://stackoverflow.com/questions/59205156/unable-to-use-keytar-in-main-js-of-electron-project but I didn’t understand how/where should I integrate it into quasar.conf.js also I’m not sure which of the 2 suggested solutions is correct. Maybe both of them?

Moreover, originally I develop for the web and only when building, I (also) build in electron mode so do I need to distinguish the “import” to happen only in electron mode? I’m a bit confused.
Any advice will be appreciated, thanks.

amoss

In other words, where should I put this code
// vue.config.js
configureWebpack: {
devtool: ‘source-map’,
module: {
rules: [
{ test: /.node$/, loader: ‘node-loader’ }
]
}
}

amoss

I made some progress but now encountered a new issue. From the docs I realized that I should put the above code, under build -> extendWebpack.

extendWebpack(cfg) {
                cfg.module.rules.push({
                    enforce: "pre",
                    test: /.node$/,
                    loader: "node-loader",
                    //exclude: /(node_modules|quasar)/,
                });
            },

So now it is compiled and the web opens up but empty. Looking in the console I see the following

Cannot open C:\Users\user\Downloads\portable\vscode\Projects\project\node_modules\keytar\build\Release\keytar.node: TypeError: Cannot read property 'dlopen' of undefined
    at Object.eval (keytar.node?3002:1)

and the line itself is

try {global.process.dlopen(module, "C:\\Users\\user\\Downloads\\portable\\vscode\\Projects\\project\\node_modules\\keytar\\build\\Release\\keytar.node"); } catch(e) {throw new Error('Cannot open ' + "C:\\Users\\user\\Downloads\\portable\\vscode\\Projects\\project\\node_modules\\keytar\\build\\Release\\keytar.node" + ': ' + e);}

The above was taken from Chrome. Firefox says the same but from a different angle:

global.process is undefined

I wonder if it’s because keytar should only be loaded in electron mode?
If so, how can I set it? If not, what am I doing wrong?
Thanks

amoss

The error is because global.process is undefined. What is global.process and who owns it?
Is it related to quasar? electron? keytar?
Thanks

amoss

I know global.process is coming from node-loader but there’s one thing I still don’t understand:
I’m developing in quasar/vue and when building, I “tell” it to build it in electron mode.
How can I import something only in electron mode?

At the moment I have this, after adding the relevant code to extendWebpack (see previous message in this thread)
import { keytar } from “keytar”;
and it compiles and executed but fails to run because global.process is undefined.
My guess is because I’m not in electron mode, but this is just a guess and I want to test it.

I tried the following but obviously it does not compile
import { Platform } from “quasar”;
if ($q.platform.is.electron) import { keytar } from “keytar”;
‘import’ and ‘export’ may only appear at the top level

Any kind of help will be appreciated.
Thanks

dobbel

@amoss

you could maybe replace import with require?

let foobar

if ($q.platform.is.electron) {
    foobar= require('something');
}

Or you can do something dirty in the index.template.html:

conditionaly including the cdn url of keytar in index.template.html

<% if ($q.platform.is.electron) ...

https://cdn.jsdelivr.net/npm/keytar@6.0.1/lib/keytar.min.js

amoss

Thank you very much for the tip. I tried to do the following:

try {
    let keyt = require("keytar");
} catch (e) {
    this.errorMessage = e;
    this.showError = true;
}

When running as “web”, I got the same error as before with global.process undefined.
When running as “electron”, I got the following:

Error: node-loader: Error: C:\Users\user\AppData\Local\Temp\e6425528-a110-43aa-a474-41723fc46383.tmp.node is not a valid Win32 application. C:\Users\user\AppData\Local\Temp\e6425528-a110-43aa-a474-41723fc46383.tmp.node

Building as electron generates a portable executable that I run. My guess is that when running, it extracts the inside to the temp folder.

dobbel

@amoss

Here is someone with the same error:

https://github.com/MyCryptoHQ/MyCrypto/issues/2064

looks like node/windows/version stuff.

Possible solutions:

Switch node versions. ( Version & 32/64 bit) . Use nvm to do this
https://github.com/coreybutler/nvm-windows
Does it run on linux? (ubuntu or something)

dobbel

@amoss Btw if you have a github repo( or something) with the code. I could see if I can get it running.

amoss

I changed node-loader’s index.js code from global.process.dlopen to process.dlopen and it passed this line of code but now fails of something else.
alt text

Even though it recognized the function, it fails as if it’s not a function.
I posted a question on node-loader’s github.
Also made a MVP demo but before the latest changes if you want to play with it: https://gofile.io/d/HDsLoV
type quasar dev to run it

amoss

Any idea how come keyt is recognized correctly with the relevant functions (getPassword in this case) but still will fail when calling that function?
I mean generally, what can cause such error, any tip or hint might help me to go forward.
Thanks

dobbel

@amoss I don’t get the demo. Keytar is not used anywhere and there’s no electron project in quasar defined.

Each release of keytar includes prebuilt binaries for the versions of Node and Electron that are actively supported by these projects. Please refer to the release documentation for Node and Electron to see what is supported currently.

It will only work in electron and in nodejs.

amoss

Well, when running as web, it fails with: Keytar,getPassword is not a function.
When running as electron (executable), it fails with:
Error: node-loader: Error: C:\Users\user\AppData\Local\Temp\07e92995-d4c3-47dc-8b61-d882691c2e86.tmp.node is not a valid Win32 application. C:\Users\user\AppData\Local\Temp\07e92995-d4c3-47dc-8b61-d882691c2e86.tmp.node

I’m kinda lost The application itself is running ok, only that line specifically fails.
I don’t understand why it fails with “is not a valid Win32 application” - in github, the person told me that I must be doing something wrong and closed the ticket.
I guess I’m the only one ever to try to use Keytar or to add a “remember me” feature to his login window.
If not, I wonder how other people managed to do it.

The demo is from the very first/initial try to use Keytar before I tested deeper, not that it made me any progress

dobbel

@amoss It will not run on the web ever.

As for the error:

try linux
try other 32 bit/64bit nodejs versions. Use nvm

Or give me a real demo where you actually get the error for electron.

amoss

There you go: https://gofile.io/d/TziSA1
Thanks a lot!

dobbel

@amoss

the " is not a valid Win32 application" error means you have to rebuild the keytar module for your system ( it’s a native module)

I followed this guide:

Solution 2

https://github.com/fcapolini/electron-keytar-windows10-howto

suc6

amoss

Thanks, a newbie question in order for me not to damage anything, in solution 2 point b I saw

from an unprivileged shell

mkdir electron-keytar
cd electron-keytar
npm init
npm install electron
npm install keytar
npm install electron-rebuild --save-dev
.\node_modules.bin\electron-rebuild -w keytar -p -f

Because I already have a project folder with the relevant installations (electron, keytar and electron rebuild), is it enough for me just to run
.\node_modules.bin\electron-rebuild -w keytar -p -f
?

dobbel

@amoss
Yes that’s enough , if you have the right visual c++ libaries installed ect ( probably not). BUt just try it. You probably get missing visual c++ libs or something.

What I had to do was:

npm install --global --production windows-build-tools
npm install --global node-gyp
( I did not have to do this because I already had python)
setx PYTHON $env:USERPROFILE.windows-build-tools\python27\python.exe

Than it still gave me errors, so I had to manually update the visual c++ 2020 libs or something

if you get this too I let me know…

amoss

It looks a bit cumbersome (to my non-professional eyes) to achieve what I need.
I appreciate a lot your effort and wanting to help but I will first finish some unfinished business I have in the queue and then I’ll get to this.
Again, thanks a lot!

dobbel

@amoss sure no problem I learned a lot too!