Oli - Kinde
Oli - Kinde
PostsComments
KKinde
Created by jw on 11/10/2024 in #💻┃support
User handles / usernames
Hey @jw, Sorry you experienced this issue with username authentication with Kinde. If you enable only Username connection (under 'Password connections') as the only authentication method for a given Kinde application the experience is as follows 👇 Sign-up 1. Enter unique username 2. Enter email + OTP (to verify email) 3. Set password The email verification is required for when you reset your password as we need a way to verify you. Sign-in 1. Enter username 2. Enter password You can read more details about username authentication here: https://docs.kinde.com/authenticate/authentication-methods/username-authentication/ If you enable only Username connection, your users should not be able to sign-in with an email, only username.
8 replies
KKinde
Created by kishan_6969 on 12/27/2024 in #💻┃support
JWT guide needed
Hey @kishan_6969, I can see my teammate responded to you about the same query here: https://discord.com/channels/1070212618549219328/1322570554594693223 Claire latest comment is right. I would suggest continuing to communicate with Claire on this issue in that thread.
9 replies
KKinde
Created by TotalScrub on 12/23/2024 in #💻┃support
Refresh claims approach
Hi @TotalScrub, Totally understand info around when you can expect the new JS Utils package. I am on break from New Years until Jan 13, and I will speak to my teammate then and post here when we think the new JS Utils package will be released.
20 replies
KKinde
Created by Bini on 12/28/2024 in #💻┃support
Authentication Issue on Vercel Deployment
Hey @Bini, I cannot thank you enough for spending the time to write the extensive information here on how to reproduce your issue. My teammate is actively working on a new version of the React SDK and I know he will want to make sure the new version covers your issue. So, may I suggest you post a GitHub issue on the React SDK GitHub repo with all the information you posted above (and anything else you think is relevant), as my expert React teammate will review all GitHub issues when he is back online early in the new year. Thanks again Bini for this extensive information.
5 replies
KKinde
Created by TotalScrub on 12/23/2024 in #💻┃support
Refresh claims approach
Hey @TotalScrub, I cannot provide any timelines at the moment. But when my teammate is back online on Jan 6 his #1 priority will be getting the new JS Utils package live.
20 replies
KKinde
Created by RenderCoder on 12/17/2024 in #💻┃support
The React SDK is not available, unable to automatically refresh the token successfully.
Hey @RenderCoder, This is very odd. What version of the React SDK are you using? Would you be able to raise a GitHub issue on the React SDK GitHub repo. My React expert teammate is actively working on a new version of the React SDK with major updates and Im certain he will want to make sure the new version solves your issue. Apologies for the inconvenience here.
4 replies
KKinde
Created by Pranay on 12/28/2024 in #💻┃support
NextJS PWA app gets stuck at this screen
4. Check Environment Variables There's a known issue with authentication flow state in preview environments . Make sure your environment variables are correctly set, especially: - KINDE_SITE_URL - KINDE_POST_LOGIN_REDIRECT_URL - KINDE_POST_LOGOUT_REDIRECT_URL If you're still experiencing issues - let me know.
5 replies
KKinde
Created by Pranay on 12/28/2024 in #💻┃support
NextJS PWA app gets stuck at this screen
Hey @Pranay, Based on your description, this appears to be an authentication flow state issue that can occur in PWAs. Here are a few potential solutions: 1. Use Middleware Instead Instead of checking authentication in the page component, consider using Next.js middleware for authentication checks : 
import { authMiddleware } from "@kinde-oss/kinde-auth-nextjs/server";

export const config = {
    matcher: [
      "/((?!api|_next/static|_next/image|favicon.ico).*)"
    ]
};

export default authMiddleware;
import { authMiddleware } from "@kinde-oss/kinde-auth-nextjs/server";

export const config = {
    matcher: [
      "/((?!api|_next/static|_next/image|favicon.ico).*)"
    ]
};

export default authMiddleware;
2. Handle Loading State In your current implementation, consider adding a loading state while authentication is being checked : 
const { isAuthenticated, isLoading } = getKindeServerSession();

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

