How to keep Chrome Extension popup open during Google login with launchWebAuthFlow?

[Interview-Prep1]

Body

I'm using chrome.identity.launchWebAuthFlow() in my Chrome Extension popup to log in users with Google (via Supabase).
Project created in React

The problem is: when i click on the "Continue with Google" button the popup closes automatically after the user picks a Google account. I want to keep the popup open so I can show the next page (/premiumUser or /freeUser) after login.

When i choose the Account for Login then this page close and the extension also close but i want to show the next page after login but the extension will close.

Is there any way to prevent the popup from closing, or is it better to open a separate tab or window for login?

Below is the Code:
` const handleGoogleLogin = async () => {
const manifest = chrome.runtime.getManifest();
const url = new URL('https://accounts.google.com/o/oauth2/auth');

url.searchParams.set('client_id', manifest.oauth2.client_id);
url.searchParams.set('response_type', 'id_token');
url.searchParams.set('access_type', 'offline');
url.searchParams.set('redirect_uri', https://${chrome.runtime.id}.chromiumapp.org);
url.searchParams.set('scope', manifest.oauth2.scopes.join(' '));
url.searchParams.set('prompt', 'select_account'); // 👈 this forces account picker

chrome.identity.launchWebAuthFlow(
{
url: url.href,
interactive: true,
},
async (redirectedTo) => {
if (chrome.runtime.lastError || !redirectedTo) {
console.error('Google login failed:', chrome.runtime.lastError?.message);
setToast({ message: 'Google login failed. Please try again.', type: 'error' });
return;
}

  const redirectedURL = new URL(redirectedTo);
  const params = new URLSearchParams(redirectedURL.hash.substring(1));
  const idToken = params.get('id_token');

  if (!idToken) {
    setToast({ message: 'No ID token found. Please try again.', type: 'error' });
    return;
  }

  const { data, error } = await supabase.auth.signInWithIdToken({
    provider: 'google',
    token: idToken,
  });

  if (error) {
    console.error('Supabase login failed:', error.message);
    setToast({ message: 'Supabase login failed. Please try again.', type: 'error' });
    return;
  }

  // ✅ Fetch the session again to get full user info
  const { data: sessionData, error: sessionError } = await supabase.auth.getSession();
  if (sessionError || !sessionData.session) {
    setToast({ message: 'Failed to retrieve session.', type: 'error' });
    return;
  }

  const user = sessionData.session.user;

  // ✅ Fetch user profile to check premium status
  const { data: profile, error: profileError } = await supabase
    .from('user_profiles')
    .select('is_premium')
    .eq('user_id', user.id)
    .single();

  if (profileError || !profile) {
    setToast({ message: 'Could not fetch user profile.', type: 'error' });
    return;
  }

  dispatch(loginSuccess({
    user: user,
    token: sessionData.session.access_token,
    isPremium: profile.is_premium,
  }));

  setToast({ message: 'Login successful!', type: 'success' });

  // ✅ Navigate based on premium status
  navigate(profile.is_premium ? '/premiumUser' : '/freeUser');
}

);
};
`

Guidelines

• I have read and understood this category's guidelines before making this post.

[nakiviar]

Hey there,

I ran into the same thing—Chrome extension popups just can’t stay open once launchWebAuthFlow completes. As soon as the OAuth redirect comes back to your extension’s URI, Chrome auto-closes the popup. It’s not a bug in your code, it’s just how popups behave.

I ended up solving it by moving the actual “what happens after login” logic out of the popup and into a background script, then storing the result in chrome.storage. In my popup’s React component I do something like:

useEffect(() => {
  chrome.storage.local.get('user', ({ user }) => {
    if (user) {
      navigate(user.isPremium ? '/premiumUser' : '/freeUser');
    }
  });
}, []);

And right after I sign in with Supabase, I save the profile:

chrome.storage.local.set({
  user: {
    id: user.id,
    isPremium: profile.is_premium,
    accessToken: sessionData.session.access_token,
  }
});

That way, even if the popup closes during the OAuth dance, the next time it re-opens it sees “oh, I’m logged in” and immediately redirects.

Alternatively, you can bypass the popup entirely for auth and open a normal tab (or window) for Google sign-in. That tab redirects back to your extension (or a small HTML page you host), and then you message the background script to stash the token—again, the popup stays out of it and never needs to hang around for the redirect.

Hope that helps! Let me know if you want a code snippet for the “open a new tab for auth” approach.

[Interview-Prep1]

Thanks @nakiviar for help!
I have updated the code like can you please give a code snippet for the “open a new tab for auth” approach. I don't get the solution if you help me more for this..

this is also in the Login.jsx page:
useEffect(() => {
chrome.storage.local.get('user', ({ user }) => {
if (user) {
navigate(user.isPremium ? '/premiumUser' : '/freeUser');
}
});
}, []);

Google Login function Code:

const handleGoogleLogin = async () => {

url.searchParams.set('client_id', manifest.oauth2.client_id);
...
url.searchParams.set('prompt', 'select_account'); // 👈 this forces account picker
chrome.identity.launchWebAuthFlow(
{
url: url.href,
interactive: true,
},
......
dispatch(loginSuccess({
user: user,
token: sessionData.session.access_token,
isPremium: profile.is_premium,
}));
//Here i added
chrome.storage.local.set({
user: {
id: user.id,
isPremium: profile.is_premium,
accessToken: data.session?.access_token,
}
});
setToast({ message: 'Login successful!', type: 'success' });
// ✅ Navigate based on premium status
// navigate(profile.is_premium ? '/premiumUser' : '/freeUser');
}
);
};

