React Native Firebase Realtime Database + Authentication

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

2. Important Links
• Source Codes
https://github.com/kobkrit/learn-react-native
• Course Materials
http://www.kobkrit.com/category/programming/react-
native/
• Score Announcement
http://bit.ly/its484quizscore
• Facebook Group
https://web.facebook.com/groups/ReactNativeThai/

4. Adding Chat Functionality
into Application
• Chat App is exactly syncing a list of message
(chat) through out the members in the chat rooms.
• We can use transaction features of Firebase
Realtime database that we have done earlier to
implement the chat function.
• Let’s start with the basic chat implementation.

5. Adding Chats
l12_firebase/4.js
Add Reference to
chats in Firebase DB

6. l12_firebase/4.js
Listen for chats
object changed in
Firebase.
Updated it in the
state.
Update chats
transactionally
Starting Listening
once the app is
started

7. l12_firebase/4.js
Rendering Chats and add onPress Handler to SendChat

8. What Currently Look Like?
l12_firebase/4.js

9. Improvement
• For each message, it should have
• Timestamp, when this chat is sent.
• Who is a sender?
• Asking for sender name when enter the app.
• Better UI in the chat message.

10. We need MomentJS for this
task.
• MomentJS, DateTime utility library in Javascript.
• Installation
• $|> npm install moment -- save
• Usage in React-Native
• import moment from ‘moment’;

11. Using MomentJS
• Setting time
• let time = moment(timestamp);
• Format time
• moment().format('MMMM Do YYYY, h:mm:ss a');
=> November 21st 2016, 6:23:03 pm
• moment("20111031", “YYYYMMDD").fromNow();
=> 5 years ago

12. Add two new state variables
• modalVisible - For controlling modal visibility
• name - Chatter’s name
l12_firebase/5.js

13. l12_firebase/5.js
• Adding Modal UI to ask chatter’s name.
• Save it into this.state.name
• Open by set this.state.modalVisible=true
in the constructor.

14. l12_firebase/5.js
Instead of save only a message,
We save…
• Message
• Name of chatter
• Timestamp (millisecond since
1 Jan 1970)

15. l12_firebase/5.js
• Showing the chatter name at the header
• Using MomentJS for display the time.
• Showing the chatter name in the chat message.

16. l12_firebase/5.js

17. l12_firebase/5.js

18. Understand Firebase Pricing

19. 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.

20. Firebase Authentication
• Firebase Authentication provides backend
services, easy-to-use SDKs, and ready-made UI
libraries to authenticate users to your app.
• It supports authentication using
• Passwords
• Federated Identity Providers
• Google, Facebook, Twitter, and Github.

21. React-Native-Firestack
• To get full functionality of Firebase Authentication, We
can not just using the Firebase NodeJS library like we
did in Realtime Database.
• It needs more native functionality such as exchanging
token with Facebook app.
• We need to use native iOS, and Android Firebase library.
• Luckily, Somebody make it easy for us to integrate with
native library via the automatic link. It is called “React-
Native-FireStack” library

22. Firestack Installation
• $|> npm install react-native-
firestack --save
• $|> react-native link
• Firestack have done many
things for us
• Install Cocaopod
• Install firebase native iOS
via Cocaopod
• Linking with React-Native

23. .xcworkspace
not .xcodeproj
• Since we using Cocaopod, we need to use
{projectName}.xcworkspace instead of
{projectName}.xcodeproj
• Why? Because Cocaopod is a package manager
for iOS native library (like npm for react-native)
• To make user’s project can linked with the installed
libraries, Cocaopod need to creating the
workspace (.xcworkspace), which make installed
libraries and user project to be in the same space.

24. Authenticate Key for iOS
Open firebase console, and click
on Add Firebase to your iOS App

25. Adding iOS Bundle ID
Add “org.reactjs.native.example.{nameOfYourProject}”
while initialize.

26. Download
GoogleService-info.plist

27. Open in Xcode
• $ open ios/l12_firebase.xcworkspace
• Copy the GoogleService-Info.plist to root directory

28. • Click at “Copy Items if needed”
• Click “Finish”

29. Only iOS 8.0 or up
• Lastly, due to some dependencies requirements,
Firestack supports iOS versions 8.0 and up. Make
sure to update the minimum version of your iOS
app to 8.0.

30. Continue in Firebase
console
• Ignore step 3 and step 4 in Firebase console.
• Press continues until the dialog box is close.
• We don’t need to install Cocaopod and do pod
install since the react-native-firestack’s automatic
link have taken care for us already.

31. Enable Sign-in Method

32. Enable E-mail Password

33. Adding Firebase
Authentication to Chat App
l12_firebase/6.js

34. l12_firebase/6.js

35. l12_firebase/6.js
• 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.

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

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

38. 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 listenForAuth().
• However, if you need to get the current user, call the
getCurrentUser() method:

39. l12_firebase/6.js
• To sign the current user out, use the signOut() method. It accepts no
parameters
• After an user successfully sign out, it will trigger the listenForAuth() [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 listenForAuth().

40. l12_firebase/6.js
Login UI

41. l12_firebase/6.js
Register UI

42. • Sign Out UI
• And putting
them in
render()
method.
l12_firebase/6.js

43. Login Screen Register Screen
l12_firebase/6.js

44. Register Successfully
Register Failed:
Using Duplicated E-mail
l12_firebase/6.js

45. Login Successfully Wrong E-mail Wrong Password
l12_firebase/6.js

46. Sign Out Button Clicked.

47. Manage Users in Firebase Console

48. Editing E-mail Templates

49. Q/A