firebase auth in mv3 made my life a joke
hey fam, I hope @everyone is doing great.
i'm stuck in a loop of trying for the past full week, i have questioned my life 🥹, I'm so frustrated at this point , it made me feel my life is a joke as a dev. 😭
I would really appreciate if someone can hop on a quick chat, i'll share the code. I have beaten my head so much, i can just pay for this. I tweeted the founder & he sent me here. Please help, thanks 🙂
i have a sidebar which toggles instead of the popup, my points:
- i have to do auth in a new react page (not a website but within extension)
- the user clicks login & it shall just work persisting the auth state in the sidebar showing the logged status.
- I have tried the with-firebase-auth example, the blog post (https://www.plasmo.com/blog/posts/firebase-chrome-extension) but doesn't work, I currently get the error response:
{message: 'OAuth2 not granted or revoked.'}
- tech stack: plasmo, ts, react.Firebase Authentication with React in an MV3 Chrome Extension
Diving deep into everything you need to make Firebase Auth work with your MV3 Chrome Extension
8 Replies
OAuth2 not granted or revoked.Do you have your OAuth client configured properly and linked with your firebase project?
thanks @louisgv for the response.
what are the checkboxes needed ticked for this? please mention all possible.
i followed all steps correctly in the blog post (https://www.plasmo.com/blog/posts/firebase-chrome-extension).
my extension is live, so I added it's key(last part of the url) too in package.json's manifest.
also, here's a ss of my google cloud console, ig this says that I have linked it correctly with firebase:
@sujantkumarkv has reached level 1. GG!
That's the GCP oauth client, did you link it on firebase?
Specifically Step 9 in the guide
you mean this in firebase right? yes i got the client ID in GCP after putting in the application ID (again, my extension is live so I put the last part of webstore's url as shown in pic as well)
Oh if you wanna test with your production extension ID, you will need to fetch the public key and set it in your local manifest: https://developer.chrome.com/docs/extensions/mv3/manifest/key/
Otherwise, locally you will get a different extension ID, to which you will need to setup a separate OAuth client
okay i tried, it doesn't work 🥹
- while adding in safelist client ID in step 9, there's other fields for webSDK which I notice got filled up on their own in the pic.
- i also tried the 2nd approach adding, "chrome://extension-id" adding all possible IDs.
- ONE THING which i noticed is, on building the extension repititively, i get this ID as in 3rd pic, different. There are so many IDs, i'm confused which one belongs where & how to use, can you please guide me for this to any resource?
i'm really sick of trying & banging my head on wall haha for a week, @everyone's help is really appreciated 💙
one more imp point, my code fails here in the service worker index.ts file: and get the error
"Could not get token in the service worker":
chrome.runtime.onMessage.addListener( async function (
request,
sender,
sendResponse
) {
console.log(request)
if (request.type === "startAuth") {
chrome.identity.getAuthToken(
{ interactive: true },
async function (token) {
if (token) {
chrome.runtime.sendMessage({
type: "authTokenSuccess",
token: token
})
console.log("token sent to custom hook")
}
else if (chrome.runtime.lastError || !token) {
console.log("Could not get token in the service worker")
chrome.runtime.sendMessage({
type: "authTokenError",
error: chrome.runtime.lastError
})
return
}
...
hey @everyone, can someone help on this please 🙏🏻 ?