Clerk is a developer-first authentication and user management solution. It provides pre-built React components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be dropped into any Chrome Extension application.
This repo includes a demo of the Chrome Extension SDK and its core features. Included in this demo app are:
- Using React Router for route/page management in the extension
- Sync Host to allow for syncing auth state from a web application to the extension
- The
createClerkClient()
helper for background service workers
git clone https://github.com/clerkinc/clerk-chrome-extension-demo
To run the example locally, you need to:
-
Sign up for a Clerk account at https://clerk.com.
-
Go to the Clerk dashboard and create an application.
-
Copy the
.env.development.example
file to/apps/chrome-extension/.env.development
and add the required environment variables.
PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY
- the Clerk Publishable Key from the API keys Dashboard page.CLERK_FRONTEND_API
- the Clerk Frontend API URL from theShow API URLs
button on the API keys dashboard page.PLASMO_PUBLIC_SYNC_HOST
- this is only required if you want to test the Sync Host feature. This is configured to match the web app included in this repo.
- Copy the
.env.chrome.example
file to/apps/chrome-extension/.env.chrome
and add the following required environment variables.
CRX_PUBLIC_KEY
- the public key for your Chrome Extension. The Chrome Extension Quickstart and the Configure a Consistent CRX ID cover creating this.
- Copy the
.env.example
file to/apps/web-app/.env
and add the required environment variables.
VITE_CLERK_PUBLISHABLE_KEY
- the Clerk Publishable Key from the API keys Dashboard page.
-
pnpm install
the required dependencies for both applications. -
pnpm dev
to launch the web application and launch the dev server for the extension and create it initial build. -
Install the extension in Chrome by loading it as an unpacked extension.
To learn more about Clerk and Chrome Extensions, check out the following resources:
-
To see the usage of React Router, open the popup and navigate between the page using the buttons at the bottom.
-
For Sync Host, make sure you are signed out of the extension and the web applications. Once fully signed out, sign into the web application in any manner you wish, including OAuth. Once done, open the popup and you will see you are signed in correctly. WARNING: You must be using the same Clerk instance and the same Publishable key in both. If you are using a different Publishable key then this feature will not work.
-
To test the
createClerkClient()
function, sign into the extension. Once signed in there is aSDK Features
button in the bottom menu. Navigate to that page and then click theOpen Demo Tab
button. This will open a new tab in your browser. In that tab click theGet Token
button. The box for the token will be populated with your current session token.
Feel free to create a support thread on our Discord. Our support team will be happy to assist you in the #support
channel.
You can discuss ideas, ask questions, and meet others from the community in our Discord.
If you prefer, you can also find support through our Twitter, or you can email us!