Add authentication to your React application in under 10 minutes using Kobble SDK.
@kobbleio/react
SDKCreate your React application
Install @kobbleio/react
Use the KobbleProvider
KobbleProvider
component.Here’s an example that also uses React Router:Setup the environment variables
.env
file at the root of your project and add the following environment variables.Create a callback handler
src/pages/Callback.tsx
.Use the <HandleCallback />
component to handle the callback and redirect the user to the home page automatically.Handling user state
useAuth
hook to get the user state and the LoginButton
component to trigger the login process.First, we can use the <SignedIn />
and <SignedOut />
components to show different content based on the user’s authentication state.Login and Logout components
<LoginButton />
and <LogoutButton />
components.Going further