Making Firebase Authentication on React-Native. Username Password Auth and Facebook Login

1. Kobkrit Viriyayudhakorn, Ph.D.
kobkrit@gmail.com
http://www.kobkrit.com
Completing Chat Room App

3. Understand Firebase Pricing

4. Very Easy
to Fake an user.
• This is bad.
• We need something to check authority of the
chatter.
• We need a serious and professional chat app for
serious things.
• Let’s do the authentication.

5. Firebase Authentication
• Firebase Authentication provides backend services, easy-to-use
SDKs, and ready-made UI libraries to authenticate users to your
app.
• API: https://firebase.google.com/docs/reference/js/
firebase.auth.Auth
• It supports authentication using
• Passwords
• Federated Identity Providers
• Google, Facebook, Twitter, and Github.

6. Enable Sign-in Method

7. Enable E-mail Password

8. Create New Project and
Install Firebase
• We will install Firebase
• Open Terminal and change to a working directory
• $|> create-react-native-app firebase2
• $|> cd firebase2
• $|> npm install firebase moment --save
• $|> atom .

9. Code From Previous Lecture
• http://bit.ly/2zGjgfI

10. Adding Firebase
Authentication to Chat App
1.js

11. 1.js

12. • Firebase gives us a reactive method for listening for
authentication. That is we can set up a listener to call a method
when the user logs in and out.
• When user is logout, the login modal will be shown up and reset
the name back to the “Anonymous”
• When user is login, the name text label at the header of the app is
changed.
1.js

13. • To sign a user in with their email and password, use the
signInWithEmailAndPassword() function. It accepts two
parameters, the user's email and password.
• After user successfully login, it will hide the login modal, and
trigger the onAuthStateChanged() [in the previous slide] to
change the name.
• If login failed, it will show alert popup with the error message.
1.js

14. • We can create a user by calling the
createUserWithEmailAndPassword() function. It accepts two
parameters, an email and a password.
• After an user successfully created, it will hide the login modal,
and trigger the onAuthStateChanged() [in the previous 2 slides]
to change the name.
• If register failed, it will show alert popup with the error message.
1.js

15. • To sign the current user out, use the signOut() method. It accepts no
parameters
• After an user successfully sign out, it will trigger the
onAuthStateChanged() [in the previous 3 slides] to show the login
modal and change the name back to “Anonymous”
• Why? We can’t set it here.. It is because sometime we can kick users
out of the system from firebase console or simply timeout expire.
• If we set the showing login modal code here, the kicking out case
will not trigger the modal show up.
• It is better to handle everything in onAuthStateChanged().
1.js

16. GetCurrentUser()
• Not used in the Chat App, but it is helpful in other apps.
• Although you can get the current user using the
getCurrentUser() method, it's better to use this from within the
callback function provided by onAuthStateChanged().
• However, if you need to get the current user, call the
getCurrentUser() method:

17. Login UI
1.js

18. Register UI
1.js

19. • Sign Out UI
• And putting
them in
render()
method.
1.js

20. Login Screen Register Screen
1.js

21. Register Successfully
Register Failed:
Using Duplicated E-mail
1.js

22. Login Successfully Wrong E-mail Wrong Password
1.js

23. Sign Out Button Clicked.
1.js

24. Manage Users in Firebase Console

25. E-mail Templates

26. Password Reset
https://firebase.google.com/docs/reference/js/
firebase.auth.Auth#sendPasswordResetEmail

27. Confirm Password Reset
https://firebase.google.com/docs/reference/js/
firebase.auth.Auth.html#confirmPasswordReset

28. Verify Password Reset
• https://firebase.google.com/docs/reference/js/
firebase.auth.Auth.html#verifyPasswordResetCode

29. Making UI for Password
Reset
• Change "isShowLogin" boolean state variable to "show"
string state variable
• show == "login", will show login dialog.
• show == "register", will show register dialog.
• show == "passwordReset", will show password reset
dialog
• show == 'passwordConfirm', will show password
confirm dialog.

30. 2 Additional Dialog UIs
• Password Reset Dialog needs
• E-mail
• Password Confirmation Dialog needs
• Code
• New Password

31. Facebook Login With
Firebase and Expo
• We can do Facebook with help of the Firebase and
Expo quite easily.
• https://docs.expo.io/versions/latest/sdk/
facebook.html
• You need an Facebook Developer ID, and create a
new Facebook app.
• https://developers.facebook.com/

32. Adding the following code..
2.js

33. For Facebook Login in iOS
https://developers.facebook.com/docs/facebook-login/ios
Facebook Developer App Setting

34. For Facebook Login in
Android
Facebook Developer App Setting

35. UI for Facebook Login
2.js

36. 2.js

37. 2.js

38. Q/A