Kinde•8mo ago

Extending KindeIdToken type to include the `organizations` claim

I added an organizations claim to the id token and would like TypeScript to know about it so I could do:

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
const { getIdToken } = getKindeServerSession();
const idToken = await getIdToken();
console.log(idToken.organizations); // currently TypeScript says: Property organizations does not exist on type KindeIdToken.

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
const { getIdToken } = getKindeServerSession();
const idToken = await getIdToken();
console.log(idToken.organizations); // currently TypeScript says: Property organizations does not exist on type KindeIdToken.

I tried to add the following in app/lib/types.ts:

declare global {
  interface KindeIdToken {
    organizations?: Array<{
      id: string;
      name: string;
    }>;
  }
}

declare global {
  interface KindeIdToken {
    organizations?: Array<{
      id: string;
      name: string;
    }>;
  }
}

but this doesn't help. My tsconfig.json includes this types.ts:

"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

Any ideas?

3 Replies

Oli - Kinde•8mo ago

To ensure TypeScript recognizes the organizations claim on the KindeIdToken type, you need to make sure that your type augmentation is correctly set up and recognized by TypeScript. Here are a few steps and checks you can perform to resolve the issue: 1. Correct Placement of Type Declaration: Ensure that your type declaration file (types.ts) is in a directory that TypeScript is configured to check. Based on your tsconfig.json, it seems like it should be under the .next/types/ directory or directly in the project root. 2. Global Augmentation Syntax: Your syntax for augmenting the KindeIdToken looks correct, but ensure that the file containing this declaration is a module (i.e., it contains at least one top-level import or export). If it doesn't, TypeScript might not treat it as a module. 3. Ensure the File is a Module: If there are no imports or exports in your types.ts, simply add an empty export statement to make it a module:

   export {};

   export {};

4. Restart TypeScript Server: Sometimes, changes in type declarations might not be picked up immediately by the TypeScript server in your IDE. Restart your TypeScript server or your IDE to ensure it picks up the new type declarations. 5. Check for Typos and Path Issues: Double-check the path specified in the include array of your tsconfig.json. Make sure there are no typos and the path correctly points to where your types.ts file is located. 6. Explicit Type Import: If the global augmentation does not work as expected, consider explicitly importing the type where you need it, although this should generally not be necessary with proper global augmentation. Here's an example of what your types.ts might look like as a module:

// Ensure this file is treated as a module
export {};

declare global {
  namespace Kinde {
    interface IdToken {
      organizations?: Array<{
        id: string;
        name: string;
      }>;
    }
  }
}

// Ensure this file is treated as a module
export {};

declare global {
  namespace Kinde {
    interface IdToken {
      organizations?: Array<{
        id: string;
        name: string;
      }>;
    }
  }
}

If you've tried all the above and it still doesn't work, you might want to check if there are any other TypeScript configuration issues or conflicts that could be affecting type recognition. Please let me know if you are still experiencing issues.

moroshkoOP•8mo ago

I tried the suggestions above, but still no luck. One thing I wasn't sure about is whether I should use the namespace like in your snippet above. My understanding is that when using a namespace I extend Kinde.IdToken but I think I want to extend KindeIdToken. Anyway, here is a repo with easy repro: https://github.com/moroshko/kinde-nextjs-app-router-starter-kit

Oli - Kinde•8mo ago

Hey @moroshko, Looks like @Daniel_Kinde is helping you out here: https://thekindecommunity.slack.com/archives/C04K316BXEH/p1714737627631539. I will leave this with Daniel to help you on this issue.

Slack

Gaming

Programming

Extending KindeIdToken type to include the `organizations` claim