Keytar



  • 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.



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



  • 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



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



  • 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



  • @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



  • 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.



  • @amoss

    Here is someone with the same error:

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

    looks like node/windows/version stuff.

    Possible solutions:



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



  • 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 🙂



  • 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



  • @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.



  • 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 🙂



  • @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.



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



  • @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



  • 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
    ?



  • @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…



  • 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!



  • @amoss sure no problem I learned a lot too!


Log in to reply