Creating a React — Firebase Context with Social media authentications.

Part 5 — Wrapping up!

So, if you are here, it means this series has been useful and you want to see the end, right?

If you are new, let’s recap:

Part 1: https://adaonatalino.medium.com/creating-a-react-firebase-context-with-social-media-authentications-4e4101f6dcdb

Part 2: https://adaonatalino.medium.com/creating-a-react-firebase-context-with-social-media-authentications-e08c4abce350?source=your_stories_page-------------------------------------

Part 3: https://adaonatalino.medium.com/creating-a-react-firebase-context-with-social-media-authentications-96784f1110c2

Part 4: https://adaonatalino.medium.com/creating-a-react-firebase-context-with-social-media-authentications-2d006b5f9ec6

So now, let’s dive into the LoginWithSocialMedia component:

This component is basically getting the StyledFirebaseAuth from the dependency we have and checking if we have a current user / token for our application (using the custom hook for the context), if yes, then we redirect to the dashboard, if not, we render the social media login component.

The StyledFirebasAuth takes 2 properties, one is the uiConfig (remember we exported this config in the firebase.js file) and the other is auth function the firebase gives us.

The flow is popup, so a new window will popup for the user to login with the options:

Because we have onAuthStateChanged connected with our context, we receive the token, it will automatically update (because we set useEffect to run every time the component has an update — no dependencies to watch) the user and redirect to the dashboard:

And that is it! We’ve finished our firebase — social media application, easy right?

I hope it you enjoyed, and I’ll see you next week with a new topic to share and discuss!