Quick Start

Everything you need to know to get rolling with Uthentic in 5 minutes.

Step 1 - Choose a site

Pick one of your sites from the list below that you want to get started with.

Loading your sites...

Step 1 - Sign Up

We generate a special script just for you, so you'll need to sign up to get started. Don't worry, you don't need a credit card, and we'll preload your account with some free credits to get you going.

Yay! You created an account! We went ahead and automatically created a site for you. We named it Quick Start Project. You can change the name anytime in the dashboard.

It's worth noting that the button above actually used the vanilla Uthentic signup experience. Wasn't that easy?

Step 2 - Paste a link to your Uthentic script in your website code

Put this line of html at the bottom of your web page, just before the closing </body> tag.

<!-- Uthentic script for your website -->
<script src="https://uthentic.net/%YOURID%/uthentic.js"></script>

You can also find this on the Uthentic dashboard.

Step 3 - Log the user in

await uthentic.login();

If Uthentic has never seen this device before, Uthentic will ask the user to enter their email address, then send them an email with a code. If Uthentic has seen this user before, behind the scenes it'll check to make sure their token is still valid and they still have the appropriate permissions. Uthentic saves an encrypted token on this device so we know who the user is next time.

Show some examples Hide examples

You can call uthentic.login() anywhere in javascript, even as soon as the page loads:

document.addEventListener("DOMContentLoaded", function(event) {
    uthentic.login().then(user => doLogin(user));
});

function doLogin(user){
    //do stuff here after the user is logged in
}

Or directly on a button click:

<button onclick="uthentic.login().then(user => doLogin(user))">Log in</button>

Step 4 - Data Persistence (optional)

After a user has logged in, you can use Uthentic to store and retrieve any arbitrary data on the user's account.

//read data, default to empty array if there is no data
var myToDos = await uthentic.read("todos") || [];

//write data
await uthentic.write("todos", myToDos);

With data persistence, you can create a full static, serverless web application in record time. Another great use case is when you want to record a simple user preference without having to go through the effort of adding a database column or table.

Step 5 - Put it all together

Check out our DEMO. It's a simple to-do app written with VueJS that applies all of these principles in less than 100 lines of code - html, css, javascript all combined.