if (await isAuthenticated()) {
    redirect("/welcome");
}
const { isAuthenticated, isLoading } = getKindeServerSession();

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

if (await isAuthenticated()) {
    redirect("/welcome");
}
3. Client-Side Authentication Check For PWAs, you might want to handle authentication checks on the client side : 
"use client";

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

export default function Home() {
    const { isAuthenticated, isLoading } = useKindeBrowserClient();

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

    if (isAuthenticated) {
        window.location.href = "/welcome";
        return null;
    }

    return (
        <div className="flex flex-col md:flex-row h-dvh font-helvetica">
            Home Page
        </div>
    );
}
"use client";

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

export default function Home() {
    const { isAuthenticated, isLoading } = useKindeBrowserClient();

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

    if (isAuthenticated) {
        window.location.href = "/welcome";
        return null;
    }

    return (
        <div className="flex flex-col md:flex-row h-dvh font-helvetica">
            Home Page
        </div>
    );
}
5 replies
KKinde
Created by kishan_6969 on 12/27/2024 in #💻┃support
JWT guide needed
Let me know if you have any further questions.
9 replies
KKinde
Created by kishan_6969 on 12/27/2024 in #💻┃support
JWT guide needed
For updating the property value after form completion, you'll need to use the Kinde Management API. The benefits of using properties over feature flags for this use case are: - Properties are designed for storing user-specific data - They can be organized into categories for better management - They can be used to create custom claims in tokens - They can be managed both through the UI and API
9 replies
KKinde
Created by kishan_6969 on 12/27/2024 in #💻┃support
JWT guide needed
You can use Kinde properties instead of Kinde features flags to achieve your use-case. Here's how to implement profile completion tracking using Kinde properties: 1. Create a Custom Property in Kinde First, create a boolean property for profile completion: 1. Go to Settings > Data management > Properties 2. Select "Add Property" 3. Set up the property: - Name: "Profile Completion Status" - Key: "profile_completed" - Type: Boolean - Switch off "Private" if you want it in tokens - Select "Users" as the property type 2. Add Property to Tokens Properties can be passed in tokens for system-to-system transfer: Make sure your property is set as 'public' so it can be included in tokens. This essentially creates a custom claim that you can use for authentication/authorization. 3. View and Edit Properties You can manage user properties in two ways: 1. Through the Kinde dashboard: - Go to Users - Select the user - Select Properties - Edit the property value 2. Via the Management API: 
{
  "properties": [
    {
      "id": "prop_0192b7e8b4f8ca08110d2b22059662a8",
      "key": "profile_completed",
      "value": "true"
    }
  ]
}
{
  "properties": [
    {
      "id": "prop_0192b7e8b4f8ca08110d2b22059662a8",
      "key": "profile_completed",
      "value": "true"
    }
  ]
}
4. Using Properties in Your Application For the backend (Express), you can verify the token and check the property. The property will be available in the token claims if you've made it public. You can create middleware to check this property: 
const checkProfileCompletion = (req, res, next) => {
  const user = req.user;
  if (!user.properties?.profile_completed) {
    return res.status(403).json({ message: "Profile incomplete" });
  }
  next();
};

// Use in routes
app.get("/protected-route", verifier, checkProfileCompletion, (req, res) => {
  // Handle route
});
const checkProfileCompletion = (req, res, next) => {
  const user = req.user;
  if (!user.properties?.profile_completed) {
    return res.status(403).json({ message: "Profile incomplete" });
  }
  next();
};

// Use in routes
app.get("/protected-route", verifier, checkProfileCompletion, (req, res) => {
  // Handle route
});
9 replies
KKinde
Created by kishan_6969 on 12/27/2024 in #💻┃support
JWT guide needed
Here's how you can update feature flag values: 1. Create an API endpoint in your Express backend that updates the user's profile completion status in your database 2. Use Kinde's Management API to update the feature flag value for the user 3. When the user completes the profile form: - Save the form data to your database - Update the feature flag through the Management API - The next token refresh will include the updated feature flag value
9 replies
KKinde
Created by kishan_6969 on 12/27/2024 in #💻┃support
JWT guide needed
Hey @kishan_6969, Thanks for reaching out. For your scenario, you can use Kinde's feature flags functionality to implement the profile completion check. Here's how: 1. Set up Feature Flag in Kinde You can set up a feature flag called isProfileComplete in your Kinde account. The feature flag will appear in your token like this: 
feature_flags: {
    isProfileComplete: {
        "t": "b",
        "v": false
    }
}
feature_flags: {
    isProfileComplete: {
        "t": "b",
        "v": false
    }
}
2. Frontend Implementation (Next.js) In your Next.js frontend, you can check the feature flag using the getBooleanFlag helper: 
const { getBooleanFlag } = useKindeAuth();