[nakiviar]

Hi @Interview-Prep1,

Below is a self-contained example of how to replace your chrome.identity.launchWebAuthFlow call with an “open a new tab” flow. Drop this into your Login.jsx in place of the existing handleGoogleLogin:

const handleGoogleLogin = async () => {
  const manifest = chrome.runtime.getManifest();
  // Build the Google OAuth2 URL
  const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth');
  authUrl.searchParams.set('client_id', manifest.oauth2.client_id);
  authUrl.searchParams.set('response_type', 'id_token');
  authUrl.searchParams.set('scope', manifest.oauth2.scopes.join(' '));
  authUrl.searchParams.set('redirect_uri', `https://${chrome.runtime.id}.chromiumapp.org/`);
  authUrl.searchParams.set('prompt', 'select_account');

  // 1) Open a new browser tab for the OAuth flow
  chrome.tabs.create({ url: authUrl.href }, (tab) => {
    const authTabId = tab.id;

    // 2) Listen for the redirect back to our extension URI
    const onUpdated = (tabId, changeInfo) => {
      if (
        tabId === authTabId &&
        changeInfo.url?.startsWith(`https://${chrome.runtime.id}.chromiumapp.org/`)
      ) {
        // Stop listening and close the tab
        chrome.tabs.onUpdated.removeListener(onUpdated);
        chrome.tabs.remove(authTabId);

        // 3) Parse the id_token from the URL fragment
        const url = new URL(changeInfo.url);
        const params = new URLSearchParams(url.hash.slice(1));
        const idToken = params.get('id_token');
        if (!idToken) {
          console.error('No id_token found in redirect URI');
          return;
        }

        // 4) Sign in with Supabase using the ID token
        supabase.auth
          .signInWithIdToken({ provider: 'google', token: idToken })
          .then(async ({ data, error }) => {
            if (error) throw error;

            // Fetch session and user profile
            const { data: sessionData } = await supabase.auth.getSession();
            const { data: profile } = await supabase
              .from('user_profiles')
              .select('is_premium')
              .eq('user_id', sessionData.session.user.id)
              .single();

            // Dispatch Redux action
            dispatch(loginSuccess({
              user: sessionData.session.user,
              token: sessionData.session.access_token,
              isPremium: profile.is_premium,
            }));

            // 5) Persist to chrome.storage for your useEffect listener
            chrome.storage.local.set({
              user: {
                id: sessionData.session.user.id,
                isPremium: profile.is_premium,
                accessToken: sessionData.session.access_token,
              }
            });
            setToast({ message: 'Login successful!', type: 'success' });
          })
          .catch((err) => {
            console.error('Supabase login failed:', err.message);
            setToast({ message: 'Login failed', type: 'error' });
          });
      }
    };

    chrome.tabs.onUpdated.addListener(onUpdated);
  });
};

---

Key steps explained:

1. Open a new tab (chrome.tabs.create) instead of using launchWebAuthFlow.
2. Listen for URL changes in that tab with chrome.tabs.onUpdated.
3. When you detect your extension’s registered redirect URI, remove the listener and close the tab.
4. Extract the id_token from the URL fragment (#id_token=…).
5. Sign in to Supabase with supabase.auth.signInWithIdToken, then fetch the session and user profile.
6. Store the resulting user object in chrome.storage.local so that your existing useEffect will automatically navigate to /premiumUser or /freeUser.

Let me know if you need any more tweaks!

[Interview-Prep1]

yes, i have try this handleGoogleLogin but i was getting.

then i add this line authUrl.searchParams.set('nonce', crypto.randomUUID()); in the handleGoogleLogin function and it shows the google accounts page.

When i choose the Google account it shows this on the page.

I have also take help from the Chatgpt but after so many work i still don't solve this.

[nakiviar]

Think of a Chrome‑extension popup like a soap bubble: the moment you look away—click anywhere outside—it pops. That auto‑close behavior is hard‑wired into the browser, so there’s no secret flag or hack that can keep the popup around. (Stack Overflow)

How people dodge the problem

1. Run Google sign‑in somewhere that can actually stay open.

• Open a regular tab with chrome.tabs.create(). Listen for chrome.tabs.onUpdated, grab the id_token from the redirect URL, finish your Supabase login, then close the tab.
• Or let your background/service‑worker handle chrome.identity.launchWebAuthFlow. The worker outlives the popup, so the OAuth dance can complete even if the user never notices. ([Chrome for Developers]2, [Chrome for Developers]3)

2. Persist the outcome.
As soon as you have the user’s info, stash something like { isPremium: true/false } in chrome.storage.local. That storage is available to every part of the extension and survives browser restarts. ([Chrome for Developers]4)

3. Let the popup pick up where it left off.
Each time the popup mounts, read the saved value and route the user straight to /premiumUser or /freeUser. Now the popup doesn’t care whether it vanished during login—when it comes back, it just checks storage and shows the right screen.

My two cents: opening a normal tab (option 1) is usually the easiest to debug and has fewer Manifest V3 quirks than juggling service‑worker events.

Crack those open in separate tabs and you’ll have step‑by‑step examples for every API involved.