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.

export const auth = betterAuth({
  ...
 
  trustedOrigins: ["chrome-extension://your-extension-id"],
 
  ...
});

Cookies

When the user signs in to the web app through our Better Auth API, web app is setting the cookie with the session token under your app's domain, which is later used to validate the session on the server.

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

To enable your extension to read the cookie and that way share the session with the web app, you need to set the cookies permission in the wxt.config.ts under manifest.permissions field:

export default defineConfig({
  manifest: {
    permissions: ["cookies"],
  },
});

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

export default defineConfig({
  manifest: {
    host_permissions: ["http://localhost/*", "https://your-app-url.com/*"],
  },
});

Then you would be able to share the cookie with API requests and also read its 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 that ensures your session is correctly shared with the web app.

It also ensures that appropriate cookies are passed to API requests, so you can safely use protected endpoints (that require authentication) in your extension.

To get session details in your extension code (e.g., inside a popup window), you can leverage the useSession hook provided by the auth client (which is also used in the web and mobile apps):

import { useSession } from "~/lib/auth";
 
const User = () => {
  const {
    data: { user, session },
    isPending,
  } = useSession();
 
  if (isPending) {
    return <p>Loading...</p>;
  }
 
  /* do something with the session data... */
  return <p>{user?.email}</p>;
};

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

Signing out

Signing out from the extension also involves using the well-known signOut function that is derived from our auth client:

import { signOut } from "~/lib/auth";
 
export const Logout = () => {
  return <button onClick={() => signOut()}>Log out</button>;
};

The session is automatically invalidated, so the next use of useSession or any other query that depends on the session will return null. The UI for both the extension and the web app will be updated to show the user as logged out.