// Check if profile is complete
const isProfileComplete = getBooleanFlag("isProfileComplete");

// Use in your component
{
    isProfileComplete ? <ProtectedComponent /> : <ProfileForm />
}
const { getBooleanFlag } = useKindeAuth();

// Check if profile is complete
const isProfileComplete = getBooleanFlag("isProfileComplete");

// Use in your component
{
    isProfileComplete ? <ProtectedComponent /> : <ProfileForm />
}
3. Backend Implementation (Express) For your Express backend, you can verify the token and check the feature flag using the JWT verifier: 
const { jwtVerify } = require("@kinde-oss/kinde-node-express");

const verifier = jwtVerify("https://<your_kinde_subdomain>.kinde.com");

// Middleware to check profile completion
app.get("/protected-route", verifier, (req, res) => {
    const featureFlags = req.user.feature_flags;
    if (!featureFlags?.isProfileComplete?.v) {
        return res.status(403).json({ message: "Profile incomplete" });
    }
    // Continue with the route handler
});
const { jwtVerify } = require("@kinde-oss/kinde-node-express");

const verifier = jwtVerify("https://<your_kinde_subdomain>.kinde.com");

// Middleware to check profile completion
app.get("/protected-route", verifier, (req, res) => {
    const featureFlags = req.user.feature_flags;
    if (!featureFlags?.isProfileComplete?.v) {
        return res.status(403).json({ message: "Profile incomplete" });
    }
    // Continue with the route handler
});
4. API Call Implementation When making API calls from your frontend to backend: 
const { getToken } = useKindeAuth();

const fetchData = async () => {
    try {
        const accessToken = await getToken();
        const res = await fetch(`<your_api_endpoint>`, {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        });
        const { data } = await res.json();
    } catch (err) {
        console.error(err);
    }
};
const { getToken } = useKindeAuth();

const fetchData = async () => {
    try {
        const accessToken = await getToken();
        const res = await fetch(`<your_api_endpoint>`, {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        });
        const { data } = await res.json();
    } catch (err) {
        console.error(err);
    }
};
9 replies
KKinde
Created by Wim on 12/26/2024 in #💻┃support
useKindeBrowserClient isAuthenticated
If you're still experiencing issues after implementing these fixes, you might want to: - Check your environment variables are correctly set up - Verify your callback URLs in your Kinde dashboard match your application - Ensure you're using the correct version of the Kinde SDK for your Next.js setup If you're still having issues, please let me know.
3 replies
KKinde
Created by Wim on 12/26/2024 in #💻┃support
useKindeBrowserClient isAuthenticated
Hi @Wim, Thanks for reaching out. There are a few potential issues to check: 1. Check Loading State You need to handle the loading state when using useKindeBrowserClient. The data may not be immediately available: 
"use client";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";

export function NavMain(items) {
  const { isAuthenticated, user, isLoading } = useKindeBrowserClient();
  
  if (isLoading) return <div>Loading...</div>;

  const filteredItems = items.filter(
    (item) => item.requiresAuth && isAuthenticated
  );
  // ... rest of your component
}
"use client";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";

