Pre-requisites: You need to set up your Kobble account.
Suggested boilerplate
Although there are many Chrome Extension boilerplate available on GitHub, we figured many of them just don’t work. So we suggest you use Jonghakseo/chrome-extension-boilerplate-react-viteInstall the SDK
1
Install @kobbleio/react-web-extension
Install the @kobbleio/react-web-extension sdk with the provider of your choice.
2
Use the KobbleProvider
To use the SDK, you must wrap your Popover or Tab component with the
KobbleProvider
component.Here’s an example taken from our Chrome Extension boilerplate.3
Replace the KOBBLE DOMAIN and CLIENT ID
In the above snippet, don’t forget to replace
YOUR_KOBBLE_DOMAIN
and YOUR_CLIENT_ID
with your actual Kobble domain and client ID.KOBBLE_DOMAIN and KOBBLE_CLIENT_ID can be found in your Kobble dashboard.
4
Add the right permissions to your manifest file
You need to make sure the
permissions
array of your manifest.json
file contains at least the following permissions:5
Add the redirect URI of your Chrome Extension into your Kobble Application
- Open the Applications tab of your Kobble dashboard.
- Click on the application you’re using in your Chrome extension.
- Scroll to the
Authorized redirect URIs
section and click onEdit
. - Add the following URI:
https://ID.chromiumapp.org/callback
whereID
is the ID of your Chrome extension.
The ID of your extension can be found on this page
chrome://extensions/
. Here is more information about how to find your ID. Note that the ID may change if you remove and reload your extension.6
Start using our components
Unlike for a web application, you don’t have to setup a callback handler.So we can directly use our components, here’s an example.
Hooks
The SDK exposes many hooks that you can use to interact with the authentication state of your application.useAuth()
TheuseAuth
hook allows you to get the authentication state of the user. Instead of using the kobble
client instance, you can directly get the user object from the react context.
useAuthStateChanged()
TheuseAuthStateChanged
hook allows you to listen for changes in the authentication state of the user.
The callback function will be called with the user object when the user is signed in, and null
when the user is signed out.
The callback may be called multiple times. For instance when you refresh the page it will be initially called with a
null
user and then the User
object if authenticated.useAccessControl()
TheuseAccessControl
hook allows you to check if the user has the required permissions or quotas to access a specific resource.
You must attribute quotas and/or permissions to your Products from your Kobble dashboard for them to work.
Check permissions
Check remaining quotas
useKobble()
TheuseKobble
hook allows you to get the kobble
client instance that exposes various utility methods.
Get user state
Even if you can do it using the Kobble instance we suggest you do it using the
useAuth
hook explained above.Get access and ID tokens
Listen for state changes
TheonAuthStateChanged
method allows you to listen for changes in the authentication state of the user.
The callback function will be called with the user object when the user is signed in, and null
when the user is signed out.
The callback may be called multiple times. For instance when you refresh the page it will be initially called with a
null
user and then the User
object if authenticated.Components
The SDK exposes a few components that you can use to interact with the authentication state of your application seemlessly.<SignedIn>
The <SignedIn>
component allows you to show content only when the user is signed in.
<SignedOut>
The <SignedOut>
component allows you to show content only when the user is signed out.
<LoginButton>
The <LoginButton>
component allows you to show a button that triggers the login flow and redirects the user to your authentication portal.
You can use the component as it or pass it a child to customize it.
Default usage:
The onClick event will automatically get handled by the SDK, don’t pass any handler.
<LogoutButton>
The <LogoutButton>
component allows you to show a button that triggers the logout flow.
You can use the component as it or pass it a child to customize it.
Default usage:
The onClick event will automatically get handled by the SDK, don’t pass any handler.
<IsAllowed>
The <IsAllowed>
component allows you to show content only when the user has the required permissions or quotas to access a specific resource.
It takes a permission
or quota
prop that you can use to check if the user has the required permissions or quotas.
Both permission
and quota
props can be either a string or an array of strings.
<IsForbidden>
The <IsForbidden>
component allows you to show content only when the user doesn’t have the required permissions or quotas to access a specific resource.
It takes a permission
or quota
prop that you can use to check if the user doesn’t have the required permissions or quotas.
Both permission
and quota
props can be either a string or an array of strings.
<ProfileLink>
The <ProfileLink>
component allows you to show a link to the user’s profile of your Customer Portal.
It must take a child that will be used as the link text.
<PricingLink>
The <PricingLink>
component allows you to show a link to the pricing page of your Customer Portal.
It must take a child that will be used as the link text.