Simple OTP login using Firebase

Glitch
3 min readJun 21, 2021

What is FirebaseUI Auth?

FirebaseUI is a library built on top of the Firebase Authentication SDK that provides drop-in UI flows for use in your app.

Does It have any benefits over Firebase SDK Authentication why should someone use it?

FirebaseUI provides the following benefits:

  • Multiple Providers — sign-in flows for email/password, email link, phone authentication, Google Sign-In, Facebook Login, Twitter Login, and GitHub Login.
  • Account Management — flows to handle account management tasks, such as account creation and password resets.
  • Account Linking — flows to safely link user accounts across identity providers.
  • Anonymous User Upgrading — flows to safely upgrade anonymous users.
  • Custom Themes — Customize the look of FirebaseUI to match your app. Also, because FirebaseUI is open source, you can fork the project and customize it exactly to your needs.
  • Smart Lock for Passwords — automatic integration with Smart Lock for Passwords for fast cross-device sign-in.

What is our aim, What we will be building and why?

Authentication enables organizations to keep the data secure by permitting only authenticated users to access their protected resources. Enabling secure authentication is the first step in creating any successful app. We aim to ease this task so that we can invest our time in solving other problems 😐

We will be building a basic app that will be using the FirebaseUI android library for providing some of the famous authentications, we use in our day-to-day life.

  • Google
  • Facebook
  • Twitter
  • Phone
  • Email

Connect to Firebasebookmark_border

Figure 1. The Assistant tool window in Android Studio.

Firebase is a mobile platform that helps you quickly develop high-quality apps, grow your user base, and earn more money. Firebase is made up of complementary features that you can mix and match to fit your needs, with Google Analytics for Firebase at the core. You can explore and integrate Firebase services in your app directly from Android Studio using the Assistant window shown in figure 1.

First make sure you have installed Google Repository version 26 or higher, using the following steps:

  1. Click Tools > SDK Manager.
  2. Click the SDK Tools tab.
  3. Check the Google Repository checkbox, and click OK.
  4. Click OK to install.
  5. Click Background to complete the installation in the background, or wait for the installation to complete and click Finish.

You can now open and use the Assistant window in Android Studio by following these steps:

  1. Click Tools > Firebase to open the Assistant window.
  2. Click to expand one of the listed features (for example, Analytics), then click the Get Started tutorial to connect to Firebase and add the necessary code to your app.

Let’s start to build

Dependency

implementation 'com.google.firebase:firebase-auth:20.0.3'
implementation 'com.google.firebase:firebase-database:19.7.0'
implementation 'com.google.firebase:firebase-firestore:22.1.2'

Login Activity

class LoginActivity : AppCompatActivity() {
private val MY_REQUEST_CODE = 123
var providers: List<AuthUI.IdpConfig>? = null

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_login)
providers = Arrays.asList(
// EmailBuilder().build(),
AuthUI.IdpConfig.PhoneBuilder().build()
// FacebookBuilder().build(),
// GoogleBuilder().build(),
// TwitterBuilder().build()
)
showSignInOptions()
}

private fun showSignInOptions() {
startActivityForResult(
AuthUI.getInstance().createSignInIntentBuilder()
.setAvailableProviders(providers!!)


.build(), MY_REQUEST_CODE
)
}

override fun onActivityResult(
requestCode: Int,
resultCode: Int,
@Nullable data: Intent?
) {
super.onActivityResult(requestCode, resultCode, data)
if (requestCode == MY_REQUEST_CODE) {
val response = IdpResponse.fromResultIntent(data)
if (resultCode == RESULT_OK) {
val user = FirebaseAuth.getInstance().currentUser
if (user != null) {
// User is signed in
Prefs(this).getaccount_id= user.toString();

val i = Intent(this@LoginActivity, MainActivity::class.java)
i.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
startActivity(i)
} else {
// User is signed out
Log.d("user signed out", "onAuthStateChanged:signed_out")
}
startActivity(Intent(this, MainActivity::class.java))
finish()
Toast.makeText(this, "Welcome User! " , Toast.LENGTH_LONG).show()}

else {
Toast.makeText(this, "" + response!!.error!!.message, Toast.LENGTH_LONG).show()
}
}
}}

Here I have commented the

providers = Arrays.asList(
// EmailBuilder().build(),
AuthUI.IdpConfig.PhoneBuilder().build()
// FacebookBuilder().build(),
// GoogleBuilder().build(),
// TwitterBuilder().build()

If you wanna use them for login you can use those too.

Ta-da!! Simple and easy peasy and OTP login is been implemented. Do try and have fun..keep Coding!!

--

--