Session

We're not implementing fully-featured auth flow in the extension. Instead, we're sharing the same auth session with the web app.

It's a common practice in the industry used e.g. by Notion and Google Workspace.

That way, when the user is signed in to the web app, the extension can use the same session to authenticate the user, so he doesn't have to sign in again. Also signing out from the extension will affect both platforms.

Cookies

When the user signs in to the web app through Supabase Auth, web app is setting the sb- cookie with the session data.

To make the session available also in the extension, you need to know the name of this cookie.

Usually, it follows the pattern sb-[project-id]-auth-token, where [project-id] is the id of your Supabase project (except local Docker development, where it's sb-[your-ip-address-first-segment]-auth-token).

You can find your cookie name in Cookies tab in the browser's developer tools (remember to be logged in to the app to check it):

Don't worry if it's splitted into multiple cookies (like on the image above) and encrypted. TurboStarter comes with pre-built solution to get and parse the session cookie value from the browser correctly.

Then, set it as environment variable in the extension:

PLASMO_PUBLIC_AUTH_COOKIE_NAME="sb-..."

Also, to enable your extension to read the cookie, you need to set the cookies permission in the package.json under manifest.permissions field:

"permissions": [
  "cookies"
]

And to read the cookie from your app url, you need to set host_permissions, which will include your app url:

"host_permissions": [
  "http://localhost/*",
  "https://your-app-url.com/*"
]

Then you would be able to read the cookie value using chrome.cookies API.

Reading session

You don't need to worry about reading, parsing or validating the session cookie. TurboStarter comes with a pre-built solution to get and parse the session cookie value from the browser correctly using chrome.cookies API (of course, it requires the steps above to be completed before).

We're doing it inside background service worker of the extension, you can find the code in apps/extension/src/app/background/messages/session.ts.

After parsing and validating that the cookie is valid, we're setting it directly on Supabase instance, so it's automatically accessible everywhere (e.g. can be used to authorize API requests).

To get session details in your extension code (e.g. inside popup window), we can leverage messaging system and @tanstack/react-query integration to send a message to the background service worker and receive the response with session details:

const User = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["session"],
    queryFn: () =>
      sendToBackground<
        {
          type: typeof SESSION_MESSAGE_TYPE.GET;
        },
        {
          session: Session | null;
        }
      >({
        name: "session",
        body: { type: SESSION_MESSAGE_TYPE.GET },
      }),
  });
 
  if (isLoading) {
    return <p>Loading...</p>;
  }
 
  /* do something with the session data... */
  return <p>{data?.session?.user?.email}</p>;
};

That's how you can access user details right in your extension.

Signing out

Signing out from the extension also involves sending a message to the background service worker to delete the auth cookie from the browser:

export const Logout = () => {
  const queryClient = useQueryClient();
  const { mutate } = useMutation({
    mutationFn: () =>
      sendToBackground({
        name: "session",
        body: { type: SESSION_MESSAGE_TYPE.DELETE },
      }),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ["session"] });
    },
  });
 
  return <button onClick={() => mutate()}>Log out</button>;
};

We're also invalidating the session query in the extension to update the UI and show the user as logged out.