1
0
Fork
You've already forked totp
0
forked from rtn/totp
Time-Based One-Time Passwords
  • JavaScript 99.1%
  • HTML 0.7%
  • Makefile 0.2%
2025年02月18日 17:23:45 +01:00
images Add theme screenshots 2025年02月09日 02:01:10 +01:00
langs Translate label and issuer 2025年02月09日 00:51:36 +01:00
public Embed DepartureMono font in the code 2025年01月22日 13:18:07 +01:00
webxdc Repo moved to rtn 2025年02月01日 15:43:30 +01:00
.gitignore Let there be code 🌱 2025年01月19日 03:16:41 +01:00
app.js Fix URL.pathname bug 2025年02月18日 17:20:55 +01:00
build.js Let there be code 🌱 2025年01月19日 03:16:41 +01:00
CHANGELOG.md Update changelog 2025年02月18日 17:23:17 +01:00
convert.js Let there be code 🌱 2025年01月19日 03:16:41 +01:00
crypto.js Add backup (reduce width of search input) 2025年01月22日 01:08:02 +01:00
font.js Embed DepartureMono font in the code 2025年01月22日 13:18:07 +01:00
i18n.js Themes ( #36 ) 2025年02月08日 22:54:50 +00:00
icons.js Add neon green theme 2025年02月09日 00:08:10 +01:00
package-lock.json 1.0.1 2025年02月18日 17:23:45 +01:00
package.json 1.0.1 2025年02月18日 17:23:45 +01:00
README.md Add theme screenshots 2025年02月09日 02:01:10 +01:00
style.js Skip the color of the wrapper 2025年02月09日 02:23:34 +01:00
test.js Let there be code 🌱 2025年01月19日 03:16:41 +01:00
theme.js Add neon green theme 2025年02月09日 00:08:10 +01:00

totp

A web application for Time-Based One-Time Passwords.

Introduction

Time-Based One-Time Passwords (TOTP) are used during Two Factor Authentication (2FA). Some well known example applications are Google Authenticator and Authy. This is a FLOSS alternative implemented as a web application with the following additional features:

  • Running it as a webxdc application in e.g. DeltaChat allows you to securely synchronize your one-time passwords between all your devices. Attaching it to a group allows you to share them with the people in the group so you can have shared access to accounts.
  • Built as a standalone application in a self contained index.html file. You can download this file and run it locally in your browser. No servers needed and no external communication is made.
  • Tokens/secrets are stored in indexedDB and can be exported to JSON.
  • Multi-lingual. Currently supports seven different languages.
  • Multi-themed. Currently one dark mode and three light modes.

Getting Started

  • Download totp.xdc file from release assets
  • Attach it to Saved Messages or to a group chat for shared access to 2FA accounts
  • Added or modified accounts will be shared with others in the same group

OR

  • Download index.html file from release assets
  • Open it in your local browser

UI

Overview

Here's a brief overview of what the UI looks like and some functions.

Annotated account list
  • a - Backup / export button. Will export a .json file to a channel if running in webxdc mode. It'll save a copy of it in your downloads folder if running in a normal browser.
  • b - Expand all acounts in the list.
  • c - Collapse all acounts in the list.
  • d - Open the Language dialog.
  • e - Cycle through the different themes.
  • f - Search field. Searches all account names in lower case and also label and issuer if specified.
  • g - Account name.
  • h - Account code. Click to copy it to clipboard.
  • i - Expand / collapse account.
  • j - Re-send / broadcast the account (webxdc only)
  • k - Delete account. Will delete the account from indexedDB. If running in webxdc mode and indexedDB and localStorage is cleared, it will be reloaded once again from all updates.
  • l - Edit account name.
  • m - Expire time. The circle is showing percentage and the text is number of seconds left until the token is renewed.
  • n - Additional parameters about the account.
    • Algorithm - Possible values are SHA1 (default), SHA256 and SHA512
    • Period - Refresh period. Must be between 20 and 120 seconds. Default is 30.
    • Digits - Number of digits in the code. Must be between 6 and 8. Default is 6.
    • Label - Label provided by the issuer. Optional string when key is given as a otpauth:// url.
    • Issuer - Token issuer. Optional string when key is given as a otpauth:// url.
  • o - Open the Add Account dialog.


Screens

Screen Description Screen
No Accounts When you start the application the first time there will be no accounts.

Click the plus button in the bottom right corner to open the Add Account dialog.
Add Account

An account has two pieces of data:

  • name: The name of the account. This is a string that you can define yourself.
  • key: The key of the account. This can either be a secret in base32 format or an otpauth:// url.

If the key is in the form of a otpauth:// url it allows you to configure the period, the hash algorithm and the number of digits in the code.

The name and the key must be non empty and valid before you can click the Ok button.

The yellow field at the bottom will let you know if there's something wrong with the input.
Accounts

When you have added a few accounts the main view could look something like this.

Each account in the list shows the name of the account and the current code. Additionally there are some buttons to interact with and a timer showing when the code expires.

Some features:

  • Clicking the code will copy it to the clipboard.
  • Clicking the up/down arrow icons will collapse/expand the account respectively. Expanding it will show some additional information.
  • Clicking the broadcast icon will send out this token again. This is useful if you have deleted an account from another device and want to get it back from another device that still has it. (webxdc only).
  • Clicking the delete icon will delete the account after confirmation.
  • Clicking the edit icon will open up the Edit Account dialog where you can change the name.
Edit Account Editing the account only allows you to change the name. The name has to be non empty and doesn't have to be unique.
Language The language dialog allows you to pick the UI language. By default it picks the value from the browser (navigator.language). So if your device has French as locale, this will be used. This setting is persisted.

Themes

Theme 1 Theme 2 Theme 3 Theme 4

Links

Some links and reference material.

Develop

Working on the code and running it locally

$ git clone git@codeberg.org:rtn/totp.git
$ cd totp
$ npm install
$ npm start # open http://localhost:3333

As an alternative to npm start you can also run it within webxdc-dev which gives you a bit nicer environment closer to the real webxdc scenario:

$ npm run start:webxdc

License

GPLv3