User Registration Form .com

Every website nowadays has a login and register page, and as a developer this boilerplate code takes up time, and gets little credit. Using this Javascript library, you can manage users, and associate data with your users that will be persisted remotely, all without any server-side coding. It’s secure, fast, and simple to use - and above all it’s free.

Quick Start

Include a reference to our JS library in the head of your page:

<script src="https://userregistrationform.com/user.js"></script>

To handle a new user registration, use this code:

user.apiKey = "1A6F4B67DB0937D50386054DE40AA767"; 
user.email = "you@company.com";
user.password = "a-strong-password";
user.register().then(() => {
    // This happens after a successful login
    location.href = "Dashboard.html#" + user.id; 
}).catch(() => {
    // This happens if the registration fails.
    alert("register failed");
});

To handle a user login, use this code:

user.apiKey = "1A6F4B67DB0937D50386054DE40AA767"; 
user.email = "you@company.com";
user.password = "a-strong-password";
user.login().then(() => {
	// This happens after a successful login
	location.href = "Dashboard.html#" + user.id; 
}).catch(() => {
	// This happens if the login fails
	alert("login failed");
});

You can also perform a user login using the user id alone, as follows:

user.apiKey = "1A6F4B67DB0937D50386054DE40AA767"; 
user.id = "{user id here}";
user.login().then(() => {
	// user is now logged in
}).catch(() => {
	alert("Login failed");
});

Once logged in you can store data pertaining to the user by setting the “data” property as follows:

user.data = "Anything";

Although persisting data for a user is fast, it’s not instant, so you shouldn't navigate away from the page until the data is saved, you can check for this by using the code;

user.data = "Anything";
user.onSetData = () => {
	// Safe to leave the page now.
};
...

Please be aware that if you intend to store personally identifiable information in the data field, you must comply with GDPR. You must let your users know that their data is being stored with Infinite Loop Development Ltd, and your users must give informed consent for this. Your data will be deleted if you do not follow GDPR guidelines.

How do I ...

Add Email verification

If you need your users to verify their email address before having full access to your system, then you can do this in conjunction with an email library such as SMTPJS.COM

The flow would be as follows;

  • User Registers
  • After registration, an email is sent with a link containing the user.id
  • On visiting this url, your page sets user.data to “verified” and then to the dashboard
  • User Logs in
  • If the user.data is not set to “verified”, then access is denied, otherwise the user is sent to the dashboard.

Add a password reset

There is no way to recover a lost password, but you can ask a user to reset his/her own password. You will need a means to send email, and we recommend SMTPJS.COM for this.

The flow would be as follows;

  • User requests a password reset
  • An email is sent to the email address of the user with a link to a password reset page.
  • On the password reset page, the following code is executed;
async function reset() {
	user.apiKey = "1A6F4B67DB0937D50386054DE40AA767";
	user.email = "you@company.com";
	user.password = "new-password";
	try {
		await user.resetPassword();
		alert("password reset ok");
	} catch (e) {
		alert("password reset failed");
	}
}

List all users

On an admin page of your website, you can list all the users of under your account, by calling the following code:

async function list() {
	user.apiKey = "1A6F4B67DB0937D50386054DE40AA767";
	user.password = "**root password here**";
	try {
		var list = await user.list();
		alert(JSON.stringify(list));
	} catch (e) {
		alert("list failed");
	}
}

Since your root password is visible on this page, you should make sure that your admin page is not accessible to unauthorized visitors. The user list returned will contain all user ids, user email, and user data. If needed, you can assume the identity of one of your users by using the user id provided in the return data.

Connect a user with Shopping cart, CMS system, product X

This system is designed to be flexible enough, such that you can store any data you need regarding a user (up to 8Kb of data). Instead of storing plain text, like the examples above, you can also store JSON, so that you can represent a Shopping basket of products, or a rich CMS user profile with name, address and contact details. The user ID is always represented by a GUID (Genuinely unique Identifier), so it is statistically impossible for there to be an overlap between the ID returned by User.js and any other system. Although we’re unlikely to be able to offer free advice on how to connect this system to your Product X, it’s beyond the remit of our support for this free software. If you would like to sponsor the development of a feature, please contact us.

Sponsorship

We’re offering this system for free, and it will remain free, this is because we use this login system internally, and it saves our development time. We hope to attract sponsors who will pay for feature upgrades to help support our development effort. This is a system in development, and we’d like to add features such as social login (Facebook, Google, etc.) and perhaps two-factor authentication login. If you would like either of these features, and would be interested in sponsoring the continued development of this system, please contact us via email below!

c