Kinde•4mo ago

Nuxt with Prisma ORM and Kinde Auth

Hello, I'm trying to find an equivalent of the following code for Nuxt.js to connect a user signing in with Kinde to a Prisma powered database before initial page load.

import {PrismaClient} from "@prisma/client";
import {getKindeServerSession} from "@kinde-oss/kinde-auth-nextjs/server";
import {NextResponse} from "next/server";

const prisma = new PrismaClient();

export async function GET() {
    const {getUser} = getKindeServerSession();
    const user = await getUser();

    if (!user || user == null || !user.id)
        throw new Error("something went wrong with authentication" + user);

    let dbUser = await prisma.user.findUnique({
        where: {kindeId: user.id}
    });

    if (!dbUser) {
        dbUser = await prisma.user.create({
            data: {
                kindeId: user.id,
                firstName: user.given_name ?? "",
                lastName: user.family_name ?? "",
                email: user.email ?? "" // Using nullish coalescing operator to provide a default empty string value
            }
        });
    }

    return NextResponse.redirect("http://localhost:3000/dashboard");
}

import {PrismaClient} from "@prisma/client";
import {getKindeServerSession} from "@kinde-oss/kinde-auth-nextjs/server";
import {NextResponse} from "next/server";

const prisma = new PrismaClient();

export async function GET() {
    const {getUser} = getKindeServerSession();
    const user = await getUser();

    if (!user || user == null || !user.id)
        throw new Error("something went wrong with authentication" + user);

    let dbUser = await prisma.user.findUnique({
        where: {kindeId: user.id}
    });

    if (!dbUser) {
        dbUser = await prisma.user.create({
            data: {
                kindeId: user.id,
                firstName: user.given_name ?? "",
                lastName: user.family_name ?? "",
                email: user.email ?? "" // Using nullish coalescing operator to provide a default empty string value
            }
        });
    }

    return NextResponse.redirect("http://localhost:3000/dashboard");
}

The code comes from this tutorial https://kinde.com/blog/engineering/set-up-a-nextjs-app-with-prisma-orm-and-kinde-auth/ and uses the {getKindeServerSession} helper from the Next SDK to access user details from the server before the page loads — I can not see this helper in either the Nuxt or Typescript SDK. Thanks

Kinde Blog

Set up a Next.js app with Prisma ORM and Kinde Auth

This guide provides detailed steps on how to seamlessly integrate Kinde, a robust authentication system, with Prisma ORM in a Next.js application.

5 Replies

Oli - Kinde•4mo ago

Hey @DAvid, Thanks for reaching out. I will get a Nuxt expert team mate to help you out. Hey @DAvid, I apologise for the delay. My Nuxt team mate is speaking with my other team mate who is an expert in Prisma. I'll get back to you early next week.

DAvid•3mo ago

@Oli - Kinde thanks for the update. Hopefully if there's a simple way to access user info from the server side in TypeScript, this can be used for other ORMs and TS based SDKs also. Thanks! @Oli - Kinde Do you have any update on this please?

Oli - Kinde•3mo ago

Hey @DAvid, Apologies for the delay. If you are using the TS SDK or Nuxt module and you want to replicate the code above, to connect a user signing in with Kinde to a Prisma powered database before initial page load, I suggest the following. You will need to get details about the logged-in user, and if the user exists you need their ID, first name, last name and email. - In the Nuxt module, you can get these details using $auth.user object - see here - In the TypeScript SDk, you can get these details using the getUserProfile helper function: - see here Alternatively, you can use the @kinde/management-api-js from the Kinde API in your server, to get user details. Please let me know if you have any further questions.

GitHub

GitHub - kinde-oss/management-api-js: javascript package for intera...

javascript package for interacting with the Kinde Management API - kinde-oss/management-api-js

Kinde docs

Nuxt module

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

Kinde docs

TypeScript SDK

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

DAvid•3mo ago

Hi @Oli - Kinde thank you for getting back to me - I have tried to apply some of your advice today, but with no success. 'In the Nuxt module, you can get these details using $auth.user object - see here' Will this work on the server side before initial page load? - I thought this was just for the front end? 'In the TypeScript SDk, you can get these details using the getUserProfile helper function: - see here' Can i install @kinde-oss/kinde-typescript-sdk into the Nuxt template and get this working? If so will what import statement should I use, as I couldnt see in the docs. Alternatively, you can use the @kinde/management-api-js from the Kinde API in your server, to get user details. Can I use this inside my nuxt template to get details of an authenticated user also? Thanks for your help

Oli - Kinde•3mo ago

Hey @DAvid, I am so terribly sorry. This message totally slipped beneath the cracks of my Discord notifications - my bad 🤦‍♂️ Are you still facing issues trying to integrate your Nuxt app with Prisma ORM and Kinde Auth?

Gaming

Programming

Nuxt with Prisma ORM and Kinde Auth