Guest mode

Migrate to the Userfront UI Toolkit

Users of the legacy Userfront pre-built forms are invited to migrate to our new Userfront UI Toolkit. Userfront UI Toolkit features full multi-factor authentication (MFA) support, so you can embed multi-factor login directly in your app. Userfront UI Toolkit also allows for greater customization to match your branding and style guide.

#Migration for plain HTML users

#Legacy usage

html

<html>
  <head>

    <script id="Userfront-script">
      (function(m,o,d,u,l,a,r,i,z,e) {
        u[m]={rq:[],ready:function(j){u[m].rq.push(j);},m:m,o:o,d:d,r:r};function j(s){return encodeURIComponent(btoa(s));}z=l.getElementById(m+"-"+a);r=u.location;
        e=[d+"/page/"+o+"/"+j(r.pathname)+"/"+j(r.host)+"?t="+Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});u.amvartem=m;
      })("Userfront", "wbm95g4b", "https://cdn.userfront.com/@userfront/toolkit@latest/dist/web-component.umd.js",window,document,"script");
    </script>

  </head>
  <body>

    <!-- Signup form -->
    <div id="userfront-kdkraba"></div>

  </body>

#New usage

html

<html>
<head>

  <script defer src="https://cdn.userfront.com/@userfront/toolkit@latest/dist/web-component.umd.js"></script>

</head>
<body>

  <signup-form tenant-id="8vbqr9nq"></signup-form>

</body>
</html>

#Migration for React users

#Legacy installation

shell

npm install @userfront/react

#Legacy usage

import * as React from "react";
import Userfront from "@userfront/react";

Userfront.init("wbm95g4b");

const SignupForm = Userfront.build({
  toolId: "kdkraba"
});

function App() {
  return <SignupForm />;
}

export default App;

#New installation

shell

npm install @userfront/toolkit

The Userfront Core JS library is included in both the legacy and new Toolkits.

#New usage

import * as React from "react";
import Userfront, { SignupForm } from "@userfront/toolkit/react";

Userfront.init("8vbqr9nq");

function App() {
  return <SignupForm />;
}

export default App;

Be sure to import from @userfront/toolkit/react.

#Migration for Vue Users

#Legacy installation

shell

npm install @userfront/vue

#Legacy usage

<template>
  <div id="app">
    <signup-form tool-id="kdkraba" />
  </div>
</template>

<script>
import Userfront, { SignupForm } from "@userfront/vue";

Userfront.init("wbm95g4b");

export default {
  name: "App",
  components: {
    SignupForm,
  },
};
</script>

<style>
...
</style>

#New installation

shell

npm install @userfront/toolkit

The Userfront Core JS library is included in both the legacy and new Toolkits.

#New usage with Vue 3

// App.vue
<template>
  <div id="app">
    <signup-form />
  </div>
</template>

<script setup>
import Userfront from "@userfront/toolkit/vue";

Userfront.init("8vbqr9nq");
</script>

<style>
...
</style>

Be sure to import from @userfront/toolkit/vue.

You don't need to register the individual components. Import the library when your app loads, and the forms will be available anywhere in your app.

#Usage with other frameworks

The Userfront UI Toolkit makes its forms available as Web Components, which means that it's compatible with many front-end libraries, including Angular, Svelte, Polymer, Lit and Solid.

#Installation

shell

npm install @userfront/toolkit

#Usage

// Main, app, or entry file
import Userfront from "@userfront/toolkit/web-components"

// The Userfront UI Toolkit Web Components are now available anywhere in your app.