Kinde•11mo ago

New Flutter Package + NextJs

Hello I am so happy that your Flutter package is released. I am building an website with NextJs and an API. Now I want to use the same api routes with my flutter client. Is there a way to post the session from flutter to the api endpoint and validate that in the NextJs middleware ? Smth like getSession or validate session.

9 Replies

Oli - Kinde•11mo ago

Hey Philipp, Great to hear you have already tried our new Flutter SDK. I'll pass this question onto my team mates on Monday and get back to you.

Philipp•11mo ago

Thx, I have an idea for the Flutter SDK. To implement some auth state changes. So when the user is loging out the state changes automaticallz

Oli - Kinde•10mo ago

Hey @Philipp, It sounds like you want to maintain a single session for both NextJS and Flutter. This can be achieved by providing a M2M token between both applications, however the FLutter SDK itself doesn't support this. My team confirmed after testing that the tokens are unique for both Flutter and NextJS. The session for both applications are maintained individually. For this reason, I suggest you maintain your own API auth at Kinde which can be done by registering your API - see the following guide: https://kinde.com/docs/build/register-an-api/. Keep the Flutter frontend auth separately or use the M2M token which can be setup using the following guide: https://kinde.com/docs/build/add-a-m2m-application-for-api-access/. I would suggest maintaining separate sessions for both. Let me know if you need more information on this.

Kinde Docs

Our developer tools provide everything you need to get started with Kinde.

Kinde Docs

Add a machine to machine application - Build on Kinde - Help center

Our developer tools provide everything you need to get started with Kinde.

Philipp•10mo ago

I will test it this days, hope getting this to run 🙂 thank you. You suggest to maintain seperate sessions for both. What would be the best approach ? M2M ? @Oli - Kinde

Oli - Kinde•10mo ago

I will discuss this briefly again with my team and get back to you on the best approach @Philipp Hey @Philipp, I would suggest separate sessions for both Flutter and NextJS, since M2M increases the potential for a security thread in your setup.

Philipp•10mo ago

So I create an application for flutter and nextjs separate and then so I have 3 application ? Then I can verify the session through Kind ?

Oli - Kinde•10mo ago

You would have 2 applications, 1 for flutter and another for NextJS. And yes verify the session through Kinde.

Philipp•10mo ago

And both have the same session to verify? How can verify them in neyt

Oli - Kinde•10mo ago

Hi @Philipp, No, the Flutter and NextJS applications do not share the same session. They maintain their own individual sessions. In NextJS, you can verify the session using the getKindeServerSession helper from the @kinde-oss/kinde-auth-nextjs/server package. This helper provides you with various methods to get session data like user information, authentication status, permissions, etc. Here's an example of how you can use it:

import {getKindeServerSession} from "@Kinde-oss/kinde-auth-nextjs/server";

export default async function Home() {
    const {
        getAccessToken,
        getBooleanFlag,
        getFlag,
        getIntegerFlag,
        getOrganization,
        getPermission,
        getPermissions,
        getStringFlag,
        getUser,
        getUserOrganizations,
        isAuthenticated
    } = getKindeServerSession();

    console.log(await getAccessToken());
    console.log(await getBooleanFlag("bflag", false));
    console.log(await getFlag("flag", "x", "s"));
    console.log(await getIntegerFlag("iflag", 99));
    console.log(await getOrganization());
    console.log(await getPermission("eat:chips"));
    console.log(await getPermissions());
    console.log(await getAccessToken());
    console.log(await getStringFlag("sflag", "test"));
    console.log(await getUser());
    console.log(await getUserOrganizations());
    console.log(await isAuthenticated());
    //...
}

import {getKindeServerSession} from "@Kinde-oss/kinde-auth-nextjs/server";

export default async function Home() {
    const {
        getAccessToken,
        getBooleanFlag,
        getFlag,
        getIntegerFlag,
        getOrganization,
        getPermission,
        getPermissions,
        getStringFlag,
        getUser,
        getUserOrganizations,
        isAuthenticated
    } = getKindeServerSession();

    console.log(await getAccessToken());
    console.log(await getBooleanFlag("bflag", false));
    console.log(await getFlag("flag", "x", "s"));
    console.log(await getIntegerFlag("iflag", 99));
    console.log(await getOrganization());
    console.log(await getPermission("eat:chips"));
    console.log(await getPermissions());
    console.log(await getAccessToken());
    console.log(await getStringFlag("sflag", "test"));
    console.log(await getUser());
    console.log(await getUserOrganizations());
    console.log(await isAuthenticated());
    //...
}

In this example, getAccessToken returns the access token for the session, getUser returns the user information, isAuthenticated returns the authentication status, and so on. You can use these methods to verify and manage the session in your NextJS application. Remember, these methods are asynchronous and return promises, so you need to use await to get the actual values. For more details, you can refer to the NextJS SDK documentation: https://kinde.com/docs/developer-tools/nextjs-sdk/.

Kinde Docs

NextJS App Router SDK v2 - Developer tools - Help center

Our developer tools provide everything you need to get started with Kinde.

Gaming

Programming

New Flutter Package + NextJs