34,333
edits
Changes
Created page with "Firebase Phone Number Authentication allows users to sign into an app by providing a phone number. After the phone number has been entered, Firebase sends an SMS message to th..."
Firebase Phone Number Authentication allows users to sign into an app by providing a phone number. After the phone number has been entered, Firebase sends an SMS message to that number containing a one-time code that must be entered within the app to sign in. This chapter will extend the now familiar FirebaseAuth example app to include phone number authentication using FirebaseUI Auth.
== Preparing the Project ==
As with the previous authentication chapters, most of the steps required to configure the project to work with phone verification as an authentication provider have already been performed in the chapter entitled Email/Password Authentication using FirebaseUI Auth. Assuming that these steps have been performed, the next step is to enable phone number authentication within the Firebase console.
== Enabling Phone Number Authentication ==
Before phone authentication can be used, it must be enabled as an authentication provider in the Firebase console. In a browser window, navigate to the Firebase Examples project within the Firebase console, select the Authentication option in the navigation panel followed by the Sign-In Method tab. Click on the Phone entry in the list of sign-in providers and turn on the Enable switch in the resulting dialog before saving the new setting:
[[File:]]
Figure 9-1
== Adding Phone Verification to the Provider List ==
The final step in implementing phone authentication is to add a single line of code to the app to add phone verification to the list of sign-in providers. Edit the FirebaseAuthActivity.java file, locate the getProviderList() method and modify it so that it reads as follows:
<pre>
private List<AuthUI.IdpConfig> getProviderList() {
List<AuthUI.IdpConfig> providers = new ArrayList<>();
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.EMAIL_PROVIDER).build());
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.GOOGLE_PROVIDER).build());
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.FACEBOOK_PROVIDER).build());
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.TWITTER_PROVIDER).build());
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.PHONE_VERIFICATION_PROVIDER).build());
return providers;
}
</pre>
== Testing Phone Number Authentication ==
Compile and run the app on a device or emulator and dismiss the Smart Lock dialog if it appears. When the login screen displays, phone verification should now be included in the list of available providers as outlined in Figure 9-2:
[[File:]]
Figure 9-2
Choosing the Phone sign-in option will cause a second screen to appear in which a phone number must be entered:
[[File:]]
Figure 9-3
Enter a phone number capable of receiving SMS messages and click on the Verify Phone Number button. After a short delay, the 6-digit verification code will arrive on the phone ready to be entered into the screen shown in Figure 9-4:
[[Fire:]]
Figure 9-4
Once the code has been entered, the SignedInActivity screen will appear. After the account has been created, return to the list of authenticated users within the Firebase console and note that the new account has been added with a Phone icon positioned in the Providers column.
== Summary ==
In this, the final chapter looking at authentication using FirebaseUI Auth, we have explored the mechanism for implementing user authentication using phone number verification. Now that the use of FirebaseUI Auth has been covered, the following chapters will introduce user authentication using the Firebase SDK.
== Preparing the Project ==
As with the previous authentication chapters, most of the steps required to configure the project to work with phone verification as an authentication provider have already been performed in the chapter entitled Email/Password Authentication using FirebaseUI Auth. Assuming that these steps have been performed, the next step is to enable phone number authentication within the Firebase console.
== Enabling Phone Number Authentication ==
Before phone authentication can be used, it must be enabled as an authentication provider in the Firebase console. In a browser window, navigate to the Firebase Examples project within the Firebase console, select the Authentication option in the navigation panel followed by the Sign-In Method tab. Click on the Phone entry in the list of sign-in providers and turn on the Enable switch in the resulting dialog before saving the new setting:
[[File:]]
Figure 9-1
== Adding Phone Verification to the Provider List ==
The final step in implementing phone authentication is to add a single line of code to the app to add phone verification to the list of sign-in providers. Edit the FirebaseAuthActivity.java file, locate the getProviderList() method and modify it so that it reads as follows:
<pre>
private List<AuthUI.IdpConfig> getProviderList() {
List<AuthUI.IdpConfig> providers = new ArrayList<>();
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.EMAIL_PROVIDER).build());
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.GOOGLE_PROVIDER).build());
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.FACEBOOK_PROVIDER).build());
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.TWITTER_PROVIDER).build());
providers.add(new
AuthUI.IdpConfig.Builder(AuthUI.PHONE_VERIFICATION_PROVIDER).build());
return providers;
}
</pre>
== Testing Phone Number Authentication ==
Compile and run the app on a device or emulator and dismiss the Smart Lock dialog if it appears. When the login screen displays, phone verification should now be included in the list of available providers as outlined in Figure 9-2:
[[File:]]
Figure 9-2
Choosing the Phone sign-in option will cause a second screen to appear in which a phone number must be entered:
[[File:]]
Figure 9-3
Enter a phone number capable of receiving SMS messages and click on the Verify Phone Number button. After a short delay, the 6-digit verification code will arrive on the phone ready to be entered into the screen shown in Figure 9-4:
[[Fire:]]
Figure 9-4
Once the code has been entered, the SignedInActivity screen will appear. After the account has been created, return to the list of authenticated users within the Firebase console and note that the new account has been added with a Phone icon positioned in the Providers column.
== Summary ==
In this, the final chapter looking at authentication using FirebaseUI Auth, we have explored the mechanism for implementing user authentication using phone number verification. Now that the use of FirebaseUI Auth has been covered, the following chapters will introduce user authentication using the Firebase SDK.
