Add Email Authentication To Xamarin.Android App Using Firebase

First, register for Firebase app and get App ID and API Key. Refer to part one for the same.

Add Email Authentication to Xamarin Android app using Firebase - Part One

Step 1

Add a new XML file, go to Solution Explorer-> Project Name-> Resources-> Values. Right-click to add a new item, select XML, and give it a name as styles.axml. Open this XML file and add the following code.

(Folder Name: values, File Name: styles.xml)

XML Code

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

Step 2

Add another XML file. For that, go to Solution Explorer-> Project Name-> Resources-> Values. Right-click to add a new item, select XML, and give it a name as colors.axml. Open this XML file and add the following code.

(Folder Name: values, File Name: colors.xml)

XML Code

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<color name="colorPrimary">#607D8B</color>
<color name="colorPrimaryDark">#37474F</color>
<color name="colorAccent">#ECEFF1</color>
</resources>

Step 3 - Main Layout

Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.

(File Name: Main.axml , Folder Name: Layout)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="@drawable/firebase"
android:layout_width="100dp"
android:layout_height="100dp" />
<android.support.design.widget.TextInputLayout
android:layout_below="@+id/icon"
android:id="@+id/login_input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:hint="Enter your Email"
android:id="@+id/login_email"
android:inputType="textCapWords"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_below="@+id/login_input_email"
android:id="@+id/login_input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:hint="Enter your Password"
android:id="@+id/login_password"
android:inputType="textPassword"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<Button
android:layout_below="@+id/login_input_password"
android:id="@+id/login_btn_login"
android:text="Login"
android:background="#263238"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.Button.Colored" />
<TextView
android:layout_below="@+id/login_btn_login"
android:id="@+id/login_btn_forget_password"
android:text="Forget Password"
android:textStyle="bold"
android:clickable="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/colorPrimaryDark"
style="@style/Widget.AppCompat.Button.Borderless" />
<LinearLayout
android:layout_below="@+id/login_btn_forget_password"
android:id="@+id/login_layout_or"
android:gravity="center"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="200dp"
android:layout_height="1dp"
android:background="#C4C8C9"
android:layout_margin="5dp" />
<TextView
android:padding="5dp"
android:text="OR"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:layout_width="200dp"
android:layout_height="1dp"
android:background="#C4C8C9"
android:layout_margin="5dp" />
</LinearLayout>
<TextView
android:layout_below="@+id/login_layout_or"
android:id="@+id/login_btn_sign_up"
android:text="Sign Up"
android:textStyle="bold"
android:clickable="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.Button.Borderless"
android:textColor="@color/colorPrimaryDark" />
</RelativeLayout>

Step 4 - Main Activity Class

Note - Must change your App ID and API key in the main activity class before building the project.

Now, go to Solution Explorer-> Project Name-> MainActivity and add the following code to main activity with appropriate namespaces.

(FileName: MainActivity)

C# Code

using Android.App;
using Android.Widget;
using Android.OS;
using Firebase;
using Firebase.Auth;
using System;
using static Android.Views.View;
using Android.Views;
using Android.Gms.Tasks;
using Android.Support.Design.Widget;
namespace XamarinFirebaseAuth
{
[Activity(Label = "XamarinFirebaseAuth", MainLauncher = true, Theme ="@style/AppTheme")]
public class MainActivity : Activity, IOnClickListener, IOnCompleteListener
{
Button btnLogin;
EditText input_email, input_password;
TextView btnSignUp, btnForgetPassword;
RelativeLayout activity_main;
public static FirebaseApp app;
FirebaseAuth auth;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
//Init Auth
InitFirebaseAuth();
//Views
btnLogin = FindViewById<Button>(Resource.Id.login_btn_login);
input_email = FindViewById<EditText>(Resource.Id.login_email);
input_password = FindViewById<EditText>(Resource.Id.login_password);
btnSignUp = FindViewById<TextView>(Resource.Id.login_btn_sign_up);
btnForgetPassword = FindViewById<TextView>(Resource.Id.login_btn_forget_password);
activity_main = FindViewById<RelativeLayout>(Resource.Id.activity_main);
btnSignUp.SetOnClickListener(this);
btnLogin.SetOnClickListener(this);
btnForgetPassword.SetOnClickListener(this);
}
private void InitFirebaseAuth()
{
var options = new FirebaseOptions.Builder()
.SetApplicationId("AIzaSyDDkjTIE-LQMNCfPOwzR8kX0-IPENxl_xY")
.SetApiKey("AIzaSyBmuAwrNEgENM40rnjUToHHMraFXQOyuPE")
.Build();
if (app == null)
app = FirebaseApp.InitializeApp(this, options);
auth = FirebaseAuth.GetInstance(app);
}
public void OnClick(View v)
{
if(v.Id == Resource.Id.login_btn_forget_password)
{
StartActivity(new Android.Content.Intent(this, typeof(ForgetPassword)));
Finish();
}
else
if(v.Id == Resource.Id.login_btn_sign_up)
{
StartActivity(new Android.Content.Intent(this, typeof(SignUp)));
Finish();
}
else
if (v.Id == Resource.Id.login_btn_login)
{
LoginUser(input_email.Text, input_password.Text);
}
}
private void LoginUser(string email ,string password)
{
auth.SignInWithEmailAndPassword(email, password).AddOnCompleteListener(this);
}
public void OnComplete(Task task)
{
if (task.IsSuccessful)
{
StartActivity(new Android.Content.Intent(this, typeof(DashBoard)));
Finish();
}
else
{
Snackbar snackbar = Snackbar.Make(activity_main, "Login Failed ", Snackbar.LengthShort);
snackbar.Show();
}
}
}
}

