Clerk and Chrome Extension Demo

Introduction

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

Running the demo

git clone https://github.com/clerkinc/clerk-chrome-extension-demo

To run the example locally, you need to:

1. Sign up for a Clerk account at https://clerk.com.

2. Go to the Clerk dashboard and create an application.

3. 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 the Show API URLs button on the API keys dashboard page.
• PLASMO_PUBLIC_CLERK_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.

4. 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.

5. 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.

6. pnpm install the required dependencies for both applications.

7. pnpm dev to launch the web application and launch the dev server for the extension and create it initial build.

8. Install the extension in Chrome by loading it as an unpacked extension.

Learn more

To learn more about Clerk and Chrome Extensions, check out the following resources:

• Quickstart: Get started with Chrome Extensions and Clerk

• Clerk Documentation

• Chrome Extensions

SDK Features

1. To see the usage of React Router, open the popup and navigate between the page using the buttons at the bottom.

2. 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.

3. To test the createClerkClient() function, sign into the extension. Once signed in there is a SDK Features button in the bottom menu. Navigate to that page and then click the Open Demo Tab button. This will open a new tab in your browser. In that tab click the Get Token button. The box for the token will be populated with your current session token.

Found an issue or want to leave feedback

Feel free to create a support thread on our Discord. Our support team will be happy to assist you in the #support channel.

Connect with us

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!