First, register for Firebase app and get App ID and API Key. Refer to part one for the same.
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 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.

mabr aliPosted Jun 17, 2020, 6:26 AM
Error on method InitFirebaseAuth(). auth = FirebaseAuth.GetInstance(app). It says FirebaseAuth does not contain a method for "GetInstance". How can I resolve this?
Ravi RPosted Jul 12, 2019, 6:06 AM
Showing Register Failed
sunil kumarPosted Apr 15, 2019, 1:19 PM
Hi Ahsan , can i use phone number in place of email id and get otp for forgot password option
Kweku MorrisonPosted May 1, 2018, 1:42 PM
What if the user is suppose to enter more than 2 columns