The iltio package provides helpers to easily add client-side encryption to your application. This way you can guarantee your users that their data is private even from your server.

If you want to keep your authentication token secret it's possible to route the authentication through your server. To do that simply redirect calls by adding the token.

import { encrypt } from 'iltio'

const encryptedData = await encrypt({ text: 'Hello World' })

The data will be encrypted inline on the object in addition to returning the result. Specific keys can be ignored with ignoreKeys or included with includeKeys. Using the keys parameter it's possible to set a maxLength for a key that when surpassed will result in false being returned. The flagStatus option will add a iltioEncrypted property to the object indicating whether any encrypted values were found.

const data = { id: 5, text: 'Hello World' }
const encryptedData = await encrypt(data, {
  ignoreKeys: ['id'],
  keys: { text: { maxLength: 256 } },
  flagStatus: true
})

const id: number = encryptedData.id
// data.iltioEncrypted === true

Decryption

Decrypting the data look the same as encryption but works in the opposite direction.

import { decrypt } from 'iltio'

const decryptedData = await decrypt(encryptedData)

// decryptedData.text === 'Hello World'

Enabling Encryption

The idea is that somewhere in your UI you describe the benefits of client-side encryption and what will be encrypted and allow your users to enable encryption using the Encryption component. Depending on whether encryption is enabled or not this component will show a button to either enable encryption or disable it again.

import { isEncrypted } from 'iltio'
import { Encryption } from 'iltio/react'

const PromptUserEncryption = () => <Encryption />

When enabling encryption the user will receive their encryption key which will they'll be prompted to enter again when logging in through the regular flow.