Creating a React — Firebase Context with Social media authentications.
Part 3
Welcome to the third part of this series where we are learning how to create and set up a React App with social media authentications. If you missed the first 2 instalments, here they are:
With our app set up at this point, let’s dive into coding!
We are going to use a React Context hook to give to our entire application access to the current user, as well as all the important functions that we need. The good thing about using Firebase for all of them is that the functions are generics, which means we just need one login function, one log out, etc. (if you mix the providers, such as Auth0 for example you may have to create one for each of your social media authentications providers).
The other benefit of this code is that we are going to have one single source of truth, so if you ever need to change your functions or switch the provider, it’s going to be easy and fast to do so.
Let’s create our AuthContext.js:
We are importing all the hooks that we need here, at the top, and essentially, this context created will wrap the app (it’s children) giving it all the props we are passing as a value property.
Note that I am not exporting as default, because I also have a custom hook to access this context anywhere else later on (the useAuth function).
Confused?
Please refer to Context API docs: https://reactjs.org/docs/context.html#api
So, wrapping App.js:
Following the Firebase docs, let’s create those important functions:
We now need to pass them as a value:
Where is the current user coming from???
Exactly, currentUser and setCurrentUser are a piece of state to manage, guess what? The current user:
The loading state is to now have any errors trying to render the app while still waiting for the result of the Promise (login or checking the token).
Docs: https://firebase.google.com/docs/auth/web/manage-users
Firebase has a really nice and easy way of handling token checks, promises results and authentication all built in one single method, onAuthStateChanged.
How they recommend:
So, all we need to do is use this method when the component mounts and when the component unmounts:
Confused about useEffect ? Check the docs and the examples:
https://reactjs.org/docs/hooks-reference.html#useeffect
Now, our entire AuthContext.js:
That’s all we need for the context API. Look how clean and reusable our component is now, easy to maintain, and if you ever need to change any function, it’s all here on this file.
Next instalment we will finally put something on screen and have some styled components.
See you next week!
