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

http://www.kobkrit.com

Completing Chat Room App

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.

• API: https://firebase.google.com/docs/reference/js/firebase.auth.Auth

• It supports authentication using

• Passwords

• Federated Identity Providers

• Google, Facebook, Twitter, and Github.

Enable Sign-in Method

Enable E-mail Password

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 .

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

Adding Firebase Authentication to Chat App

1.js

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

1.js

• 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

• 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

• 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

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:

Login UI

1.js

Register UI

1.js

• Sign Out UI

• And putting them in render() method.

1.js

Login Screen Register Screen 1.js

Register Successfully Register Failed: Using Duplicated E-mail

1.js

Login Successfully Wrong E-mail Wrong Password

1.js

Sign Out Button Clicked.

1.js

Manage Users in Firebase Console

E-mail Templates

Password Resethttps://firebase.google.com/docs/reference/js/firebase.auth.Auth#sendPasswordResetEmail

Confirm Password Reset

https://firebase.google.com/docs/reference/js/firebase.auth.Auth.html#confirmPasswordReset

Verify Password Reset• https://firebase.google.com/docs/reference/js/

firebase.auth.Auth.html#verifyPasswordResetCode

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.

2 Additional Dialog UIs• Password Reset Dialog needs

• E-mail

• Password Confirmation Dialog needs

• Code

• New Password

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/

Adding the following code..2.js

For Facebook Login in iOS

https://developers.facebook.com/docs/facebook-login/ios

Facebook Developer App Setting

For Facebook Login in Android

Facebook Developer App Setting

UI for Facebook Login2.js

2.js

2.js

Q/A