After many months of React Native development, I’ve been acquainted with building an . Lately I was looking to do the same but in ReactJS. The only difference between the web and the native use case is that, on a web app, the user can try to access a navigation state directly via the URL so you need to protect your components. Luckily, React 16.3 now provides that will help us with that. authentication workflow between Firebase and React Navigation a fantastic new Context API We first create a Firebase auth context that contains two values: indicates if Firebase has reported the auth status. If the auth status hasn’t been reported yet, you might want to display a loading indicator for your app. authStatusReported indicates if the user is signed-in or not. isUserSignedIn When the component is mounted, we listen to Firebase in order to set the proper state to our context. Below is the source code of our context provider. onAuthStateChanged Now we need to create a component (or higher-order component depending on your preferences) that will wrap a component into a consumer of the Firebase authentication context. If the user is signed-in, we return the children, if not, we redirect to the login page. Protected Of course, you need to wrap your root app component with . Using React Context API This is the part that is specific to ReactJS as opposed to React Native. FirebaseAuthProvider Everything else is pretty much the same. You can create a Firebase module as below. You can then sign-in: and sign-up: Pretty straightforward no? Will you be using the new React context API to implement your authentication workflow? I’m looking forward to read your thoughts on this topic. Are you looking for a premium React Native starter kit? You should checkout React Native Elements. _After two months in the making, React Native Sketch Elements is finally here. React Native Elements covers a wide…_hackernoon.com React Native Sketch Elements
