Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@clerk/chrome-extension
Advanced tools
Clerk is the easiest way to add authentication and user management to your chrome extension. To gain a better understanding of the Clerk React SDK and Frontend API, refer to the Node SDK and Backend API documentation.
To use this package you should first create a Clerk application and retrieve a Publishable Key
for you application to be used as environment variables REACT_APP_CLERK_PUBLISHABLE_KEY
.
npm install @clerk/chrome-extension
Standalone usage snippet:
// App.tsx
import { SignedIn, SignedOut, SignIn, SignUp, ClerkProvider } from '@clerk/chrome-extension';
import { useNavigate, Routes, Route, MemoryRouter } from 'react-router-dom';
function HelloUser() {
return <p> Hello user</p>;
}
const publishableKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY || '';
function ClerkProviderWithRoutes() {
const navigate = useNavigate();
return (
<ClerkProvider
publishableKey={publishableKey}
navigate={to => navigate(to)}
>
<Routes>
<Route
path='/sign-up/*'
element={<SignUp signInUrl='/' />}
/>
<Route
path='/'
element={
<>
<SignedIn>
<HelloUser />
</SignedIn>
<SignedOut>
<SignIn
afterSignInUrl='/'
signUpUrl='/sign-up'
/>
</SignedOut>
</>
}
/>
</Routes>
</ClerkProvider>
);
}
function App() {
return (
<MemoryRouter>
<ClerkProviderWithRoutes />
</MemoryRouter>
);
}
export default App;
WebSSO usage snippet:
// App.tsx
// use same code with the above & add the syncSessionWithTab prop in <ClerkProvider/>
// ...
<ClerkProvider
publishableKey={publishableKey}
navigate={to => navigate(to)}
syncSessionWithTab
>
{/* ... */}
</ClerkProvider>
//...
Examples of a chrome extension using the @clerk/chrome-extension
package for authentication
can be found in our clerk-chrome-extension-starter
github repository.
The 2 supported cases (links to different branches of the same repository):
You will need your Frontend API URL, which can be found in your Dashboard > API Keys > Advanced > Clerk API URLs
.
"host_permissions": ["*://YOUR_CLERK_FRONTEND_API_GOES_HERE/"],
Add your Chrome extension origin to your instance allowed_origins using BAPI:
curl -X PATCH https://api.clerk.com/v1/instance \
-H "Authorization: Bearer sk_secret_key" \
-H "Content-type: application/json" \
-d '{"allowed_origins": ["chrome-extension://extension_id_goes_here"]}'
Setting the allowed_origins
(check Clerk Settings) is REQUIRED for both Development and Production instances when using the WebSSO use case.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
You can get in touch with us in any of the following ways:
We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines.
@clerk/chrome-extension
follows good practices of security, but 100% security cannot be assured.
@clerk/chrome-extension
is provided "as is" without any warranty. Use at your own risk.
For more information and to report security issues, please refer to our security documentation.
This project is licensed under the MIT license.
See LICENSE for more information.
FAQs
Clerk SDK for Chrome extensions
The npm package @clerk/chrome-extension receives a total of 2,349 weekly downloads. As such, @clerk/chrome-extension popularity was classified as popular.
We found that @clerk/chrome-extension demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.