Kinde•5mo ago

Error: this method must be invoked in a node.js environment

I'm using Kind with NextJs, and everything was working well, but out of nowhere, I've started to get the following error: Unhandled Runtime Error Error: this method must be invoked in a node.js environment Call Stack createKindeServerClient node_modules/.pnpm/@kinde-oss+kinde-typescript-sdk@2.3.0/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/clients/server/index.js (7:0) I've installed the NextJS App Router SDK v2.

3 Replies

Oli - Kinde•5mo ago

Hi @Ruben Silva, It seems like you're trying to use a server-side method in a client-side environment. The createKindeServerClient method is meant to be used in a server-side environment like Next.js API routes or getServerSideProps. If you're trying to use it in a client-side component, it won't work and will throw the error you're seeing. Instead, you should use client-side methods provided by the SDK in your components. For example, if you're trying to fetch user data, you can use the useUser hook in your component like this:

import { useUser } from "@kinde-oss/kinde-auth-nextjs";

export default function MyComponent() {
  const { user, isLoading } = useUser();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (user) {
    return <div>Welcome, {user.name}!</div>;
  }

  return <div>Please sign in.</div>;
}

import { useUser } from "@kinde-oss/kinde-auth-nextjs";

export default function MyComponent() {
  const { user, isLoading } = useUser();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (user) {
    return <div>Welcome, {user.name}!</div>;
  }

  return <div>Please sign in.</div>;
}

If you need to use server-side methods, make sure to use them in the appropriate server-side contexts like API routes or getServerSideProps. For example:

// Next.js API Route - e.g. /api/kindeUser.ts
import { createKindeManagementAPIClient } from "@kinde-oss/kinde-auth-nextjs/server";
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const client = await createKindeManagementAPIClient(req, res);
  const users = await client.usersApi.getUsers();

  if(users.code === "OK") {
    return res.status(200).json({ users });
  } else {
    // handle error
  }
}

// Next.js API Route - e.g. /api/kindeUser.ts
import { createKindeManagementAPIClient } from "@kinde-oss/kinde-auth-nextjs/server";
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const client = await createKindeManagementAPIClient(req, res);
  const users = await client.usersApi.getUsers();

  if(users.code === "OK") {
    return res.status(200).json({ users });
  } else {
    // handle error
  }
}

I hope this helps! Let me know if you have any other questions.

Ruben Silva•5mo ago

Thank you for the response. I was experimenting with rendering server components inside client components, and that's where the error could be occurring.

Oli - Kinde•5mo ago

I was experimenting with rendering server components inside client components, and that's where the error could be occurring.

Understood. Well please reach out if you come across anymore issues.

Gaming

Programming

Error: this method must be invoked in a node.js environment