Add authentication and permissions to your Next.js application using Kobble
@kobbleio/next
SDKCreate your Next application
Install @kobbleio/next
Setup the middleware
middleware.ts
file in your project and add the following code:Setup the Kobble Provider
KobbleProvider
component.
This is commonly done in the top level layout.tsx
file.Here’s how your layout.tsx
file should look like:KobbleProvider
itself is a server side component, and as such should not be rendered by a client component directly.Setup the environment variables
.env
file at the root of your project and add the following environment variables.Handling user state (client side)
useAuth
hook and various built-in components to manage your user’s state and permissions.Here’s a simple example using <SignedIn />
, <SignedOut />
, <LoginButton />
, <LogoutButton />
components:Handling user state (server side)
Managing permissions (client side)
<IsAllowed />
and <IsForbidden />
components.Managing permissions (server side)
Managing quotas (client side)
<IsAllowed />
and <IsForbidden />
components.Managing quotas (server side)