We're writing this guide because the official one by Google is missing a few important steps, linked below:
Official Google guide: Authe...
For further actions, you may consider blocking this person and/or reporting abuse
Hi and thanks for the detailed instructions. I followed instructions step by step but at the end when clicking on 'sign in' button nothing happens. And I don't get any error. Does this approach need Key and if yes is it public key? What about chrome identity API for extension?
Hi, yes you need a public key from your extension in the Chrome web store. Sorry I will update the instructions and thank you for bringing it to my attention.
You can find your public key in the Chrome Web Store Developer Dashboard -> In the left hand menu under the Build section click Package -> Then click Public Key and copy the text in between the two '-----BEGIN PUBLIC KEY----- ' lines and paste into the manifest file where I've written 'YOURPUBLICKEY' it needs to go in between the two '/n' statements so just replace the 'YOURPUBLICKEY' text exactly.
Yes the Chrome Identity Api is needed for the oauth tokens, just make sure it's in your permissions sections of the manifest file as I've written it there. Hope that helps!
Thanks for clarification. I haven't uploaded my extension to chrome store yet and still playing with it locally by loading package in developer mode. Do I have to upload to Chrome web store to get the public key? I have found some tutorials how to extract private and public key by using npm and running cmd and generating public key. So do I have to upload my extension to chrome web store first?
Thanks again for bringing it to my attention I've just added in another crucial step and sorry I missed it earlier. Please see step 4 and create an OAuth Client ID. It might work locally after that and updating your manifest file? I haven't tried without uploading to the Chrome web store yet and yes to get the public key you will need to upload it there, even in testing mode it will give you a public key.
Also for Firebase you would need the extension ID which you get by uploading to the Chrome web store, it doesn't have to be published yet, it will work in testing mode. Please let me know if you're still having issues I'll update the guide accordingly.
Hi @lvn1,
Thank you for the post. The login worked following your tutorial! The only concern I have is the apiKey is exposed on the hosted frontend app and is also returned with the firebase response. This seems like a security vulnerability which can be badly exploited. Am I missing something? Can you please advise on how to avoid this?
Hi @ppri, you're welcome and glad to hear it worked! Thank you for bringing up this important security concern. It's true that the Firebase configuration, including the API key, is visible in the client-side code. However, this is actually by design and not considered a significant security risk by Firebase. In the official docs: Firebase-related APIs use API keys only to identify the Firebase project or app, not for authorization
The API key you see is a project-specific public key. It's primarily used to identify your Firebase project with Google's servers. It's not a secret and doesn't grant unauthorised access to your database or project.
There are some additional security measures which can be enabled:
Restrict API Key Usage: In the Google Cloud Console, you can restrict the API key to only work for specific websites or IP addresses.
Use App Check: For additional security, especially in extensions, consider implementing Firebase App Check to ensure that any requests to your API are actually coming from your app.
While it may seem counterintuitive, exposing the Firebase config in your client-side code is a standard practice and doesn't compromise your app's security when proper measures are in place.
@lvn1 Once the sign in is working, how can we write to the database?
PS: Thank you for this INCREDIBLY helpful tutorial! I only ran in to a few issues which were solved in the comments :)
Thank you very much, it worked with your guide and comments for debugging!
Hello!
I followed your steps but i encountered some issues and i would like your help
patterns: [{ from: "./public/" }]topatterns: [{ from: path.join(__dirname, "src", "public") }]because it couldnt find the public folder."key": "-----BEGIN PUBLIC KEY-----\nasdasdasdsad\n-----END PUBLIC KEY-----" this must be added after we upload thezip file to google web storecannot be put before uploading the zip file at chrome web store ( step 5 ) because chrome web store automatically creates the key. After you upload the zip file you can add it to your codei added in webpack.config
devtool: "cheap-module-source-map", // Use a different devtool that doesn't use eval@deepblue597 I also had the same problem. Thanks for the steps you shared.
After following your recommendations, in firebase-project/public/signInWithPopup.js, I replaced:
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
With:
import { initializeApp } from 'gstatic.com/firebasejs/11.0.2/fire...';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'gstatic.com/firebasejs/11.0.2/fire...';
That worked for me. Let me know if it worked for you?
My next issue is, how do I write to the database once logged in?
Hi i have the same issue did you find any solution ?