lecture 12: react-native firebase authentication
TRANSCRIPT
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
• 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