bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
Kickstart your React Native app with Firebase – Cloud Firestore (Tutorial #2)
In this series we will create an iOS and Android application — called Fakestagram — with React Native, using some of Firebase services. This is not an “intro to React Native” tutorial so we won’t cover basic things, but only Firebase specific topics, so you will need some React Native knowledge to keep up with the pace.
Today, in Ep. 2, we will look at some of Firebase’s basic authentication possibilities. If you want to read the previous article about Cloud Firestore, go to Episode #1, the intro article is here: Episode #0.
Our workshops are restarting!
Join the FREE ONLINE React Native workshop on August 11, and learn how to connect native modules to build an awesome Music Creator.
Join the workshop and invite your peers as well! For full details and registration visit the event page:
On the previous article we created a database to our application to store posts and started using it with a FlatList and a button to add a random new post. Today we will extend the database with another collection to store users, create authentication feature and secure the database by only registered users will be able to write anything in it.
According to docs: “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, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.
Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.”
SET UP AUTH
First, choose Authentication in the nav, then activate Email/Password authentication. Now, create your first user on the Firebase console. This easy to setup a basic email/password authentication in Firebase. Don’t forget to secure your database with authentication required for write access. Click on Database, then rules and modify the rules to this:
Now you set up your DB to only authenticated users could write.
Now, that authentication is ready, it’s time to use it. First we need to add the native dependencies to the project.
On iOS add pod ‘Firebase/Auth’to your Podfile, do a pod update and from now, you can use Firebase Auth features on iOS.
On Android add compile “com.google.firebase:firebase-auth:11.6.0” to app/build.gradle. Add import io.invertase.firebase.auth.RNFirebaseAuthPackage; and new RNFirebaseAuthPackage() to MainApplication.java and now it works on Android. Docs time: RNFirebase uses the native Firebase SDKs so your authenticate state is saved to the device, meaning if you close the app and re-open the app, the user won’t need to re-authenticate.
CREATING LOGIN + LOGOUT FUNCTIONALITY
We need to update our code to handle email + password authentication. We add some new properties to state (user, loggingIn, emailValue, passwordValue, hasError, error). User will be the user if logged in, logginIn is for loading state handling, email and passwordValue fields to controlled TextInputs and the 2 error related are to give feedback to our users if they messed up something. We are subscribing to userChange events too, so we need to update our lifecycle methods as well.
Now, create the helper methods which will responsible to handle successful or unsuccessful login actions. The idea is simple. We have a <Login /> component with 2 TextInputs and a Button. If the user tapping the Button, we call firebase.auth().signUpWithEmailAndPassword(email, pass) . This gives us some response. If it’s ok, we set the user to the state and render the news feed instead of the login form.
This is all you need to start using Firebase authentication in your React Native application. If you want, you can clone the example repo with the UI implemented and checkout the code. Would you like to add something? Or you have any questions? Just write a comment.
In the next episode we will connect this application with Redux to manage state.
Check out the full code here: https://github.com/benestudio/fakestagram/tree/auth
CHECK OUT THE FULL CODE HERE:
Read moreSee all software engineering
Build your own Christmas chat tree
Or should we say Chat-mas tree?😜 Create a working chat application in 2 hours using React, SSE (Server-Sent Events) and OneSignal on Heroku.
5 Ways to Connect Redux Actions
This article provides 5 ways of defining mapDispatchToProps with explanations. Great introduction to our Redux Saga Workshop!
Bene Studio Serverless Workshop - Calorie Counter App
Redux-Saga To The Rescue
In this blog post, we are checking back to our 25. September Redux Saga Workshop. On 19. October we are trying out a new JS Framework for cross-platform...
Kickstart your React Native app with Firebase – Cloud Firestore (Tutorial #1)
In this series we will create an iOS and Android application — called Fakestagram — with React Native, using some of Firebase services....