Sophia Posts - Answer Overflow

Sophia

Explore posts from servers

•Created by Sophia on 5/21/2024 in #💻┃support

How to refresh tokens in a Next.js client component?

Hi there, I've been trying to work out a solution to an issue with my auth flow for a while and thought I had it but having more issues. I'm using tRPC in a Next.js full stack app and have updated my user's permissions via the Kinde API. Now I'm trying to get those updated permissions to take effect in my app, without logging out and logging in again. They're definitely working in the Kinde UI. The component I want to see them updated in is a client component. I've tried making calls to my tRPC API methods, which then contain a call to refreshTokens() from getKindeServerSession(). NB - all other methods from getKindeServerSession() work fine in my tRPC files. However, no matter what, the permissions aren't returning correctly. Here's a snippet from my auth-callback function where I initially update the org & permissions:

await fetch("https://kettleon.kinde.com/api/v1/organizations/${newOrgCode}/users",
                {
                    method: 'POST',
                    body: JSON.stringify(userInputBody),
                    headers: headers
                })
                .then(function (res) {
                    return res.json();
                });

            organisation = newOrgCode
        }
        const { refreshTokens } = getKindeServerSession();
        await refreshTokens();

And here's a specific refresh function I tried as well:

    refreshUser: privateProcedure.query(async ({ ctx, input }) => {
        const { refreshTokens } = getKindeServerSession()
        const tokens = (await refreshTokens()) as { accessToken: string, refreshToken: string };
        console.log(tokens)
        const{ getPermissions } = getKindeServerSession()
        const permissions = (await getPermissions()) as KindePermissions | null;
        console.log(permissions) // returns {permissions: [], orgCode: null}
        return { data: permissions?.permissions, status: 200, success: true };
    }),

Neither seems to work 😦 any help very much appreciated

14 replies

KKinde

•Created by Sophia on 5/6/2024 in #💻┃support

Kinde sign-in screen register link means no new org

5 replies

TtRPC

•Created by Sophia on 3/11/2024 in #❓-help

TRPC useQuery() in NextJS full stack with TypeScript

Hi, I'm relatively new to web dev in general and just trying to get to grips with using TRPC so please bear with me! I've set up a NextJS fullstack app in TypeScript, using Kinde and MongoDB. I've managed to get TRPC to add a user to the database from the frontend. So the setup of TRPC throughout the app should in theory be fine. However I cannot seem to get the useQuery() hook to retrieve users. The frontend code is as follows:

 const {data: userData} = trpc.getUsers.useQuery();
    
    let users = userData ? userData.data : [];

    if (users !== undefined) {
    console.log("users", users)
    }

The backend method is:

getUsers: privateProcedure
.query(async ({ ctx }) => {
try{
const { userEmail } = ctx;
await dbConnect();
const foundUser = await userModel.findOne({ email: userEmail });
if (!foundUser) throw new TRPCError({ code: "UNAUTHORIZED" })

const users = await userModel.find({ team: foundUser.team });

// console.log("backend data: ", users)

return {
data: users, status: 200, success: true
};
} catch (err) {
console.log(err)
return { data: [], status: 500, success: false };
}
})

The console.log() marked "backend data" returns an array of user objects, so the call is being made, and the database is returning the list. However, the frontend returns undefined. So somewhere in between it's not passing the value. I've been getting this error throughout (even when using the addUser method, which works), which I've been unable to diagnose but I imagine it's the culprit: ⨯ Error: No response is returned from route handler '/(my filepath)/src/app/api/trpc/[trpc]/route.ts'. Ensure you return a Response or a NextResponse in all branches of your handler. My handler is as follows: const handler = (req: Request) => { fetchRequestHandler({ endpoint: '/api/trpc', req, router: appRouter, createContext: () => ({}), }) } export { handler as GET, handler as POST }` Any help at all would be so so very much appreciated. Thank you ❤️

3 replies

KKinde

•Created by Sophia on 3/6/2024 in #💻┃support

Creating users via Kinde API

Hi there! Super new to Kinde and web development in general so apologies for my lack of knowledge in advance. I'm trying to do something that I hope can be done via Kinde but I'm not 100% sure - I'd like for a logged in user with a specific role (ie a manager) to be able to add users to Kinde (within their organisation) via our site using the Kinde API. Our app is full-stack NextJS using app routing with TypeScript, so I looked through the NextJS SDK documentation. I first got very stuck looking at the code snippets there as I couldn't find any documentation for how to use the API with createKindeManagementAPIClient especially trying to use the createUser method on the usersApi. I then tried to just use fetch() using the code samples on the API docs themselves, but had issues with the access token. I've tried to obtain the access token via Postman which worked fine, so I think my setup on Kinde is correct, but for some reason the client authentication fails when I try to run it locally in my code. Could this be because I'm using http://localhost:3000 for testing? I've tried setting the "audience" parameter to this URL to see if this resolves it. I'll follow up with a comment containing the code I've currently got in my component where I'm trying to add users. The env variables are the ones for my M2M application in Kinde. I've switched the API on for this application. It's currently not getting to the addUser() function because the accessToken is coming back undefined because the client authentication isn't working. Any ideas as to why this could be? Is it the domain or have I missed something else? Thank you in advance ❤️

11 replies

Gaming

Programming