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,
    signed_up_at: USER_SIGNED_UP_AT
  })

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

startUserflow()

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

electron . --userflow-dev-server

Detailed instructions

Load and configure 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.

Import loadUserflow:

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

As soon you have the user's information handy:

const userflow = await loadUserflow()
userflow.init(USERFLOW_TOKEN)
userflow.identify(USER_ID, {
  name: USER_NAME,
  email: USER_EMAIL,
  signed_up_at: 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 you normally start your app with npm start/yarn start (e.g. if using electron-forge), you need to add --userflow-dev-server to your package.json's start script instead. Example:

  "scripts": {
    "start": "electron-forge start --userflow-dev-server"
  }

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