Firebase social auth with latest SDK 9
About three weeks ago, I updated all packages in a project I was working on and naively pushed to my main branch on Github, hoping those breaking changes can be fixed within hours, unfortunately, I was able to fix some packages, but these two ‘firebase’ and ‘firebase-admin’ refused to gel. At some point, I thought of rolling back to the previous commit, but then I said to myself this won’t take long, fortunately things went well after a long time.
In this tutorial, we’ll be working on adding firebase authentication (Facebook, Twitter, and Google) using “firebase”: “9.6.5” and “firebase-admin”: “10.0.2” respectively. Though it's the easiest form of Social Auth you can find on the web, it took me a while to get things up and running. So this GitHub repo will serve as a way for developers to skip the long process, without using a third-party library or package, that you have limited control over, and give you sufficient time to focus on the useful part of your app. If you notice, FirebaseUI (a popular library for Firebase) has not been updated and so is not compatible with the v9 modular SDK. The v9 compatibility layer (specifically, the app-compat and auth-compat packages) permits the usage of FirebaseUI alongside v9, but without the app size reduction and other benefits of the v9 SDK.
It is necessary you understand JavaScript, React and a bit of Firebase to follow through, also you’ll create a developer account with the following providers and then a project in both Facebook for developers and Twitter for developers, while Google can be enabled from your firebase project, click on the Authentication icon, then Sign-in method and enable google and other providers (Facebook and Twitter) you’ll be using.
After that clone my Next.js starter template by running
git clone https://github.com/viewcrunch/NextJs-starter-template.gitnpm i // install all packages in package.json in the root foldernpm run dev // start development server locallygit remote set-url origin https://github.com/viewcrunch/Firebase-Auth.git // update origin url to your current repo
By default, One account per email address is enabled in Firebase and we’ll stick to that. Also don’t forget to update your Authorized domains by adding your custom domain, by default you already have localhost, <project name>.firebaseapp.com and <project name>.web.app.
Now let’s move to the actual code
Your keys should be visible only to you and not to the public. To get your project key in your firebase console, click on ‘Project settings’ icon, then ‘General’, now scroll down to ‘SDK setup and configuration’ and click on config, copy the ‘firebaseConfig’ object and convert it to JSON, then paste it in your .env.local, this file should be at the root of the project and is not visible in Github repo because I’ve added it to the projects .gitignore
NEXT_PUBLIC_CLIENT = {"apiKey": "***********************************","authDomain": "***********************************","projectId": "***********************************","storageBucket": "***********************************","messagingSenderId": "***********************************","appId": "***********************************","databaseURL": "***********************************","measurementId": "***********************************"}
I use vertical for hosting and there’s actually a size limit on environment variables, to avoid all the long configurations, I usually save my private keys as a single JSON file and then I destructure the JSON object when a specific key is needed. Add NEXT_PUBLIC_CLIENT and NEXT_PUBLIC_SERVER to your environment variables. You can get your Server keys by visiting Service accounts in projects settings. If you use vertical for hosting, check the box to Automatically expose System Environment Variables, else the client won’t access your environment variables.
Once all that is done, we’ll install Firebase both client and admin SDK by running
npm i firebase@^9.6.5 firebase-admin@^10.0.2Now we’ll create a file utils/firebaseClient.js
After that, we’ll create another file utils/firebaseServer.js for admin privilege
Next up, we’ll install ‘js-cookie’, to help us manage cookies
npm i js-cookie@^3.0.1create another file in utils > userControl.js
We created similar components to the one below for Facebook and Google.
useEffect to detect if user has signed in
logoutHandler in Auth Container
authUser in Auth Container
You can find the full source code here in my repo.
More content at PlainEnglish.io.
Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.
