Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: Link
Link to the repo: github
A good rule of thumb when following along with tutorials you haven't done before: try to only learn one new thing at a time. That rule has worked fairly well for me following written instructions from the internet, particularly because if something breaks then you only have one thing to blame it on.
For this project I followed along with this fantastic written tutorial on logrocket.com from Nigerian blogger Yusuff Faruq. I wanted to give him a special shout-out because I've been looking for a tutorial like this for a long time that was specific to authentication in Firebase with React and this is the only one like it I've found.
The only major difference between my project and the author's is that rather than style mine with Tailwind CSS I chose to go with Bootstrap because I know it better, and that way I could focus all of my learning efforts on the Firebase portion of the tutorial.
A preview of today's web application
Project Overview
The project is a CRA app with a simple directory structure: a components folder, a providers folder, and a firebase.js file in the root. The components folder has Application, SignIn, SignUp, ProfilePage,
and PasswordReset. The providers folder has a single file- UserProvider.jsx.
I am telling you all of this because clever programmers will already know everything this app does and where to find it, which is exactly how you want your application to be laid out. Also, Firebase makes all of this so easy with its pre-built Javascript functions that much of this is pre-determined by those methods, and they're stored exactly in the React components in our project where you'd expect them.
React Router
We start the project using React Router in the Application component. We check to see if there is a user being provided by context, and if not we reveal a Switch that shows the SignIn page at the site index /, or the SignUp or PasswordReset pages as appropriate. If there is a user, we simply present a profile page with basic info. I ported in a picture of one of my favorite actors, Brian Cox, for the default image.
How I look when asked to roll my own authentication.
The bulk of the real work in this application happens in two files- the firebase.js file, where we connect to the Firebase servers, authenticate, and either get or create a user document for new users to store additional data like their username, and also in the UserProvider.jsx file, where we create a component to store our React Context, create an app-wide user state, and pass that state to any child components.
We then must export the Provider and import it in the App.js file so that we can wrap our application in it. This creates an app-wide state where the user prop is available everywhere.
After these two crucial pieces are done, our application will be able to actually look for a user in the Application component, which means if we are authenticated, then the user profile page will be shown.
Firebase
As new web developers get going, I cannot imagine there is a better backend technology to start with than Firebase. I have worked with PHP/MySQL before and do like those as a starting place, but Firebase makes all the really hard stuff that you have to do in every other language so easy.
Just take a look at some of the built-in Firebase functions (imported via the npm package) we used in this application.
Some built-in Firebase methods:
*firebase.initializeApp() - this takes in your config data and connects you to the Firebase server.
*firebase.auth() - sets up Firebase authentication
*firebase.firestore() - sets up the NoSQL database
*firebase.auth.GoogleAuthProvider - sets up the standard Google authentication flow as a possible auth route
*firestore.doc() - gets the reference to a specific document from the database given a search parameter as the argument
*firestore.doc().get() - gets all data from the document
*firestore.doc().set() - sets object data for the specified document
*firestore.doc().get().data() - returns all data from a specified document in the database
*firebase.auth().signInWithPopup() - signs in the user in a pop-up window with the method provided as the argument
*firebase.auth().signOut() - signs out the current user
I think you get the picture. Firebase is really easy. Now for three of my favorites:
*firebase.auth.createUserWithEmailAndPassword() - does what it says it does
*firebase.auth.signInWithEmailAndPassword() - does what it says it does
...and the pièce de résistance:
*firebase.auth().sendPasswordResetEmail() - sends the user an email to reset their password if they forgot theirs
No one makes it so easy to get up and running with a secure authentication in so little time. In a coding bootcamp you can spend weeks on authentication. Ultimately, you will need to learn it, but for building applications that are safe as quickly as possible this is a great starting point.
Conclusion
If you want to start building your own web apps and need an authentication system. There's no faster way to do it than Firebase. I have been very pleased with how this is executed with React as well. React Router means we only have to write a couple of pages and store references to the components we need at different URLs in a switch.
I will be using this method again as I continue on down the path building a few React web apps with Firebase backends.
Take a look at the repo and let me know what you think!
Top comments (0)