Download as PDF, PPTX
![• 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](https://image.slidesharecdn.com/2017-l12-firebase2-171116031445/85/Lecture-12-React-Native-Firebase-Authentication-13-320.jpg)
![• 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](https://image.slidesharecdn.com/2017-l12-firebase2-171116031445/85/Lecture-12-React-Native-Firebase-Authentication-14-320.jpg)
![• 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](https://image.slidesharecdn.com/2017-l12-firebase2-171116031445/85/Lecture-12-React-Native-Firebase-Authentication-15-320.jpg)
![• 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](https://image.slidesharecdn.com/2017-l12-firebase2-171116031445/75/Lecture-12-React-Native-Firebase-Authentication-13-2048.jpg)
![• 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](https://image.slidesharecdn.com/2017-l12-firebase2-171116031445/75/Lecture-12-React-Native-Firebase-Authentication-14-2048.jpg)
![• 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](https://image.slidesharecdn.com/2017-l12-firebase2-171116031445/75/Lecture-12-React-Native-Firebase-Authentication-15-2048.jpg)
Uploaded byKobkrit Viriyayudhakorn
Lecture 12: React-Native Firebase Authentication
1. The document discusses adding authentication to a chat app using Firebase Authentication. 2. It describes enabling authentication methods like email/password, setting up listeners to handle authentication state changes, and signing users in, out, and up. 3. It also covers adding UI components for logging in, registering, resetting passwords, and logging out with the authentication methods.
More Related Content
Similar to Lecture 12: React-Native Firebase Authentication
![[Lecture 3] AI and Deep Learning: Logistic Regression (Coding)](https://cdn.slidesharecdn.com/ss_thumbnails/lecture3empty-180216132805-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[Lecture 4] AI and Deep Learning: Neural Network (Theory)](https://cdn.slidesharecdn.com/ss_thumbnails/lecture4ink-180216131712-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[Lecture 2] AI and Deep Learning: Logistic Regression (Theory)](https://cdn.slidesharecdn.com/ss_thumbnails/lecture2-ink-180216131533-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Lecture 12: React-Native Firebase Authentication
- 1.
- 3.
- 4. Very Easy to Fakean 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 • FirebaseAuthentication 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.
- 7.
- 8. Create New Projectand 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 PreviousLecture • http://bit.ly/2zGjgfI
- 10. Adding Firebase Authentication toChat App 1.js
- 11.
- 12. • Firebase givesus 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 signa 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 cancreate 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 signthe 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 usedin 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.
- 18.
- 19. • Sign OutUI • And putting them in render() method. 1.js
- 20. Login Screen RegisterScreen 1.js
- 21. Register Successfully Register Failed: Using Duplicated E-mail 1.js
- 22. Login Successfully WrongE-mail Wrong Password 1.js
- 23. Sign Out ButtonClicked. 1.js
- 24. Manage Users inFirebase Console
- 25.
- 26.
- 27.
- 28. Verify Password Reset •https://firebase.google.com/docs/reference/js/ firebase.auth.Auth.html#verifyPasswordResetCode
- 29. Making UI forPassword 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 DialogUIs • Password Reset Dialog needs • E-mail • Password Confirmation Dialog needs • Code • New Password
- 31. Facebook Login With Firebaseand 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 followingcode.. 2.js
- 33. For Facebook Loginin iOS https://developers.facebook.com/docs/facebook-login/ios Facebook Developer App Setting
- 34. For Facebook Loginin Android Facebook Developer App Setting
- 35. UI for FacebookLogin 2.js
- 36.
- 37.
- 38.