Learn how to add authentication to your React-based Chrome extension using the Kobble SDK.
Install @kobbleio/react-web-extension
Use the KobbleProvider
KobbleProvider
component.Here’s an example taken from our Chrome Extension boilerplate.Replace the KOBBLE DOMAIN and CLIENT ID
YOUR_KOBBLE_DOMAIN
and YOUR_CLIENT_ID
with your actual Kobble domain and client ID.Add the right permissions to your manifest file
permissions
array of your manifest.json
file contains at least the following permissions:Add the redirect URI of your Chrome Extension into your Kobble Application
Authorized redirect URIs
section and click on Edit
.https://ID.chromiumapp.org/callback
where ID
is the ID of your Chrome extension.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.Start using our components
useAuth
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
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.
null
user and then the User
object if authenticated.useAccessControl
hook allows you to check if the user has the required permissions or quotas to access a specific resource.
useKobble
hook allows you to get the kobble
client instance that exposes various utility methods.
useAuth
hook explained above.onAuthStateChanged
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.
null
user and then the User
object if authenticated.<SignedIn>
<SignedIn>
component allows you to show content only when the user is signed in.
<SignedOut>
<SignedOut>
component allows you to show content only when the user is signed out.
<LoginButton>
<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:
<LogoutButton>
<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:
<IsAllowed>
<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>
<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>
<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>
<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.