K
Kinde•4w ago
kishan_6969

JWT guide needed

understand this scenario, my app requires user to fill up extra form for other details after authentication, i want that user should be able to use the platform's some routes if the user has completed the form fillup so i am using nextjs for frontend and nodejs express for backend i am thinking of using a flag like isProfileComplete that i will get from jwt token and then create a middleware to protect the routes on basis of the flag in token, how to add this in jwt then fetch it in backend and then alter the boolean value of it
4 Replies
Oli - Kinde
Oli - Kinde•4w ago
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);
    }
};
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 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
});
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 Let me know if you have any further questions.
kishan_6969
kishan_6969OP•4w ago
ok i get it , thankyou so much for replying , btw your support is great, also the kinde ai works great .
kishan_6969
kishan_6969OP•4w ago
i would like to know how can i refresh the jwt token in client component in nextjs, does it work in server component only?, i mean if some feature or properties are changed then they are reflected in new token right?, so how do i refreshtoken without the need of logout and login, i searched some more docs, and got something related to this on your issues in github, i think this is what i am looking for : https://github.com/kinde-oss/kinde-auth-nextjs/pull/254, but i not able to understand it, can u help me out here, also does this work for properties i defined in my kinde account, like one is isProfileComplete, so on basis of this i want to redirect user, and in backend i am thinking of using a middleware to protect my routes but for that i need the updated refreshtoken, can u help me out here?
GitHub
Fix/refresh token app router by DanielRivers · Pull Request #254 · ...
Explain your changes This PR includes a significant improvement to token refreshing. Tokens now refresh seamlessly behind-the-scenes, providing users with the best possible experience. In order to ...
Oli - Kinde
Oli - Kinde•4w ago
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.

Did you find this page helpful?