:fire: :closed_lock_with_key: FIREBASE AUTHENTICATION

FEATURES OF FIREBASE.

Firebase comes with bunch features essential for every android app starting from authentication to hosting the app.

Below are the advantages using Firebase in general:

• Super easy and quick to implement.

• No server side configuration needed. No PHP Scripts and No Database Designs.

• Realtime update without using GCM.

• Autoscaling built-in

• Can start for free (only need to start paying once we hit 50 connections)

• Robust APIs for Javascript (including several frameworks like Angular), iOS, and Android

• Built-in support for authentication services like Facebook, Google, and Twitter

• Declarative Security Rules model allows us to enforce read/write privileges and data validation throughout the tree

ENABLING FIREBASE AUTH

To checkout this on a blog use this Link for a much clearer view. :point_right: Click here :smile:

1. First thing you need to do is go to https://firebase.google.com/ and make an account to gain access to their console. After you gain access to the console you can start by creating your first project.

• Give your project a name of your choice.

2. Next go to your project dashboard. Find the Auth and click get started. Go to set up sign in method and choose Email & Password and enable it.

3. We need to now add Firebase to our android app so go to the project overview section and choose android.

3. Give the package name of your project (mine is com.zecolloauth.zecolloauth) in which you are going to integrate the Firebase.

4. Here the google-services.json file will be downloaded.

5. Switch to the Project view in Android Studio to see your project root directory. Move the google-services.json file you just downloaded into your Android app module app/src/main root directory.

CREATING ANDROID PROJECT

As we work here you can compare some section of your code with my Repository incase you get stuck!

Reposiory Link :point_right: https://github.com/zecollokaris/FireBase-Authentication-Tutorial/tree/USE-This-Demo

1. Create a new project in Android Studio from File ⇒ New Project. When it prompts you to select the default activity, select Blank Activity and proceed.

While filling the project details, use the same package name which you gave in firebase console. In my case I am using same com.zecolloauth.zecolloauth.

2. Open AndroidManifest.xml and add the INTERNET permission as we need to make network calls and change the theme to NoActionBar

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

Now change the theme to @style/Theme.AppCompat.Light.NoActionBar

AndroidManifest.xml

    <application
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">

3. Confirm that you had added the google-services.json file to your project’s app folder. This step is very important as your project won’t build without this file.

4. Now open the build.gradle located in project’s home directory and add firebase dependency.

build.gradle

    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.1'
        classpath 'com.google.gms:google-services:4.2.0'
        

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }

5. Open app/build.gradle and add firebase auth dependency. At the very bottom of the file, add apply plugin: ‘com.google.gms.google-services’

app/build.gradle

dependencies {
    implementation 'com.google.firebase:firebase-auth:9.0.2'
}
 
apply plugin: 'com.google.gms.google-services'

6. Add the below resources to **dimens.xml, colors.xml, strings.xml and string.xml **. These resources doesn’t require for firebase, but for this demo.

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="logo_w_h">100dp</dimen>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#00bcd4</color>
    <color name="colorPrimaryDark">#0097a7</color>
    <color name="colorAccent">#f2fe71</color>

    <color name="white">#ffffff</color>
    <color name="colorRed">#EB3349</color>
    <color name="colorPink">#FF4081</color>
    <color name="colorTransparentPink">#FF9EA1</color>

    <color name="colorWhite">#FFFFFF</color>
    <color name="colorTransparentWhite">#cccccc</color>
    <color name="colorStandardBlack">#262626</color>
    <color name="colorDarkBlue">#001621</color>
    <color name="colorCyanBlue">#0B9BE2</color>
    <color name="colorMidBlue">#032B3F</color>
    <color name="colorCoinBackground">#01242b</color>
</resources>

strings.xml

<resources>
    <string name="app_name">Firebase Auth</string>
    <string name="action_sign_in_short">REGISTER</string>
    <string name="email">Email</string>
    <string name="minimum_password">Password too short, enter minimum 6 characters!</string>
    <string name="auth_failed">Authentication failed, check your email and password or sign up</string>
    <string name="change_email">Change Email</string>
    <string name="change_password">Change Password</string>
    <string name="send_password_reset_email">Send Password reset email</string>
    <string name="remove_user">Remove user</string>
    <string name="new_pass">New Password</string>
    <string name="title_activity_profile">Firebase</string>
    <string name="title_activity_login">Sign in</string>
    <string name="hint_email">Email</string>
    <string name="hint_password">Password</string>
    <string name="hint_name">Fullname</string>
    <string name="btn_login">LOGIN</string>
    <string name="btn_link_to_register">Not a member? Get registered in Firebase now!</string>
    <string name="btn_link_to_login">Already registered. Login Me!</string>
    <string name="title_activity_reset_password">ResetPasswordActivity</string>
    <string name="btn_forgot_password">Forgot your password?</string>
    <string name="btn_reset_password">RESET PASSWORD</string>
    <string name="btn_back"><![CDATA[<< Back]]></string>
    <string name="hint_new_email">New Email</string>
    <string name="btn_change">Change</string>
    <string name="btn_send">Send</string>
    <string name="btn_remove">Remove</string>
    <string name="btn_sign_out">Sign Out</string>
    <string name="lbl_forgot_password">Forgot password?</string>
    <string name="forgot_password_msg">We just need your registered Email Id to sent you password reset instructions.</string>
    <string name="settings_name">Account Settings</string>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:background">@color/white</item>
    </style>

    <!--Toolbar theme-->
    <style name="CustomToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@color/white</item>
    </style>

    <!--Menu Item Theme-->
    <style name="CustomPopupStyle" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@color/white</item>
        <item name="overlapAnchor">false</item>
        <item name="android:dropDownVerticalOffset">-4dp</item>
    </style>

    <!--Input Theme-->
    <style name="CustomInputStyle" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@color/colorStandardBlack</item>
        <item name="android:theme">@color/colorDarkBlue</item>
    </style>

</resources>

7. Create a new layout file in the drawable folder app/src/main/res/drawable/ named roundbutton.xml

roundbutton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorRed"/>
    <corners android:radius="150dp"/>

</shape>

Now we have the project ready with all the dependencies added. Let’s start by adding the sign up screen.

SIGNUP WITH EMAIL & PASSWORD.

1. Create an activity named ResetPasswordActivity.java and add the following code to the layout file activity_reset_password.xml

activity_reset_password.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Everything Works Okay!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

2. Create an activity named SignupActivity.java and add the following code to the layout file activity_signup.xml

activity_signup.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".LoginActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/colorWhite"
        android:gravity="center"
        android:orientation="vertical"