export function NavMain(items) {
  const { isAuthenticated, user, isLoading } = useKindeBrowserClient();
  
  if (isLoading) return <div>Loading...</div>;

  const filteredItems = items.filter(
    (item) => item.requiresAuth && isAuthenticated
  );
  // ... rest of your component
}
2. Verify Client Component Make sure you have the "use client" directive at the top of your component file since useKindeBrowserClient is a client-side hook. 3. Check KindeProvider If you're using the App Router, verify that your application is wrapped with the necessary auth setup: 
"use client";
import { KindeProvider } from "@kinde-oss/kinde-auth-nextjs";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <KindeProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </KindeProvider>
  );
}
"use client";
import { KindeProvider } from "@kinde-oss/kinde-auth-nextjs";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <KindeProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </KindeProvider>
  );
}
4. Debug with Refresh You can try using the refreshData function to ensure you have the most up-to-date Kinde data: 
const { refreshData } = useKindeBrowserClient();
await refreshData();
const { refreshData } = useKindeBrowserClient();
await refreshData();
5. Console Log Full State For debugging, try logging the full auth state including loading and error states: 
const { isAuthenticated, user, isLoading, error } = useKindeBrowserClient();
console.log("Full auth state:", { isAuthenticated, user, isLoading, error });
const { isAuthenticated, user, isLoading, error } = useKindeBrowserClient();
console.log("Full auth state:", { isAuthenticated, user, isLoading, error });
3 replies
KKinde
Created by disamdev on 12/26/2024 in #💻┃support
Extra fields using Kinde
Hey @disamdev, Thanks for reaching out. It is on our roadmap to allow forms custom fields in our authentication flow - see here. It would be great to confirm more details about the use-case you are trying to achieve. Do you want the option the user selects to be in the payload of a, let's say user.created webhook event, after the user successfully authenticates? Looking forward to hearing back from you.
3 replies
KKinde
Created by TotalScrub on 12/23/2024 in #💻┃support
Refresh claims approach
Hey @TotalScrub, Thanks so much for raising this GitHub issue. My TS teammate will look at this when he is back online in the new year. We are in the process of building out our js-utils package. Once its it at a state we are comfortable with, we will get all our JS-based SDKs to depend on the js utils package. I am confident our js utils package solves your token refresh issues, e.g. when reassigning orgs. Please don't hesitate to raise anymore GitHub issue - they are the best way for my teammates to investigate and communicate on our progress on issues that come up.
20 replies
KKinde
Created by Hans on 12/19/2024 in #💻┃support
Delegated User Management
Thanks for weighing in here @Stephen. @Hans Dickel - I would love to dive into your use-case a bit further. Do you want only a subset of users to manage all users in a given tenant/org? Are you able to elaborate on your use-case a bit more.
6 replies
KKinde
Created by TotalScrub on 12/23/2024 in #💻┃support
Refresh claims approach
P.S. working on Christmas day Oli? That's dedication 😁
We keep our eyes on Kinde businesses and systems, whilst you enjoy your holiday period 😉
20 replies
KKinde
Created by TotalScrub on 12/23/2024 in #💻┃support
Refresh claims approach
I guess one question I would have for your team is why an API call to Kinde's servers via refreshUserClaims() is needed at all, at least in terms of understanding what is actually happening. I would have thought just forcing a refresh of the users auth token would in turn refresh the claims. It's been a minute since I looked at your Nuxt SDK source code, but IIRC there was another method to refresh claims (that didn't require a M2M app) but because it was using your sessionManager the session manager already saw that there was a 'valid' auth token and so doesn't call your servers to refresh, at least to my understanding.
By default, Kinde caches tokens for performance. The cache becomes invalid when user information is updated via UI or API, including: - Profile information updates - Organization membership changes - Role changes - Permission updates - Property changes - User-level feature flag updates Why refreshUserClaims() is needed: There are specific scenarios where individual user tokens don't automatically update, including: - Feature flag changes at organisation/environment level that users inherit - Permissions added to a role that the user has For these cases, the refreshUserClaims endpoint explicitly invalidates the cache for that specific user. This ensures the next token refresh will pull fresh claims from Kinde rather than using cached data. Token Refresh Behaviour You raise an interesting point about the session manager and token validation. While I can't speak to the specific Nuxt SDK implementation, I can explain that just refreshing an auth token alone may not force new claims if the cache is still valid. The refreshUserClaims endpoint specifically invalidates that cache to ensure fresh data on the next token refresh. Let me know if you have any further questions.
20 replies