Advanced User actions for Firebase Login ?

Personalizing the Web Application for individual user is a very crucial User Experience. Hence providing ways to control the control the information about user is very important.

For example On any website, if user cannot change the password they might abandon their account and never come back.

Similarly, if they had put wrong picture by mistake or whatever reason and now they wanna update it. They should be able to change the profile picture. If not, they are forced to create new account or never come back.

In previous posts about the Firebase, we covered following ways to authenticate the user and do some trivial actions related to user information:

• Simple Email Login with Firebase web API
• Update profile picture for Firebase user
• Different authentication Ways

In this post will be taking a look at different ways to change user information.

Let’s take a look at them one by one

Display name and profile picture

Display name and profile picture are the first step to personalize the user experience

These can be changed or added at two points in any application. First when user is creating the profile, and second is when user is trying to update information.

Both of these actions can be completed by a single function named As updateProfile

firebase.auth().currentUser.updateProfile({
  displayName: 'Time to Hack',
  photoURL: 'https://time2hack.com/favicon.png'
});

Though you need to make sure that the information is not getting overwritten.

To make sure that you will not overwrite the actual information, you can always first retrieve the old information and then apply new valid information on top of it.

const profileData = {
  displayName: 'Time to Hack',
  photoURL: null
}
const user = firebase.auth().currentUser;

user.updateProfile({
  displayName: profileData.displayName || user.displayName,
  photoURL: profileData.photoURL || user.photoURL
});

Forgot password

This step is very crucial. This step would allow the long forgotten users to come back to the application.

Doing so is very easy in Firebase app, we just need to call a method named sendForgotPasswordLink And provide first parameter as email and second parameter as additional actions.

const email = document.querySelector('#forgotPasswordEmail').value;

firebase.auth().sendPasswordResetEmail(email)
  .then(function() {
	alert('Reset link has been sent to provided email address');
  })

The additional action can be the URL where the user needs to be redirected. The URL can also include the email. This additional action can also allow the related mobile app to open but we are not concerned with that action for now. Maybe later.

Change password

This is as crucial as the previous step as it revolves around the security of the users information. Though, Firebase only provides one way to change the password, which is through Forgot Password Links.

For Change password, we are going to use the email address from the firebase.auth().currentUser

So the code will look like as follows:

const email = firebase.auth().currentUser.email;

firebase.auth().sendPasswordResetEmail(email)
  .then(function() {
	alert('Reset link has been sent to your email address');
  });

Email verification

This action in your app will help you Keep your data safe from unwanted entries and unwanted users.

With this option you can prohibit users from using your app or you can restrict the application capability for non-verified users.

This is also as simple as forgot password. While authenticated, we need to just call a function named send verification link stop and firebase would send confirmation email link to the user which user can click and verify themselves.

To check if the user is verified or not you can use emailVerified flag on the currentUser and decide what to do in your application.

alert(
  firebase.auth().currentUser.emailVerified 
	? 'Email Verified'
	: 'Email Not Verified'
);

To verify the email address of the users, we can use the function sendEmailVerification on currentUser like as follows:

function sendEmailVerification(data) {
  var user = firebase.auth().currentUser;
  var email = data.email || user.email;
  return user.emailVerified || user.sendEmailVerification({
    url: window.location.href + '?email=' + user.email,
  });
}

Connecting different social accounts

If you’re planning to interact with the social media it’s really important to allow users to share content on their personal timelines of different social networks like Facebook, Twitter, Google et cetera.

function connectSocial(provider) {
  var user = firebase.auth().currentUser;
  var p = provider+'AuthProvider';
  provider = firebase.auth[p];
  if(provider) {
    user.linkWithPopup(new provider).then(console.log);
  }
}

And the providers can go as follows:

var providers = [
  'facebook',
  'google',
  'twitter'
];

Conclusion

Apart from above, there are more way in which you can provide options to control the information to users. You just need to be creative to make it interesting for users to use your web app.

What do you think about this article on User operations for Firebase? Let me know through comments ? or on twitter at @heypankaj_ and @time2hack.

If you agree, share this article with others ?