Clavis (React + Vite, NodeJS, Tauri, capicator)

Private password manager. it`s open source and its free for all. Can be built into an app, exe and a website for all your devices

Setup

Requirements

1. Node.js
2. Authenticator app ( i recommend the Google Authenticator)
3. (For build) Have access to linux terminal (WSL / Git Bash)

steps

windows: I made a website for setup so run

cd ./server
node setup

Run

Its for the website version only. For other platforms, you will need to build and run it as an app.

steps

1. open terminal
2. Start the server. Type cd ./server and then node server in the terminal.
3. Then open a new tab or a new terminal and type npm run dev

Build

make sure you are on the correct settings in the Back-end and the Front-end. that includes:

1. ip is set correctly to the server ip address.
2. The dev options are disabled. (You can look on how to enable or disable it in the README file)

After you are done with those steps you use the build script (bash) called build.sh. You have 3 options APK, EXE, ALL (to build exe and apk).

dev options:

There are two places to configure development options. in:

1. Front end - in the /src/scripts/APIHandler.js there is a import settings from '../assets/settings.json' if you want to enable the dev settings (local server) so change it into .../devSettings.json'

2. Back end - inside the .env file there is a settings DEV=false, change it to true to be able to skip the Authenticator steps in the login.

For the nerds

Server side

Its pretty straight forward, as you expect from a normal password manager it saves all the passwords, Secure in a json file.

(i hope to change it into something more professional like a database).

It encrypts all the data using argon2 for the key, and crypto to encrypt all the data using that key.

The argon2 uses the password provided by the Front-side and uses Pepper that has been created in the setup.

The crypto mainly use is for the AES as it is the main and only encryption Algorithm.

And now for the Authenticator App i use otplib as well for the QR Code i use qrcode

Front-side

It uses Vite + JavaScript mainly as well some React components.

│   App-phone.css
│   App.css
│   App.jsx
│   index.css
│   main.jsx
│   pallete.css
│
├───assets
│       bg.png
│       colorless_bg.png
│       devSettings.json
│       logo.png
│       settings.json
│       unknown.png
│
├───components
│       container.jsx
│       groupContainer.jsx
│       logo.jsx
│       Popup.jsx
│
└───scripts
        APIHandler.js
        useServer.js
        validInput.js

Most of the magic happens in the App.jsx But the code that interacts with the Back-side is in APIHandler.js but useServer.js is the brain behind it.

The APIHandler.js main job is to send and recive data.

useServer.js is where it handles the data from the server and preparing the data in a format the server can understand.