Social login in web extensions

[connorlindsey]

I'm building a chrome extension with Supabase and was wondering how to login using Google in a chrome extension. For context, I have a working Next.js app using Supabase in API routes. I can log in using email/password but not Google.

Attempt 1 - copy code from Next app

When I call signIn({ provider: "google" }) in the extension, nothing happens - the error, session, etc. returned by the function is all null (exact same code that's working in the Next app).

Attempt 2 - Chrome App credentials

Reading more into it, it looks like I need another set of credentials, so I created new ones but for a 'Chrome app' instead of a web app in the Google developer console. I added those credentials to manifest.json and use the chrome identity api to get an access token like chrome.identity.getAuthToken({ interactive: true }), (token) => {})

This was based on a Firebase article.

My question now is, how do I log in with Supabase using the access token I have? I've tried using auth.setAuth(token) which sets the acces_token but doesn't return the user.

Guessing this may not work since they're different google oauth clients.

Maybe chrome.identity.launchWebAuthFlow could work with the supabase oauth flow

Any direction would be greatly appreciated.

[Galz648]

.

[der-ofenmeister]

@connorlindsey yes, you need to use chrome.identity.launchWebAuthFlow

Basically, you need to create an extension redirect uri (by calling the chrome.identity.getRedirectURL()) method and add that to your supabase auth settings list of urls.
That fetches you a bunch of stuff including access_token, refresh_token, etc. Use the refresh_token and invoke supabase.auth.signIn() with that.

Here's a sample login function for reference.

You can obviously make a React hook by wrapping this inside a useEffect and adding some loading, error states and whatnot.

Hope this helps you guys out! ✌️

[wd021]

can this be done silently? i don't want users to have to authenticate twice (web app + again in extension). if you sign in on web and then use chrome.identity.launchWebAuthFlow, does it complete without user interaction?

[der-ofenmeister]

Not very sure, but you should be able to use the onAuthStateChanged or onMessageExternal methods and pass your token from the webapp.

[connorlindsey]

@der-ofenmeister See my comment below as that's what I'm doing, sending onMessageExternal and handling all auth through web app. This appears to work correctly but often leads to weird, conflicting auth states.

[DennisKo]

I have found this answer is this working for you locally while developing?

Is it normal that the redirectUrl is an external URL? How do you deal with that while developing?

I get to the point where I get redirected to https://myext-id.chromiumapp.org/#access_token=xx&refresh_token. But then what? For me, this just results in a This site can’t be reached error page. How do I process those?

[thorwebdev]

Another possible approach is popup with your website login interface, and then communicating the access token to the extension with chrome.runtime.onMessageExternal.

[cguagenti]

That would be great, thanks @connorlindsey!

I'm taking another route for now; I switched to Next-Auth.js with the Supabase adapter and issued a long expiry token so I don't need to refresh/re-login it every time. Still not the best but is acceptable with the goal of the project.

NextAuth + Supabase

Tested and working with Next.js 13, but unstable with app dir.

[henningko]

@connorlindsey Hitting the same issues—did you get yours to stay logged in reliably? If so, how?

[connorlindsey]

I scrapped all of the session syncing I was trying to do and just built sign in directly in the extension. Email + password works the same as in a web app.

For social login (with Google), I followed these suggestions and it works well: #5787 (comment)

So thanks to @der-ofenmeister!

[henningko]

Ah, thanks for replying so quickly. Are you syncing between popup/background script/content script, or does your extension live purely in a popup/tab?

[connorlindsey]

I use popup, background script, and content script. Everything gets triggered from the popup though, so I can pass the token or whatever I need from auth to the other parts of the extension.

[Henry-Pulver]

Thank you @der-ofenmeister and @connorlindsey - found this question & answer very helpful 🙏

Wanted to add that we (& our users) were frustrated with having the auth flow open in a popup, rather than in another tab where you can select between currently-signed-in accounts in 1 click instead of entering email and password in full.

Have solved this so wanted to share here in case it might be useful to others.

Below is a version of @der-ofenmeister's code that also takes from this SO answer. This requires the tabs permission.
(It's got some type hints in there - remove if you're not using typescript.)

Hope it's useful 😄

export const extensionSupabaseLogin = async () => {
  const redirectUri = chrome.identity.getRedirectURL('supabase-auth');
  const options = {
    provider: 'google',
    redirect_to: redirectUri,
    ux_mode: 'redirect',
  };
  const url = `${SUPABASE_URL}/auth/v1/authorize?${stringify(options)}`;

  const originalTab = (await chrome.tabs.query({active: true, currentWindow: true}))[0];
  const authenticationTab = await chrome.tabs.create({ url: 'about:blank' });
  chrome.tabs.onUpdated.addListener(function googleAuthorizationHook(
    tabId,
    changeInfo,
    tab
  ) {
    if (
      tabId === authenticationTab.id &&
      tab.url?.startsWith(redirectUri)
    ) {
      const splitUrl = tab.url?.split('#')[1];
      // Prompt user to sign in again if unparsable (error)
      if (!splitUrl) {
        console.error('Unparsable sign-in URL', tab.url);
        return;
      }
      // Parse tokens from URL
      const authResult = parse(splitUrl);
      const refreshToken = authResult.refresh_token as string;
      const accessToken = authResult.access_token as string;

      // Prompt user to sign in again if no access_token (error)
      if (!refreshToken || !accessToken) {
        console.error('No access token or refresh token returned', authResult);
        return;
      }

      (async () => {
        const { error } = await supabase.auth.setSession({
          access_token: accessToken,
          refresh_token: refreshToken,
        });
        if (error) console.error(error);
      })();

      chrome.tabs.onUpdated.removeListener(googleAuthorizationHook);
      chrome.tabs.remove(tabId);
      if (originalTab?.id) chrome.tabs.update(originalTab.id, { active: true });
    }
  });
  // Send them to the sign-in flow!
  await chrome.tabs.update(authenticationTab.id, { url: url });
};

