How To

Plug-and-play auth with Userfront’s Toolkit

With Userfront’s Toolkit, adding things like a signup form or a login form to your own applications is a breeze. Ready to give it a whirl? Let’s go!

December 11, 2024

—

5 Min Read

With Userfront’s Toolkit, adding things like a signup form or a login form to your own applications is a breeze. And with the latest release of Toolkit, including multi-factor authentication (MFA) in your app’s auth flow is just as easy. Toolkit lets you choose from ready-to-use UI components or build your own custom forms – or mix and match all of the above – so you can focus on building your app, not building a new authentication UI from scratch. Ready to give it a whirl? Let’s go!

Getting Started

‍
Every Userfront user has access to the Toolkit. If you don’t already have a Userfront account, sign up for free at userfront.com.

Use of Toolkit components is tied to an active app: your Userfront account can manage multiple apps, each with its own unique users. If you haven’t already, take a minute to orient yourself to your active app’s Dashboard:

It’s a best practice to develop in Test mode, which will allow you to set up test users without impacting your live application. Once you’ve completed plugging Toolkit into your app, you can turn on Live mode from here in the Dashboard without any additional modifications to your code. Also, take note of your app’s tenant ID – we’ll be using that later.

Meet the Toolkit

From your Dashboard, navigate to the Toolkit page to find the four ready-to-use UI components you can add to your app: forms and buttons for your users to Signup, Login, do a Password Reset, and Logout.

Each of these four components can be added anywhere in your app’s UI via either a React element or a drop-in custom web element. Today we’re going to use the custom HTML Toolkit to add “Signup” and “Login” web elements.

Add a Signup Form

In our demo app here, the app’s existing UI is mostly built but we’ve got a few blank spaces remaining: there’s a spot for a signup form and an empty space for a user login form, but no actual forms yet. We’re going to use the Toolkit components to add these elements to our app.

Adding in a Toolkit component takes two steps:

First, add a script tag to our app website’s head block that pulls in the Userfront Toolkit itself:

<html> <head>

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

‍
Then, add a custom web element signup-form into our UI wherever we want the signup form itself to show up. This web element takes a tenant-id property: this is where our app’s unique tenant ID that we noted in the Dashboard earlier comes in to play (replace the "xxxxxxxx" in this example with your own tenant ID):

<body>

...

<signup-form tenant-id="xxxxxxxx"></signup-form>

...

</body>

</html>

You can copy these and all other Toolkit snippets directly from the Toolkit page in your dashboard.

Now let’s view those changes in our app:
‍

It worked! Our signup form shows up exactly where we dropped in the customer signup-form web element, and is immediately live and ready to use. Note also how the signup form itself reminds us that our app is still set in “Test mode”. This will change automatically once we set our app to “Live” from the Dashboard.

Add a Login Form

Now that our app allows users to sign up, we need to add a login form so that they can actually log in with their newly-created accounts too.

Adding a login form works similarly to adding the signup form:

<html> <head>

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

</head>
Again, we need to make sure the Toolkit is loaded via Userfront’s CDN, if it hasn’t been added already (this is the same script block we used previously to add the signup form; there’s no need to add it again if it already exists).

Then this time we need to add the custom element login-form to our app’s UI, wherever we want the login form to appear (again, replace the "xxxxxxxx" in this example with your own tenant ID):

<body>

...

<login-form tenant-id="xxxxxxxx"></login-form>

...

</body>

</html>

And let’s check out the results in our app:
‍

Just like with the signup form, the login form shows up where we expect, and reflects the current “Test mode” state of our app’s settings in the Dashboard.

See it all in action

Now that we’ve got our UI components in place, let’s try it all out:
‍

The plug-and-play signup form allows us to create a new user in our Test Mode environment.

Next we can double-check that this new user was actually created by trying to log in. Let’s use the login form we created with Toolkit to test that now:
‍

And finally, we can check our Dashboard view to confirm this user was created successfully:
‍

From here, we can use the Dashboard to directly manage this user: changing their access control level, granting them new roles, resetting their password, etc.

Making changes via Dashboard

One of the great things about using the Toolkit is that you can make changes to your app settings in the Dashboard, and instantly see those changes reflected in your app’s Toolkit-added UI elements without making any additional changes to your code.

Let’s take a closer look at that:

Here in the Dashboard, we’ve turned off “Password” as an authentication option, and turned on “Email verification code”.
‍

Now going back to our app, we can see those changes reflected in the signup and login forms immediately, without making any changes to our UI code:
‍

Here we see our forms no longer ask for a username and password, and have the added option for a user to request “Email me a code”.

Next steps

Ready to try it out on your own? Login to your Userfront dashboard and get started now. Got questions or feedback for us? Get in touch, we’d love to hear from you: email hello@userfront.com.

‍