# Fuzzy Dice :: Tech Spec

411
* https://github.com/adrai/flowchart.js

## 1. 2FA Auth

**Legend**:

* **Webpage**: ideally a static web page which has code for checking for a Metamask wallet or other.
* **2FA_host**: a Cloudflare worker that receives json API requests to start 2FA authentication process using the user ETH* address.
* **KV_store**: a Cloudflare key-value datastore that stores the secret keys for each user.

Webpage->2FA_host: Address
2FA_host-->KV_store: Address and 2FA secret
2FA_host-->Webpage: QR code

Note left of Webpage: Scan with\nGoogle Auth
Webpage->2FA_host: Address + code
2FA_host-->KV_store: Lookup and verify
Note right of 2FA_host: Set account as active
2FA_host-->Webpage: Display result

## 2. Website

The website has a **/url** path where the login UX takes place. Upon initial load of the page, the user sees a call to action to login with Metamask.

st=>start: 0-User at login page

cond1(align-next=no)=>condition: Is Web3 
connected?

op1=>operation: 1-Metamask setup

op2=>operation: 2-Web3 available

cond2=>condition: Is 2FA
connected?

op3=>subroutine: 3-Generate QR code
* User scans QR
* Verify PIN

op4=>operation: 4-Create/fund wallet

op5=>inputoutput: 5-Launch ready

e=>end: === Session running ===

st->cond1->op1->op2->cond2->op3->op4->op5->e
cond1(no)->op1
cond1(yes)->op2
cond2(no)->op3
cond2(yes)->op4

### Description

0. The `/login` page will check if the user is already logged in and if an account exists.
* API: /check takes an account address and checks if an account exists in the KV datastore.

// False
{
    "result": false,
    "data": null
}

1. Wallet `/login/connect` instructions are displayed and helps the user get started. Add section
2. Display Web3 success page and **Continue** button.
3. 2FA not connected.
* `/login/scan:` Generate QR code and ask user to scan. Display CTA button to **Continue**.
* `/login/verify`: Request PIN input from user and CTA button to **Verify**. Also display other account options.
4. The `/user/home` page shows the user balances for ETH and related L2 tokens.
* This main page should be used to show user authorizations, recent transactions, etc.
* A `/user/wallet` page could be useful
5. Display `/launch` main page which has various options for user to begin a session.