PD
🧩 Plasmo Developersfrostman

How to adjust the with-firebase-auth to work with Arc (other chromium browsers)

I'm encountering issues with the example for using Firebase Authentication when extending the scope beyond Google Chrome. Has anyone successfully implemented it on other Chromium-based browsers? It appears the problem stems from insufficient SDK support in these browsers. I'm considering either developing my own OAuth popup or experimenting with WebAuthFlow. Has anyone had success with either of these approaches?
frostman
frostman•9d ago
Solved it from the background script like this, works for all Chromium browsers that I have tested: 
import type { PlasmoMessaging } from "@plasmohq/messaging"
import {
    GoogleAuthProvider,
    signInWithCredential,
    signOut,
} from "firebase/auth";
import { app, auth } from "~firebase";

const handleSignIn = async (request, sender) => {
    try {
        const redirectUri = chrome.identity.getRedirectURL();
        const clientId = process.env.PLASMO_PUBLIC_FIREBASE_CLIENT_ID  
        const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=email openid profile`;
    
        return new Promise((resolve, reject) => {
          chrome.identity.launchWebAuthFlow({
            url: authUrl,
            interactive: true,
          }, (redirectUrl) => {
            if (chrome.runtime.lastError || !redirectUrl) {
              reject(new Error("WebAuthFlow failed: " + chrome.runtime.lastError.message));
              return;
            }
            const params = new URLSearchParams(new URL(redirectUrl).hash.substring(1));
            const accessToken = params.get('access_token');
            const credential = GoogleAuthProvider.credential(null, accessToken);
            
            signInWithCredential(auth, credential).then((userCredential) => {
              resolve(userCredential.user);
            }).catch((error) => {
              reject(new Error("Firebase signInWithCredential failed: " + error.message));
            });
          });
        });
      } catch (e) {
        throw new Error("Sign-in failed: " + e.message);
      }
};


const handleSignOut = async (request, sender) => {
    try {
        await signOut(auth);
        return "Signed out successfully.";
      } catch (e) {
        throw new Error("Sign-out failed: " + e.message);
      }
};

const getUser = async (request, sender) => {
    return auth.currentUser;
}
import type { PlasmoMessaging } from "@plasmohq/messaging"
import {
    GoogleAuthProvider,
    signInWithCredential,
    signOut,
} from "firebase/auth";
import { app, auth } from "~firebase";

const handleSignIn = async (request, sender) => {
    try {
        const redirectUri = chrome.identity.getRedirectURL();
        const clientId = process.env.PLASMO_PUBLIC_FIREBASE_CLIENT_ID  
        const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=email openid profile`;
    
        return new Promise((resolve, reject) => {
          chrome.identity.launchWebAuthFlow({
            url: authUrl,
            interactive: true,
          }, (redirectUrl) => {
            if (chrome.runtime.lastError || !redirectUrl) {
              reject(new Error("WebAuthFlow failed: " + chrome.runtime.lastError.message));
              return;
            }
            const params = new URLSearchParams(new URL(redirectUrl).hash.substring(1));
            const accessToken = params.get('access_token');
            const credential = GoogleAuthProvider.credential(null, accessToken);
            
            signInWithCredential(auth, credential).then((userCredential) => {
              resolve(userCredential.user);
            }).catch((error) => {
              reject(new Error("Firebase signInWithCredential failed: " + error.message));
            });
          });
        });
      } catch (e) {
        throw new Error("Sign-in failed: " + e.message);
      }
};


const handleSignOut = async (request, sender) => {
    try {
        await signOut(auth);
        return "Signed out successfully.";
      } catch (e) {
        throw new Error("Sign-out failed: " + e.message);
      }
};

const getUser = async (request, sender) => {
    return auth.currentUser;
}
Want results from more Discord servers?
Add your server
More Posts
How to create a new tab from a router?Given an index.tsx: ex. import { Route, Routes } from "react-router-dom" import { Login } from "~Can a Browser Extension look like Apple's Dynamic Island?I've never built a browser extension, but I had an inkling of a UI idea to build something akin to hHow do you debug a problem when yarn dev just exits?I've got a bug where when I run yarn dev, it exists without printing anything useful: (base) james@just out of curiosity, where does the storage live?why does it work? i cannot find any cookie or localstorage where the keys i setup from plasmo are, iSend data from content script or popup to main content script.I want to manipulate some dom items on the main world, how do I send a message from my popup or my oLoading a content script on a specific tabHowdy folks, I'm wanting to explicitly load a content script on a specific tab, so it doesn't interf