K
Kindemoroshko

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?
No description
Oli - Kinde
Oli - Kinde•18d 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.
moroshko
moroshko•18d 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
Oli - Kinde•15d 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
Want results from more Discord servers?
Add your server
More Posts
useKindeAuth isLoading doesn't change to falseTrying to get the org in a client component, but `isLoading` does not change to `false`. What am I Getting organization handle in id token claimsWhen user visits `myapp.com/org-handle`, I'd like to check whether the user has access to the `org-hPermission doesn't workI added an "admin" permission to a user. However, `await getPermissions()` returns no permissions: `How to sign the user out when /logout is visited?In my Next.js App Router application, I'd like to automatically sign the user out when the user visiShould I include user model in database schema? And how to handle users registering their business?Hi, how should I handle database schema while using Kinde? Should I try for creating user model in misAuthenticated === false vs user === nullIs there any difference (maybe performance?) between: ``` import { getKindeServerSession } from "@kiMulti-factor auth using SMS - Where is the user's phone number stored?I enabled "Multi-factor authentication". The first time I logged in using Google, I was asked to entProtecting routes in Next.js App Router middlewareDocs at https://kinde.com/docs/developer-tools/nextjs-sdk/#protect-routes-using-middleware mention: User's first and last names are overridden when user logs in using GoogleAfter user signs up using Google, their first and last names in KindeUser are pre-populated from the`await getUser()` doesn't return the first and last nameIn my Next.js App Router application, in a page component, I get the user: ``` const { getUser } = gDoes Kinde provide Login/SignUp components for custom Login/SignUp pages?I'd like to have a custom `myapp.com/login` page in Next.js App Router application, and render a LogSubscribe Form...React[solved] Hi, I want to include the subscribe form in a react (docusaurus) site. I want to have a bu