Step 5 - Add Layout For SignUp

Next, add a new Layout by going to Solution Explorer-> Project Name-> Resources-> Layout. Right-click to add a new item, select Layout, and give it a name as SignUp.axml. Open this layout file and add the following code.

(Folder Name: Layout , File Name: SignUp.axml)

XML Code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_sign_up"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="@drawable/firebase"
android:layout_width="100dp"
android:layout_height="100dp" />
<android.support.design.widget.TextInputLayout
android:layout_below="@+id/icon"
android:id="@+id/signup_input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:hint="Enter your Email"
android:id="@+id/signup_email"
android:inputType="textCapWords"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_below="@+id/signup_input_email"
android:id="@+id/signup_input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:hint="Enter your Password"
android:id="@+id/signup_password"
android:inputType="textPassword"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<Button
android:layout_below="@+id/signup_input_password"
android:id="@+id/signup_btn_register"
android:text="Register"
android:background="#263238"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.Button.Colored" />
<TextView
android:layout_below="@+id/signup_btn_register"
android:id="@+id/signup_btn_forget_password"
android:text="Forget Password"
android:textStyle="bold"
android:clickable="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/colorPrimaryDark"
style="@style/Widget.AppCompat.Button.Borderless" />
<LinearLayout
android:layout_below="@+id/signup_btn_forget_password"
android:id="@+id/signup_layout_or"
android:gravity="center"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="200dp"
android:layout_height="1dp"
android:background="#C4C8C9"
android:layout_margin="5dp" />
<TextView
android:padding="5dp"
android:text="OR"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:layout_width="200dp"
android:layout_height="1dp"
android:background="#C4C8C9"
android:layout_margin="5dp" />
</LinearLayout>
<TextView
android:layout_below="@+id/signup_layout_or"
android:id="@+id/signup_btn_login"
android:text="Already Account ? Login Me"
android:textStyle="bold"
android:clickable="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.Button.Borderless"
android:textColor="@color/colorPrimaryDark" />
</RelativeLayout>

Step 6 - Create SignUp Activity

Add a new Activity. For this, open Solution Explorer-> Project Name-> right click to add a new item and select Activity. Give it a name like SignUp and add the following code putting appropriate namespaces.

(FileName: SignUp)

C# Code

