Firebase Authentication: Sign Up, Sign In, And Reset Password
I know, it’s not the dark side of the internet. But, seriously recently I had a case where I really have to implement a password reset feature in the app.
And I was using Firebase as the backend. As we all do, I searched the internet and always headed back to the Manage Users page at Firebase docs.
So, in this article, I’ll be explaining how you can implement the most common use case of Firebase Auth: sign up, sign in and password reset in your web app. (Well, similarly in native apps too)
Setup A Web Project in Firebase Console
As always,
- Go to Firebase Console
- Create a new project or select an existing project.
- Add a new web app by clicking on the </> (web icon).
- Follow the instructions provided, and done!
If you’re doubted anywhere while registering a web app, you can refer to this article: Add Firebase to your JavaScript project
Setup Authentication
- Go to Firebase Console > Authentication > Sign-in methods
- Enable Email/Password
You’re done with the authentication part on the Console. Now let’s talk a bit about Signing up the user.
Creating the Sign-Up flow.
With Firebase it’s a few lines of code you have to do to sign up the user. First things first, let’s create an instance of the Firebase Auth.
As we are going forward with the email/password authentication, we can use the createUserWithEmailAndPassword() method to create the user.
Our sign up function will look like this:
Yeeii!! We are done with the signup. 🥳
When the account is created Firebase will automatically sign the user in. So that no extra step is needed for the first time to sign the user in. As of now, we are not using any user data (phew, even we don’t care about the user id), but still it’s good to learn more about the User object. User object contains a bunch of different useful properties about the currently logged-in user, and different properties to manage the account.
So let’s keep it going! Resetting password.
As I was saying the User object contains multiple methods to manage the user. Of course, the method to update the user password is also there.
The method definition is
updatePassword ( newPassword : string ) : Promise < void >
But, not that easy anyway as changing a password is a sensitive operation, we have to reauthenticate the user with credentials and then update the password. Otherwise, Firebase will throw an exception: auth/requires-recent-login with the message: “This operation is sensitive and requires recent authentication. Log in again before retrying this request.”
So, first, let’s get the sign-in credentials:
and using this AuthCrendential we can reauthenticate the user, like this:
And finally, let’s update the password:
And that’s it, we have successfully implemented the reset password feature. Here’s the full code:
And, let the returning user sign-in
Firebase Auth instance has the method signInWithEmailAndPassword ( email : string , password : string ) : Promise < UserCredential > which you can use to sign the user into your web app. This one is pretty similar to the createUserWithEmailAndPassword().
Few common errors while signing in:
- auth/invalid-email: Thrown if the email address is not valid.
- auth/user-disabled: Thrown if the user corresponding to the given email has been disabled.
- auth/user-not-found: Thrown if there is no user corresponding to the given email.
- auth/wrong-password: Thrown if the password is invalid for the given email, or the account corresponding to the email does not have a password set.
So, that’s it for this article! If you have enjoyed this, a ❤️ will be breathtaking! Also, if you’re interested in joining an independent Firebase community we’d love to have you at Firebase Chat over Telegram. And if you want to learn Firebase by short-short notes, you can try Firebee Bits.
