Loading...
+ }
+
+ return isAuthenticated ? (
+ Loading...
;
+ if (!isAuthenticated) return
-
-
User
-
-
- {JSON.stringify(user, null, 2)}
-
-
-
-
-
Permissions
-
-
- {JSON.stringify(permissions, null, 2)}
-
-
-
-
-
Organization
-
-
- {JSON.stringify(organization, null, 2)}
-
-
-
-
-
User organizations
-
-
- {JSON.stringify(userOrganizations, null, 2)}
-
-
-
-
-
Access Token
-
-
- {JSON.stringify(accessToken, null, 2)}
-
-
-
-
-
Is Authenticated
-
-
- {JSON.stringify(isAuthenticated, null, 2)}
-
-
-
-
-
error
-
-
- {JSON.stringify(error, null, 2)}
-
-
-
-
-
Get boolean flag
-
-
- {JSON.stringify(getBooleanFlag("bodsa", true), null, 2)}
-
-
-
-
-
Get claim
-
-
- {JSON.stringify(getClaim("bodsa"), null, 2)}
-
-
-
-
-
Get integer flag
-
-
- {JSON.stringify(getIntegerFlag("bodsa", 1), null, 2)}
-
-
-
-
-
Get string flag
-
-
- {JSON.stringify(getStringFlag("bodsa", "dsad"), null, 2)}
-
-
-
-
-
Get permission
-
-
- {JSON.stringify(getPermission("bodsa"), null, 2)}
-
-
-
-
-
Get flag
-
-
- {JSON.stringify(getFlag("bodsa", "dsad", "s"), null, 2)}
-
-
+
+
Welcome, {user?.givenName}
+
Org: {organization}
+
Can edit: {getPermission("edit:items")?.isGranted ? "Yes" : "No"}
);
}
@@ -488,7 +487,7 @@ Use `isLoading` to ensure the data is up to date. You can return a Loading spinn
It’s likely that your application will have both pages that are publicly available and private ones which should only be available to logged in users. There are multiple ways you can protect pages with Kinde Auth.
-## Protect routes using Kinde Auth data
+### Using Kinde Auth data
On the page you want to protect, you can check if the user is authenticated and then handle it right then and there by grabbing the Kinde Auth data.
@@ -500,7 +499,7 @@ Get Kinde Auth data:
```jsx
// pages/protected.tsx - using getKindeServerSession
-import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/dist/components";
+import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
export async function getServerSideProps({
@@ -523,7 +522,7 @@ export async function getServerSideProps({
};
}
-export default async function Protected({isAuthed}) {
+export default function Protected({isAuthed}) {
return (isAuthed ? (
@@ -533,13 +532,13 @@ export default async function Protected({isAuthed}) {
This page is protected, please Login to view it
- );
+ ));
}
-// pages/protected/page.tsx - using useKindeAuth
+// pages/protected.tsx - using useKindeAuth
import { useKindeAuth } from "@kinde-oss/kinde-auth-nextjs";
-import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/dist/components";
+import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";
export default function Admin() {
const { isAuthenticated, isLoading } = useKindeAuth();
@@ -565,9 +564,9 @@ import {useKindeAuth} from "@kinde-oss/kinde-auth-nextjs";
import {useRouter} from "next/router";
import {useEffect} from "react";
-export default async function Protected() {
+export default function Protected() {
const router = useRouter();
- const {isAuthenticated} = useKindeAuth();
+ const {isAuthenticated, isLoading} = useKindeAuth();
useEffect(() => {
if (!isLoading && !isAuthenticated) {
@@ -585,7 +584,7 @@ If you want the user to be redirected back to that route after login, you can se
router.push("/api/auth/login?post_login_redirect_url=/protected");
```
-## Protect routes using middleware
+### Using middleware
You can also protect routes with Next.js middleware.
@@ -688,7 +687,7 @@ import {Users} from "@kinde/management-api-js";
import type {NextApiRequest, NextApiResponse} from "next";
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
- const users = await await Users.getUsers();
+ const users = await Users.getUsers();
if (users.code === "OK") {
return res.status(200).json({users});
} else {
@@ -738,12 +737,10 @@ import {LoginLink} from "@kinde-oss/kinde-auth-nextjs/components";
;
```
-## **Audience**
+## Audience
An `audience` is the intended recipient of an access token - for example the API for your application. The `audience` argument can be passed to the Kinde client to request an audience be added to the provided token.
-The audience of a token is the intended recipient of the token.
-
```jsx
// .env
...
@@ -766,10 +763,19 @@ If the URL you want to start the authentication flow from and the URL you want t
## Debug mode
-In debug mode you will see more logs in your console that may help with debugging.
+In debug mode you will see more logs in your console that may help with debugging. Add the following to your `.env` file:
-```jsx
+```env
// .env
-KINDE_DEBUG_MODE = true;
+KINDE_DEBUG_MODE=true
```
+
+## Next steps
+
+This SDK is deprecated and no longer recommended for new projects. Consider the following:
+
+- **Migrate to the App Router SDK** — the [Next.js App Router SDK](/developer-tools/sdks/backend/nextjs-sdk/) is the current recommended approach and uses React Server Components natively.
+- **Set up organizations** — learn how to [manage multi-tenant organizations](/build/organizations/create-and-manage-orgs/).
+- **Register an API** — connect an audience to your access tokens using the [Register an API](/developer-tools/your-apis/register-manage-apis/) guide.
+- **Manage users** — explore [user management](/manage-users/users/about-users/) in the Kinde dashboard.
diff --git a/src/content/docs/developer-tools/sdks/backend/nextjs-prev-sdkv1.mdx b/src/content/docs/developer-tools/sdks/backend/nextjs-prev-sdkv1.mdx
index f27248df4..c91ac7398 100644
--- a/src/content/docs/developer-tools/sdks/backend/nextjs-prev-sdkv1.mdx
+++ b/src/content/docs/developer-tools/sdks/backend/nextjs-prev-sdkv1.mdx
@@ -1,6 +1,6 @@
---
page_id: 310f7761-38f8-4051-9ce5-a5ddc174cc7c
-title: Next.js Pages Router SDK v1
+title: Next.js Pages Router SDK v1 (legacy)
description: "Legacy guide for Next.js Pages Router SDK v1 including authentication setup, API endpoints, and provider configuration for older Next.js versions."
sidebar:
order: -1
diff --git a/src/content/docs/developer-tools/sdks/backend/nextjs-sdk.mdx b/src/content/docs/developer-tools/sdks/backend/nextjs-sdk.mdx
index 800cda686..df4c8b58b 100644
--- a/src/content/docs/developer-tools/sdks/backend/nextjs-sdk.mdx
+++ b/src/content/docs/developer-tools/sdks/backend/nextjs-sdk.mdx
@@ -600,15 +600,15 @@ console.log(user);
"username": "ExampleUsername",
"phone_number": "1234567890",
"properties": {
- "usr_city": "",
- "usr_industry": "",
- "usr_job_title": "",
- "usr_middle_name": "",
- "usr_postcode": "",
- "usr_salutation": "",
- "usr_state_region": "",
- "usr_street_address": "",
- "usr_street_address_2": ""
+ "kp_usr_city": "",
+ "kp_usr_industry": "",
+ "kp_usr_job_title": "",
+ "kp_usr_middle_name": "",
+ "kp_usr_postcode": "",
+ "kp_usr_salutation": "",
+ "kp_usr_state_region": "",
+ "kp_usr_street_address": "",
+ "kp_usr_street_address_2": ""
}
}
```