react native firebase realtime database + authentication

Kobkrit Viriyayudhakorn, Ph.D. kobkrit@gmail.com

http://www.kobkrit.com

Completing Chat Room App

Important Links• Source Codes

https://github.com/kobkrit/learn-react-native

• Course Materials http://www.kobkrit.com/category/programming/react-native/

• Score Announcementhttp://bit.ly/its484quizscore

• Facebook Grouphttps://web.facebook.com/groups/ReactNativeThai/

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.

Adding Chatsl12_firebase/4.js

Add Reference to chats in Firebase DB

l12_firebase/4.js

Listen for chats object changed in

Firebase.Updated it in the

state.

Update chatstransactionally

Starting Listening once the app is

started

l12_firebase/4.js

Rendering Chats and add onPress Handler to SendChat

What Currently Look Like?l12_firebase/4.js

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.

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’;

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

Add two new state variables• modalVisible - For controlling modal visibility • name - Chatter’s name

l12_firebase/5.js

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.

l12_firebase/5.js

Instead of save only a message, We save… • Message • Name of chatter • Timestamp (millisecond since 1 Jan 1970)

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.

l12_firebase/5.js

l12_firebase/5.js

Understand Firebase Pricing

Very Easyto 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.

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.

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

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

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

Authenticate Key for iOS

Open firebase console, and click on Add Firebase to your iOS App

Adding iOS Bundle ID

Add “org.reactjs.native.example.{nameOfYourProject}” while initialize.

Download GoogleService-info.plist

Open in Xcode• $ open ios/l12_firebase.xcworkspace

• Copy the GoogleService-Info.plist to root directory

• Click at “Copy Items if needed”

• Click “Finish”

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.

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.

Enable Sign-in Method

Enable E-mail Password

Adding Firebase Authentication to Chat App

l12_firebase/6.js

l12_firebase/6.js

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.

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.

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.

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:

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().

l12_firebase/6.js

Login UI

l12_firebase/6.js

Register UI

• Sign Out UI

• And putting them in render() method.

l12_firebase/6.js

Login Screen Register Screenl12_firebase/6.js

Register Successfully Register Failed: Using Duplicated E-mail

l12_firebase/6.js

Login Successfully Wrong E-mail Wrong Password

l12_firebase/6.js

Sign Out Button Clicked.

Manage Users in Firebase Console

Editing E-mail Templates

Q/A