TOTP

Elm implementation of RFC6238.

Demo

You can use this library with pablohirafuji/elm-qrcode to generate a QR code for your user to setup their OTP authenticator devices:

Source code of the demo app can be found in example. Live demo of the app is hosted at https://elm-totp.netlify.app

Backend

You can also use this library in the backend (for example choonkeat/elm-webapp or lamdera.com) to verify if a user input matches their OTP.

Main Flow

1. Initialize a Key with a random rawSecret

   keyResult : Result String TOTP.Key.Key
   keyResult =
       TOTP.Key.init
           { issuer = "ACME Co"
           , user = "[email protected]"
           , rawSecret = "topsecret"
           , outputLength = Nothing
           , periodSeconds = Nothing
           , algorithm = TOTP.Algorithm.SHA1
           }

2. And generate a QR code using pablohirafuji/elm-qrcode for your user to store in their authenticator app.

   view : TOTP.Key.Key -> Html msg
   view key =
       QRCode.fromString (TOTP.Key.toString key)
           |> Result.map (QRCode.toSvg [])
           |> Result.withDefault (text "Error while encoding to QRCode.")

3. [Backend] Save Key into your database by converting it into a String

   str = TOTP.Key.toString key

4. [Backend] Load Key from your database,

   maybeKey = TOTP.Key.fromString str

5. [Backend] Check if a user submitted String matches the OTP code.

   TOTP.Key.code now key == inputString

   Note: Key should not be sent to the frontend when prompting users to enter OTP. Just take whatever OTP the user entered and verify in the backend.