Firebase

Firebase Manual User Registration in Web API

Firebase Manual User Registration

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.

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.


Step 0:

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] select 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

Click Enable and then click Save
Click Enable and then click Save

Enabled Email/Password Authentication Scheme
Enabled Email/Password Authentication Scheme

Step 1:

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 credentials

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

Step 3:

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
Use Password Generators to generate strong passwords

Generate and Use the Strong Password
Generate and Use the Strong Password

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
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.


Step 4:

All set now. Change the code to make it unto your application needs.


Let me know your thoughts and opinions about this article through comments πŸ’¬ or on twitter at @patel_pankaj_ and @time2hack.

If you find this article useful, share it with others πŸ—£

You've successfully subscribed to Time to Hack!