Based on popular demand from developers looking to build their stuff on firebase, I’ve put this tutorial together to help with the basics of firebase authentication.
First off, you need to create a Google account “if you don’t have one” then use it to create a firebase account at console.firebase.google.com. When your firebase account is ready, then connect it to your app.
I thought of different ways to handle this topic to bring out the whole essence of it and make sure you understand it clearly so I arrived at building a small firebase app that lets users signup, with their signup credentials, login with those credentials and retrieve as much information as they want.
Hopefully by building this app, you’ll learn how to handle authentications seamlessly, so either build along with me or just read along, either way, you’ll learn it. For my web friends, i’ll continue this article for web on my next release; right now I’ll just continue building from android studio.
So create a new android studio project called “FreeStyle” (if you can’t or still want to learn how to create a new project in AS, see my article on Parsing remote JSON, I explained how to do it in details).
Next is to connect your app to firebase, there are more than one way to do this but I’ll stick with the way I prefer amongst other ways and that is, in your android studio
Ø Click on the tools tab
Ø Click on firebase
Ø Click Authentication and
Ø Click connect to firebase
After it has created the firebase project,
Click on “Add firebase Authentication to your project”
Note: your system has to be online for this part and if you’ve not done this before, it’ll probably ask for your firebase credentials so just supply it and proceed.
Once your projected is connected to firebase, you’ll get a prompt to allow firebase make changes to your gradle files, once you allow it, it’ll automatic add the firebase dependency to your build.gradle file and Boooom!! Your firebase app is ready, congrats!! 😀😀😀
You know it’s really good practice to smile and be happy when you accomplish something in your code, I mean, we can’t see it yet so it’s totally cool if you appreciate yourself every once in a while.
Now that you’ve had fun with yourself, let’s start creating the necessary layouts, first we’ll create the Registration layout. It’ll have 2 input fields; say an email field and a password field. This part should be fairly simple for everyone but for the sake of completeness, I’ll walk you through how to do this. Since you already have activity_main.xml, let’s just work on it instead of creating a separate layout file for Registration.
So open your activity_main.xml file and type in this code
You should pay more attention to the id’s you assigned to the view objects because you’ll use them for reference in other Activities but if you used exactly the same id’s as i did in the snippet above, then you’ll be just fine.
Now when the user fills up the fields and clicks the register button, their credentials should be stored in firebase and upon successful registration, the ProfileActivity will be launched so they can view their details as it’ll be displayed in the Profile page.
So in the MainActivity.java file we declare instances of the view objects and that of the FirebaseAuth;
Now let’s create a method that registers the user. First we’ll get() the values of the input fields and store them inside String variables so that we can use them as Strings to create the user in the firebase createUserWithEmailAndPassword() method.
Next we set conditions to check for empty or malformed input fields such that users cannot not register with malformed email addresses or empty password/email input fields.
Then finally to create the user on firebase, we call the createUserWithEmailAndPassword () method on the FirebaseAuth Instance and implement the onComplete () method. Inside the onComplete () method we’ll decide what happens when the user is successfully registered or when the registration fails. In my case, if the user registers successfully, then I’ll make a Toast (registration successful) and launch the users profile, if it fails, I’ll just make a Toast (registration failed). However I’ll surround everything inside the onComplete() method with “try and catch” since it’ll be performing network functions.
Then on the register button, we set an OnClickListener to call the registerUser() method. If the user is already registered, we also set an OnClickListener on the login button to start the LoginActivity when the button is clicked.
So let’s now create the ProfileActivity class, right click on java and select New>Activity>Empty Activity and name it ProfileActivity.
In the activity_profile.xml file, create the view objects that will hold the data that you’d like to display in the ProfileActivity. In my case, I want to display their email and user id. Hence, i’ll have 2 TextViews with their corresponding id’s.
In the ProfileActivity.java file, declare the FirebaseAuth instance and initialize it in the onCreate() method as we did for the MainActivity class.
Since we’ll be displaying the users information, we’ll also need to declare FirebaseUser and instantiate it as well as the instances of the view objects.
Then we display the users details on the view objects we created on the layout file.
Thus:
FirebaseUser user = mAuth.getInstance().getCurrentUser();
If (user!= null){
String email = user.getEmail();
String Uid = user.getUid();
}
i also added a logout button here so that the user can log out and return to the LoginActivity when they are done viewing their profile. it’s fairly simply to do, just add a button on the layout file, give it an id say button_logout. in the ProfileActivity class just initialize it and set an OnClickListener on it. the onClick method should do if(user !=null){
mAuth.signOut
}
LoginActivity
Create another Activity called LoginActivity (do this the same way we created the ProfileACtivity(). Open the activity_login.xml file and create input fields for login and password.
Next we open the LoginActivity.java file and declare instances of the view objects and the FirebaseAuth. Then initialize them in the oncreate() method as we did for the ProfileActivity.
Now let’s create a method that’ll login the user. First we’ll get() the values of the input fields and store them inside String variables so that we can use them as Strings to sign the user in to firebase with the signInWithEmailAndPassword() method.
Next we set the signInWithEmailAndPassword() method on the FirebaseAuth instance and implement the onComplete() method. Inside the onComplete() method we’ll decide what happens when the user is successfully signed in or when the sign in fails. In my case, if the user signs in successfully, then I’ll authenticate the user and launch the profileActivity, if it fails, I’ll just make a Toast (couldn’t login).
Then on the login button, we set an OnClickListener to call the loginUser() method.
Note before you run the app, you’ll need to set Internet permisions in the AndroidManifest.xml file and also enable Email/Password in your firebase console as the SignIn Method.
Secondly, to see the users who have successfully registered on your app, log in to your firebase console, click Authentication and click the users tab.
There are a lot more features you can implement, like storing data in the firebase database, retrieving it, adding more fields to the registration input fields and retrieving them etc. this tutorial is only serving the purpose of authentication to enable your users SignUp and SignIn into your app with their credentials. You can equally extend it to add email verifications, Twitter, Facebook or Google Sign in methods etc.
Like always, I’m available (twitter @kenny_io) to provide more clarifications and answer your questions if you have any.
The source code is also available on github if you need it.
Top comments (0)