With Android Studio version 2.2, we’ve added some great tools to make getting started with Firebase even easier. In this series of posts, I’m going to step you through how you can use these to add Firebase Auth to a new Android project. This is Part I, where I’ll show you how to get the tools up and running, and how you can begin to connect your app to Firebase, adding all the code prerequisites, and automatically generating a Firebase console project with the tools. In Part II of this series, you’ll then do the coding on your app to get it to use Firebase Auth.
If you’re already somewhat familiar with Android development in Android Studio, you can skip to Step 4.
1. Before You Start:
Before beginning, make sure you have the following:
- Android Studio 2.2 or later (Instructions on downloading and installing here)
- Google Repository version 26 or later (Instructions on installing here)
2. Create the App:
Here are the steps for creating a basic app:
- Create a new Android project with File->New. Give it a friendly name, and click Next.
- On the next screen, you’ll be asked for the form factors. Just accept the default, which should be API 15 for ‘Phone and Tablet’, and everything else unchecked. Click next.
- The next screen should ask you to ‘Add Activity to Mobile’. Select ‘Empty activity’ and click Next
- You’ll then be asked to name the activity. The default is ‘MainActivity’ with a layout file called ‘activity_main’. Just keep these defaults and click Finish
Android Studio will now create the app for you. This might take a few moments, but once it’s done, your Android Studio’s project explorer will look something like this:
In Step 1 you specified a name and a package. In my case, I called the app ‘BlogFirebaseSample’, and the domain ‘LaurenceMoroney.com’, so I got the package as shown.
This is a basic, empty, app. Let’s run it in the emulator next.
3. Running in the Emulator
Android Emulators are also known as Android Virtual Devices or AVDs for short. You can configure them using the AVD Manager, which is found under the tools menu:
This allows you to create, manage and launch emulators for Android. Docs and tutorials are available here.
Once you’ve created an AVD, you can run your app in it using the run menu:
And you can then pick your AVD and launch it. After a few moments, the emulator will launch and you’ll see your app.
You’re now ready to add Firebase to your app.
4. Adding Firebase to Your Project
On Android Studio’s ‘Tools’ menu, you’ll see an entry that reads ‘Firebase’.
Select this, and a Firebase Assistant pane will open to the side of your code editor:
On this pane, click the arrow beside ‘Authentication’, and you’ll see a step through for ‘Email and Password Authentication’.
Click on this, and you’ll see the steps. Let’s follow these:
5. Connecting to Firebase.
Click the ‘Connect to Firebase’ button
Your browser will open with a ‘Request for Permissions’ dialog:
Click ‘Allow’, and then after a ‘Success!’ screen, you’ll be given a dialog with which to connect to Firebase. You can either create a new Firebase project, or, if you have an existing one, you can select that. For this walkthrough, I’m going to create a new project. The project will default to the same name as I gave my app.
Once you’ve chosen your name, click ‘Connect to Firebase’. Android studio will take a few moments, after which you should see a notification like this — the project was created and connected locally to module:app.
6. Configuring Your App for Email Authentication
If you now look at the Firebase pane in your project, you’ll see that Step 1 is completed. It’s time to go to Step 2.
Click the button that says ‘Add Firebase Authentication to your app’. A dialog will pop up mentioning that it will make some changes to your app. Accept this dialog, and your code will be updated.
Once that’s done, click the link that says ‘Firebase console’ in the text under the button. (See screenshot above). This will take you to the Firebase Console.
There you’ll need to find your project. In this case, it’s called ‘BlogFirebaseSample’, but your name may differ. Click on the tile for your project. You’ll be taken to an overview page for the project. On the left-hand side of this page, you’ll see a link to ‘Auth’. Click it.
At the top of the screen, you’ll see tabs for ‘Users’, ‘Sign In method’ and ‘Email Templates’. Select ‘Sign In Method’.
From here you can enable the ‘Email/Password’ sign in provider. There are others that you can do, such as Google, Facebook, and Twitter. But for now, just do Email/Password.
You’re now ready to start coding your app. You’ll do that in Part II!