using Android.App;
using Android.Content;
using Android.Gms.Tasks;
using Android.OS;
using Android.Support.Design.Widget;
using Android.Views;
using Android.Widget;
using Firebase.Auth;
using static Android.Views.View;
namespace XamarinFirebaseAuth
{
[Activity(Label = "SignUp", Theme ="@style/AppTheme")]
public class SignUp : Activity, IOnClickListener, IOnCompleteListener
{
Button btnSignup;
TextView btnLogin, btnForgetPass;
EditText input_email, input_password;
RelativeLayout activity_sign_up;
FirebaseAuth auth;
public void OnClick(View v)
{
if(v.Id == Resource.Id.signup_btn_login)
{
StartActivity(new Intent(this, typeof(MainActivity)));
Finish();
}
else
if (v.Id == Resource.Id.signup_btn_forget_password)
{
StartActivity(new Intent(this, typeof(ForgetPassword)));
Finish();
}
else
if (v.Id == Resource.Id.signup_btn_register)
{
SignUpUser(input_email.Text, input_password.Text);
}
}
private void SignUpUser(string email, string password)
{
auth.CreateUserWithEmailAndPassword(email, password).AddOnCompleteListener(this, this);
}
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Create your application here
SetContentView(Resource.Layout.SignUp);
//Init Firebase
auth = FirebaseAuth.GetInstance(MainActivity.app);
//Views
btnSignup = FindViewById<Button>(Resource.Id.signup_btn_register);
btnLogin = FindViewById<TextView>(Resource.Id.signup_btn_login);
btnForgetPass = FindViewById<TextView>(Resource.Id.signup_btn_forget_password);
input_email = FindViewById<EditText>(Resource.Id.signup_email);
input_password = FindViewById<EditText>(Resource.Id.signup_password);
activity_sign_up = FindViewById<RelativeLayout>(Resource.Id.activity_sign_up);
btnLogin.SetOnClickListener(this);
btnSignup.SetOnClickListener(this);
btnForgetPass.SetOnClickListener(this);
}
public void OnComplete(Task task)
{
if(task.IsSuccessful == true)
{
Snackbar snackbar = Snackbar.Make(activity_sign_up, "Register Successfully ", Snackbar.LengthShort);
snackbar.Show();
}
else
{
Snackbar snackbar = Snackbar.Make(activity_sign_up, "Register Failed ", Snackbar.LengthShort);
snackbar.Show();
}
}
}
}

Step 7 - Add Layout For DashBoard

Again, add a new Layout named DashBoard.axml and add the following code.

(FileName: DashBoard.axml)

XML Code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_dashboard"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="@drawable/firebase"
android:layout_width="100dp"
android:layout_height="100dp" />
<TextView
android:layout_below="@+id/icon"
android:id="@+id/dashboard_welcome"
android:text="Welcome, user"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.Button.Borderless"
android:textColor="@color/colorPrimaryDark" />
<android.support.design.widget.TextInputLayout
android:layout_below="@+id/dashboard_welcome"
android:id="@+id/dashboard_input_newpassword"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:hint="Enter new Password"
android:id="@+id/dashboard_newpassword"
android:inputType="textPassword"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<Button
android:layout_below="@+id/dashboard_input_newpassword"
android:id="@+id/dashboard_btn_change_pass"
android:text="Change Password"
android:background="#263238"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:layout_marginTop="20dp"
android:layout_below="@+id/dashboard_btn_change_pass"
android:id="@+id/dashboard_btn_logout"
android:text="Logout"
android:background="#263238"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>

Step 8 - Create Dashboard Activity

Again, add another Activity named Dashboard and add the following code with appropriate namespaces.

(FileName: Dashboard.cs)

C# Code

using Android.App;
using Android.Content;
using Android.Gms.Tasks;
using Android.OS;
using Android.Support.Design.Widget;
using Android.Support.V7.App;
using Android.Views;
using Android.Widget;
using Firebase.Auth;
using static Android.Views.View;
namespace XamarinFirebaseAuth
{
[Activity(Label = "DashBoard" ,Theme = "@style/AppTheme")]
public class DashBoard : AppCompatActivity, IOnClickListener, IOnCompleteListener
{
TextView txtWelcome;
EditText input_new_password;
Button btnChangePass, btnLogout;
RelativeLayout activity_dashboard;
FirebaseAuth auth;
public void OnClick(View v)
{
if (v.Id == Resource.Id.dashboard_btn_change_pass)
ChangePassword(input_new_password.Text);
else if (v.Id == Resource.Id.dashboard_btn_logout)
LogoutUser();
}
private void LogoutUser()
{
auth.SignOut();
if(auth.CurrentUser == null)
{
StartActivity(new Intent(this, typeof(MainActivity)));
Finish();
}
}
private void ChangePassword(string newPassword)
{
FirebaseUser user = auth.CurrentUser;
user.UpdatePassword(newPassword)
.AddOnCompleteListener(this);
}
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.DashBoard);
//Init Firebase
auth = FirebaseAuth.GetInstance(MainActivity.app);
//View
btnChangePass = FindViewById<Button>(Resource.Id.dashboard_btn_change_pass);
txtWelcome = FindViewById<TextView>(Resource.Id.dashboard_welcome);
btnLogout = FindViewById<Button>(Resource.Id.dashboard_btn_logout);
input_new_password = FindViewById<EditText>(Resource.Id.dashboard_newpassword);
activity_dashboard = FindViewById<RelativeLayout>(Resource.Id.activity_dashboard);
btnChangePass.SetOnClickListener(this);
btnLogout.SetOnClickListener(this);
//Check Session
if (auth != null)
txtWelcome.Text = "Welcome , " + auth.CurrentUser.Email;
}
public void OnComplete(Task task)
{
if (task.IsSuccessful == true)
{
Snackbar snackbar = Snackbar.Make(activity_dashboard, "Password has been Changed!", Snackbar.LengthShort);
snackbar.Show();
}
}
}
}