[kyegomez]

What version of supabase are you using inside the browser? @supabase/supabase-js and what is the boilerplate for initialization

[kyegomez]

And what would a middleware function that periodically checks to see if a user is signed in would look like? Would the code go in the background script?

background.ts

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'signIn') {
    extensionSupabaseLogin();
  }
});

const isAuthenticated = async () => {
  // const user = supabase.auth.user();
  const user = await supabase
      .from('Account')
      .select('userId')
      .eq('userId')
  return user !== null;
};

///////////////////////====================================> ERROR




export const setupAuthListener = async () => {
  supabase.auth.onAuthStateChange(async (event, session) => {
    if (event === 'SIGNED_IN' || event === 'USER_UPDATED') {
      //this user has just signed in or their session has been updated
      console.log('user is signed in :', session);
    } else if (event === 'SIGNED_OUT' || event === 'USER_DELETED') {
      //the user has just signed out or their account has been deleetd
      console.log('user is signed out')
    }
  })
}

setupAuthListener();

supabase.ts

import qs from "qs";
// import supabase from '@supabase/supabase-js';

import { createClient } from "@supabase/supabase-js";
import * as dotenv from 'dotenv';


dotenv.config();

/////////[-=========================> add in real keys in env]
const supaurl = process.env.SUPABASE_URL;
const supaANONKey = process.env.SUPABASE_ANON_KEY;
const supabase = createClient(supaurl, supaANONKey, {
  global: {
    fetch: (...args) => fetch(...args),
  },
});


export const extensionSupabaseLogin = async () => {
    const supabaseUrl= process.env.SUPABASE_URL
    const redirectUri = chrome.identity.getRedirectURL('supabase-auth');
    const options = {
      provider: 'google',
      redirect_to: redirectUri,
      ux_mode: 'redirect',
    };
    const url = `${supabaseUrl}/auth/v1/authorize?${qs.stringify(options)}`;
  
    const originalTab = (await chrome.tabs.query({active: true, currentWindow: true}))[0];
    const authenticationTab = await chrome.tabs.create({ url: 'about:blank' });
    chrome.tabs.onUpdated.addListener(function googleAuthorizationHook(
      tabId,
      changeInfo,
      tab
    ) {
      if (
        tabId === authenticationTab.id &&
        tab.url?.startsWith(redirectUri)
      ) {
        const splitUrl = tab.url?.split('#')[1];
        // Prompt user to sign in again if unparsable (error)
        if (!splitUrl) {
          console.error('Unparsable sign-in URL', tab.url);
          return;
        }
        // Parse tokens from URL
        const authResult = qs.parse(splitUrl);
        const refreshToken = authResult.refresh_token as string;
        const accessToken = authResult.access_token as string;
  
        // Prompt user to sign in again if no access_token (error)
        if (!refreshToken || !accessToken) {
          console.error('No access token or refresh token returned', authResult);
          return;
        }
  
        (async () => {
          const { error } = await supabase.auth.setSession({
            access_token: accessToken,
            refresh_token: refreshToken,
          });
          if (error) console.error(error);
        })();
  
        chrome.tabs.onUpdated.removeListener(googleAuthorizationHook);
        chrome.tabs.remove(tabId);
        if (originalTab?.id) chrome.tabs.update(originalTab.id, { active: true });
      }
    });
    // Send them to the sign-in flow!
    await chrome.tabs.update(authenticationTab.id, { url: url });
};

[Henry-Pulver]

Sorry for being slow to reply!

What version of supabase are you using inside the browser? @supabase/supabase-js

Yep, @supabase/supabase-js, version ^2.7.1

what is the boilerplate for initialization

All your code looks right to me, assuming supabase.ts is also imported from background.ts. Does it not work?

[remusris]

Plasmo has a write up for an easy supabase auth integration, but it doesn't seem like the auth state persists after logging in. Plasmo does support nextJS, so maybe there's a way of using the method that worked in NextJS in the NextJS - Plasmo integration.

https://docs.plasmo.com/quickstarts/with-supabase

[michaeleliot]

For anyone struggling with this, this write up worked for me:

https://gourav.io/blog/supabase-auth-chrome-extension

[abhishekmg]

was stuck in this for a few days till I came across the above write up !

[malay9418]

For anyone struggling with this, this write up worked for me:

https://gourav.io/blog/supabase-auth-chrome-extension

make it with step by step guide