Firebase

Firebase Manual User Registration in Web API

User registrations with SDKs have been good but what if you wanna add users manually? Today we are going to see firebase manual user registration in its web API and restricting pages on the basis of logged-in state.

Pankaj

Jan 27, 2017 • 4 min read

This method requires the Email-Password (Simple login) to be enabled in your firebase authentication configuration. And user can be added only with email ID and password.

And it is really important to have good data security rules in Firebase to avoid breach.

Pros:

Full control of user count
Invitation based systems

Cons:

No notification to user on account creation
No automated way to handle registration
Password generation is not available, you ned to rely on browser extensions.

Going ahead with the assumptions, let go through the set to accomplish this.

Setting up Firebase Account

Create Firebase Account and Enable Simple login in Authentication panel. This is shown in following screenshots step by step:

Click on the Button to create new App — *Click on the `New` Button to create new App*

Enter App name, [optional] selet the region and Click — *Enter App name, [optional] sele*ct the region and Click `Create Project`

Goto from Side panel and switch to Tab — *Goto `Authentication` from Side panel and switch to `Sign-in Method` Tab*

*Enabled Email/Password Authentication Scheme*

Getting credentials & adding to Project

Clone the repo form here or Download the code from here. Change the app.js to configure the code to use your Firebase app.

Click on the Button — *Click on the `Add Firebase to your Web App` Button to get the cre*dentials

Copy the variable — *Copy the `config` variable*

Or Click on Button — *Or click on `Copy` Button to copy all of the Initialization code*

The code sample works well with npm and for that you should have Node.js installed on your system. You can see the guide to set it up here: Front End Development Workflow

After cloning/downloading, follow the guide in the README.md of code repo.

Install dependencies npm installStart the local server npm run startOpen URL Browser http://localhost:3333

Adding New User & Reseting Password

Now add the new user in the Firebase Console and trigger the Reset Password for the new user.

Goto to tab in panel — *Goto to `Users` tab in `Authentication` panel*

Click on Button — *Click on `Add User` Button and Fill in Details*

*Use Password Generators to generate strong passwords*

Click on of Form and you can see new user in the Users list — *Click on `Add User` of Form and you can see new user in the Users list*

Take mouse over the User row. Then click on the icon on the right side of the row to reveal actions menu. Click on — *Take mouse over the User row. Then click on the `actions` icon on the right side of the row to reveal actions menu. Click on `Reset Password`*

Click Button on the confirmation box for selected User — *Click `Send` Button on the confirmation box for selected User*

*Notification for the Password Reset Email will be shown*

Triggering the Reset Password will enable User to set their own password for their account.

The main idea is to remove/not adding the Registration capabilities to the Front End or Mobile application. And manually adding them from the Firebase Console.

Here in our code example, the index.html can’t be seen without login.

Adjusting Code for specific needs

All set now.

You can change the code to make it work for your application needs.

Let me know through comments ? or on Twitter at @heypankaj_ and/or @time2hack

If you find this article helpful, please share it with others ?

Subscribe to the blog to receive new posts right to your inbox.