Step 9 - Add Layout For ForgetPassword

Similarly, add a new Layout - ForgetPassword.axml and add the following code.

(FileName: ForgetPassword.axml)

XML Code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_forget"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="@drawable/firebase"
android:layout_width="100dp"
android:layout_height="100dp" />
<TextView
android:layout_below="@+id/icon"
android:id="@+id/forget_message"
android:text="We just need your registered email to send your password reset instructions"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.Button.Borderless"
android:textColor="@color/colorPrimaryDark" />
<android.support.design.widget.TextInputLayout
android:layout_below="@+id/forget_message"
android:id="@+id/forget_input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:hint="Enter your email"
android:id="@+id/forget_email"
android:inputType="textCapWords"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
<Button
android:layout_below="@+id/forget_input_email"
android:id="@+id/forget_btn_reset"
android:text="Reset Password"
android:background="#263238"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.Button.Colored" />
<TextView
android:layout_below="@+id/forget_btn_reset"
android:id="@+id/forget_btn_back"
android:text="Back"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.AppCompat.Button.Borderless"
android:textColor="@color/colorPrimaryDark" />
</RelativeLayout>

Step 10 - Create ForgetPassword Activity

Lastly, add one more Activity named ForgetPassword and add the following code with appropriate namespaces.

(FileName: ForgetPassword.cs)

C# Code

using Android.App;
using Android.Content;
using Android.Gms.Tasks;
using Android.OS;
using Android.Support.Design.Widget;
using Android.Support.V7.App;
using Android.Views;
using Android.Widget;
using Firebase.Auth;
using static Android.Views.View;
namespace XamarinFirebaseAuth
{
[Activity(Label = "ForgetPasswordcs", Theme ="@style/AppTheme")]
public class ForgetPassword : AppCompatActivity, IOnClickListener, IOnCompleteListener
{
EditText input_email;
Button btnResetPas;
TextView btnBack;
RelativeLayout activity_forget;
FirebaseAuth auth;
public void OnClick(View v)
{
if (v.Id == Resource.Id.forget_btn_back)
{
StartActivity(new Intent(this, typeof(MainActivity)));
Finish();
}
else if(v.Id == Resource.Id.forget_btn_reset)
{
ResetPassword(input_email.Text);
}
}
private void ResetPassword(string email)
{
auth.SendPasswordResetEmail(email).AddOnCompleteListener(this, this);
}
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.ForgetPassword);
//Init Firebase
auth = FirebaseAuth.GetInstance(MainActivity.app);
//Views
input_email = FindViewById<EditText>(Resource.Id.forget_email);
btnResetPas = FindViewById<Button>(Resource.Id.forget_btn_reset);
btnBack = FindViewById<TextView>(Resource.Id.forget_btn_back);
activity_forget = FindViewById<RelativeLayout>(Resource.Id.activity_forget);
btnResetPas.SetOnClickListener(this);
btnBack.SetOnClickListener(this);
}
public void OnComplete(Task task)
{
if (task.IsSuccessful == false)
{
Snackbar snackbar = Snackbar.Make(activity_forget, "Reset Password Failed!", Snackbar.LengthShort);
snackbar.Show();
}else
{
Snackbar snackbar = Snackbar.Make(activity_forget, "Reset Password link send to email : " + input_email.Text, Snackbar.LengthShort);
snackbar.Show();
}
}
}
}

Finally, we are done with our Xamarin Firebase Auth app. Just rebuild and run the project. You will have results like below.

Register User

SignIn User

Password Reset

Summary

This was the process of creating a Xamarin Firebase Auth App in Xamarin.Android, using Visual Studio. Please share your comments and feedback.

4 Comments

Join the conversation! Your thoughts help the community grow.

mabr ali6y ago
Error on method InitFirebaseAuth(). auth = FirebaseAuth.GetInstance(app). It says FirebaseAuth does not contain a method for "GetInstance". How can I resolve this?
Ravi R7y ago
Showing Register Failed
sunil kumar7y ago
Hi Ahsan , can i use phone number in place of email id and get otp for forgot password option
Kweku Morrison8y ago
What if the user is suppose to enter more than 2 columns