Home > Uncategorized > User Registration Form .com – A #Javascript library to handle user registration and login.

User Registration Form .com – A #Javascript library to handle user registration and login.

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.

User Registration Form.com is a JavaScript library that you can drop into a page that will perform basic user login / registration and allow you store data to associate with that user. It also has a password reset functionality, to allow your users reset their password if they forget it.

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.

FAQs:

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.

Advertisement
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: