You will learn how to:
- Create a new React application using Next
- Configure
@kobbleio/next
SDK - Protect your application routes
- Add permissions and quotas to your application
Pre-requisites: You need to set up your Kobble account before starting this guide.
Example repository
To make your life simpler, we crafted various Next.js examples that you ca find in our Next Examples Repository.Installation
1
Create your Next application
Scaffold your new Next application using Next Create App.Then, when prompted, choose the options you prefer for your project.We recommend the following setup:
It’s mandatory to use App Router to work with the @kobbleio/next SDK.
2
Install @kobbleio/next
3
Setup the middleware
Our auth middleware allows you to protect your routes and handle the authentication flow seamlessly.Create a This middleware will automatically expose various routes to handle authentication.
middleware.ts
file in your project and add the following code:4
Setup the Kobble Provider
To leverage kobble utilities inside client side components, you need to wrap your app with the Note that
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.5
Setup the environment variables
At this stage, if you run the project, you will get the following errors:This is because we need to add our Kobble Client ID and Customer Portal Domain to the environment variables.Create a
If you don’t know how to get these variables, it’s covered in our setup guide.
.env
file at the root of your project and add the following environment variables.KOBBLE_DOMAIN and KOBBLE_CLIENT_ID can be found in the Kobble Application we created earlier. The REDIRECT_URI could be any route of your choice since the domain points to your Next Application.
User authentication
1
Handling user state (client side)
In your client side code you can directly use the
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:2
Handling user state (server side)
On your server code you can leverage @kobbleio/next/server utilities to handle user state and permissions.
Permissions and quotas
1
Managing permissions (client side)
At this stage, you can manage your user’s permissions and quotas client using our
<IsAllowed />
and <IsForbidden />
components.2
Managing permissions (server side)
3
Managing quotas (client side)
At this stage, you can manage your user’s permissions and quotas client using our
<IsAllowed />
and <IsForbidden />
components.4
Managing quotas (server side)