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:
![No description](https://cdn.answeroverflow.com/1118780630067580928/Screenshot_2023-06-15_at_11.20.44_AM.png)
@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)
![No description](https://cdn.answeroverflow.com/1118785230950637578/Screenshot_2023-06-15_at_11.38.32_AM.png)
![No description](https://cdn.answeroverflow.com/1118785231420411944/Screenshot_2023-06-15_at_11.42.18_AM.png)
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 π
![No description](https://cdn.answeroverflow.com/1119153272570257468/Screenshot_2023-06-16_at_11.49.34_AM.png)
![No description](https://cdn.answeroverflow.com/1119153272939352064/image.png)
![No description](https://cdn.answeroverflow.com/1119153273287483392/Screenshot_2023-06-16_at_12.03.35_PM.png)
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 ππ» ?