userflow-electron

userflow-electron

Electron support for Userflow.

Installation

npm install userflow-electron

Quick start

Add this to your renderer process:

const {remote} = require('electron')
const {loadUserflow, startDevServer} = require('userflow-electron')

async function startUserflow() {
  const userflow = await loadUserflow()
  userflow.init(USERFLOW_TOKEN)
  userflow.identify(USER_ID, {
    name: USER_NAME,
    email: USER_EMAIL,
    signedUpAt: USER_SIGNED_UP_AT
  })

  if (remote.process.argv.some(v => v === '--userflow-dev-server')) {
    startDevServer()
  }
}

startUserflow()

When developing your Electorn app locally, start it with the --userflow-dev-server command line flag, e.g.:

electron . --userflow-dev-server

Detailed instructions

Load Userflow.js

In the renderer process, load and initialize Userflow.js. Then identify a user. userflow-electron re-exports loadUserflow from userflow.js for convenience:

const {loadUserflow} = require('userflow-electron')

userflow = await loadUserflow()
userflow.init(USERFLOW_TOKEN)
userflow.identify(USER_ID, {
  name: USER_NAME,
  email: USER_EMAIL,
  signedUpAt: USER_SIGNED_UP_AT
})

Check Userflow.js docs for more info.

Adjust your Content-Security-Policy (CSP)

If your app uses Content-Security-Policy (CSP), make sure you include Userflow's required directives.

Enable flow previews in development

To be able to preview flows locally and use Userflow's element selector tool, the exported startDevServer function must be run.

Make sure to only do this locally on your own machine. This code should NOT be run on end-users' machines.

startDevServer will start a local WebSocket server, which Userflow's Flow Builder can communicate with.

The recommended way is to start your app with a command line flag, e.g. --userflow-dev-server, which a renderer process can read to start this behavior. Example:

const {remote} = require('electron')
const {startDevServer} = require('userflow-electron')

if (remote.process.argv.some(v => v === '--userflow-dev-server')) {
  startDevServer()
}

Then run your app with e.g.:

electron . --userflow-dev-server

If needed, you can stop the server later by running the exported stopDevServer function.