Create a User model in Prisma with Clerk on Signup

fjzon · 2023-04-14T19:26:09.357Z

One of the benefits I find with NextAuth is that it simplifies a lot by adding a User model to Prisma, so that I have each user in my database right at the start. I'm having some difficulties in finding some documentation to implement this with Clerk. I guess that I need to create some kind of mutation right when the user signs up. But in that case I would need the data (atleast userId) right when the user creates their account (I am using Discord Provider). Anyone know of some kind of solution to implement this? Do I perhaps need to create some custom authentication with Clerk?

J

James Perkins•4/14/23, 7:27 PM

So by default you don't need a users table. You just need the user_id.

However in cases where you might need it this is made possible by either webhooks or handling it clientside after sign up.

J

James Perkins•4/14/23, 7:31 PM

webhook example attached

message.txt2.41KB

J

James Perkins•4/14/23, 7:31 PM

Basically Clerk is the users table, so maximum you need user_id for relationships which is avail anywhere in the stack (client,middleware,server) so it's always available for any DB calls for relationships.

F

fjzonOP•4/14/23, 7:40 PM

Sorry for my lack of knowledge. I've managed to handle like "the current sessioned user". But I am currently building a golf application. So when the user creates a new Round, she/he should be able to add other users to play with. I am completely with you that it's enough with the user_id.

But I think that each user should live somewhere in my database, to handle relations between the users.

Therefor I thought that I would need to search for all the other users from the database whenever I create a new round (like api.users.getAll.useQuery()).

J

James Perkins•4/14/23, 7:47 PM

Sure so I don't know the full business case... Seems unscalable to produce every user you have in the app to be returned at once 100,000 users is a lot to be retrieving for a single lookup.

Where you have the bare minimum table called golfers for example with something like :

user_id
name
email. (maybe)
Enough to build the relationship.

That is exactly what is in the webhook provided above.

Or if it's more social where it's a golfer with a friend list where they can invite them to a round for example.

Then you only need the user_id's in your DB because you can call Clerk to get all the user data directly like names, images, etc.

F

fjzonOP•4/14/23, 7:57 PM

Alright cool! Ye the fetch all users was just some random example. It's more like you wrote that each user invites their friends.

And yes, if I atleast am able to store the user_id in the database for each user, i'm satisfied!

Im not quite familiar with Webhooks. But I guess I could find some documentation in how I would implement the code you provided. Thank you for that!

I find Clerk really cool by the way, so there's no like "offense" saying what NextAuth provides. It's just what I'm used to and learned to know.

J

James Perkins•4/14/23, 7:58 PM

Oh none taken! Next Auth is awesome and still my go to for self hosting when Clerk doesn't meet the requirements.

J

James Perkins•4/14/23, 7:59 PM

It's hard to wrap your mental model around Clerk when you are using self hosting stuff because you need tables etc.

J

James Perkins•4/14/23, 7:59 PM

The webhook I provided is a great start point but you can read more about how this all works here:

https://clerk.com/docs/users/sync-data-to-your-backend

C

Chill Guy•4/14/23, 11:41 PM

Realized that I will also need to use webhooks for something similar. I got a request too work if I put a webhook.js file in nextjs/pages/api-folder. However, if I put it in like expo/src/api, it doesn't work. I assume I will have to run the tunnel (localTunnel) from the expo folder. And run it on port 19000, since that's what it looks like expo is running from.

J

James Perkins•4/14/23, 11:56 PM

Well expo doesn’t have an server side api endpoint like next.js.

J

James Perkins•4/14/23, 11:57 PM

Which is why Next.js works and Expo doesn’t. Why would you need a webhook for expo?

J

James Perkins•4/14/23, 11:59 PM

If your thinking about Clerk in this scenario.

Both Next.js and Expo sign ups work the same so the webhook endpoint can live anywhere (next.js) and we will handle all sign ups

J

jingleberry•4/16/23, 9:58 AM

Possibly related, for super simple use cases is clerk user metadata sufficient?

For example I want to keep track of a stripe customer Id mapped to its clerk user id.

Originally I thought of saving the mapping in db. But then I realised it’s much simpler to just have the stripe customer Id saved as clerk user metadata (and you can do the same in stripe)

Will I face any pitfalls with this approach? (i.e is it risky to store important info using the clerk user metadata api?)

JJames Perkins webhook example attached

A

albatroz•4/16/23, 10:28 AM

how can i add this as a router?

A

albatroz•4/16/23, 10:30 AM

basically i am asking where to add this function?

F

fjzonOP•4/16/23, 10:45 AM

@Albatros So from what I understand of what James said. Both the NextJS and Expo apps are connected to the same Clerk API (or whatever you should say). Basically that means that whenever an event is fired from NextJS or Expo that has something to do with Clerk, it affects the same data.

So what you can do is that you should be able to put a file called webhook.ts/js in the NextJS api folder, since that's the only api endpoint that acts on the server.

E.g. your-application/apps/nextjs/src/pages/api/webhook.ts/js

E.g. your-application/apps/nextjs/src/pages/api/webhook.ts/js

E.g. your-application/apps/nextjs/src/pages/api/webhook.ts/js

E.g. your-application/apps/nextjs/src/pages/api/webhook.ts/js

Remember that when you use this Webhooks locally, you need something like localTunnel or Ngrok to make it work. I watched this video yesterday: https://www.youtube.com/watch?v=rAv4ZLGM22Q&ab_channel=JamesPerkins

YouTubeJames Perkins

Webhooks: What They Are, How To Use Them & Why You Need Them

Join this channel to get access to perks:
https://www.youtube.com/channel/UC-zet8Eyyy-OUE_fmocp3Wg/join

Want to support the channel? Click below
https://www.buymeacoffee.com/jamesperkins

Follow me on:

Website/Blog: https://jamesperkins.dev

Twitter: https://twitter.com/james_r_perkins

Linkedin: https://www.linkedin.com/in/james-perkins-26...

J

James Perkins•4/16/23, 10:46 AM

Ah sweet you watched my video

A

albatroz•4/16/23, 10:48 AM

You mean

E.g. your-application/apps/nextjs/src/pages/api/webhook/index.js

E.g. your-application/apps/nextjs/src/pages/api/webhook/index.js

E.g. your-application/apps/nextjs/src/pages/api/webhook/index.js

E.g. your-application/apps/nextjs/src/pages/api/webhook/index.js ??

Aalbatroz You mean`E.g. your-application/apps/nextjs/src/pages/api/webhook/index.js` ??

J

James Perkins•4/16/23, 10:48 AM

That is up to you, either is acceptable, if you want to use a folder structure that works also

A

albatroz•4/16/23, 11:07 AM

I am not sure what i am doing wrong.
i added env variable to vercel deployment. I can also see the webhook function being called by clerk. But clerk says it it's 404

A

albatroz•4/16/23, 11:07 AM

A

albatroz•4/16/23, 11:08 AM

J

James Perkins•4/16/23, 11:08 AM

What is the URL that you setup in Clerk.

A

albatroz•4/16/23, 11:08 AM

import type { IncomingHttpHeaders } from "http";
import type { NextApiRequest, NextApiResponse } from "next";
import type { WebhookRequiredHeaders } from "svix";
import { Webhook } from "svix";
import { Prisma, prisma } from "@acme/db";

const webhookSecret: string = process.env.WEBHOOK_SECRET || "";

export default async function handler(
  req: NextApiRequestWithSvixRequiredHeaders,
  res: NextApiResponse,
) {
  const payload = JSON.stringify(req.body);
  const headers = req.headers;
  const wh = new Webhook(webhookSecret);
  let evt: Event | null = null;
  try {
    evt = wh.verify(payload, headers) as Event;
  } catch (_) {
    return res.status(400).json({});
  }

  const { id } = evt.data;
  // Handle the webhook
  const eventType: EventType = evt.type;

  if (eventType === "user.created" || eventType === "user.updated") {
    const { gstNumber, phoneNumber, id, name } = evt.data;

    if (!phoneNumber) {
      return res.status(400).json({});
    }

    await prisma.user.upsert({
      where: { id: id },
      update: {
        name: name,
        gstNumber: gstNumber,
      },
      create: {
        id: id,
        phoneNumber: phoneNumber,
        gstNumber: "",
        role: "BASIC",
        subscribedPlans: { create: { enabledPlan: "BASIC" } },
      },
    });
  }
  console.log(`User ${id} was ${eventType}`);
  res.status(201).json({});
}

type NextApiRequestWithSvixRequiredHeaders = NextApiRequest & {
  headers: IncomingHttpHeaders & WebhookRequiredHeaders;
};

type Event = {
  data: Prisma.UserCreateInput;
  object: "event";
  type: EventType;
};

type EventType = "user.created" | "user.updated" | "*";

import type { IncomingHttpHeaders } from "http";
import type { NextApiRequest, NextApiResponse } from "next";
import type { WebhookRequiredHeaders } from "svix";
import { Webhook } from "svix";
import { Prisma, prisma } from "@acme/db";

const webhookSecret: string = process.env.WEBHOOK_SECRET || "";

export default async function handler(
  req: NextApiRequestWithSvixRequiredHeaders,
  res: NextApiResponse,
) {
  const payload = JSON.stringify(req.body);
  const headers = req.headers;
  const wh = new Webhook(webhookSecret);
  let evt: Event | null = null;
  try {
    evt = wh.verify(payload, headers) as Event;
  } catch (_) {
    return res.status(400).json({});
  }

  const { id } = evt.data;
  // Handle the webhook
  const eventType: EventType = evt.type;

  if (eventType === "user.created" || eventType === "user.updated") {
    const { gstNumber, phoneNumber, id, name } = evt.data;

    if (!phoneNumber) {
      return res.status(400).json({});
    }

    await prisma.user.upsert({
      where: { id: id },
      update: {
        name: name,
        gstNumber: gstNumber,
      },
      create: {
        id: id,
        phoneNumber: phoneNumber,
        gstNumber: "",
        role: "BASIC",
        subscribedPlans: { create: { enabledPlan: "BASIC" } },
      },
    });
  }
  console.log(`User ${id} was ${eventType}`);
  res.status(201).json({});
}

type NextApiRequestWithSvixRequiredHeaders = NextApiRequest & {
  headers: IncomingHttpHeaders & WebhookRequiredHeaders;
};

type Event = {
  data: Prisma.UserCreateInput;
  object: "event";
  type: EventType;
};

type EventType = "user.created" | "user.updated" | "*";

import type { IncomingHttpHeaders } from "http";
import type { NextApiRequest, NextApiResponse } from "next";
import type { WebhookRequiredHeaders } from "svix";
import { Webhook } from "svix";
import { Prisma, prisma } from "@acme/db";

const webhookSecret: string = process.env.WEBHOOK_SECRET || "";

export default async function handler(
  req: NextApiRequestWithSvixRequiredHeaders,
  res: NextApiResponse,
) {
  const payload = JSON.stringify(req.body);
  const headers = req.headers;
  const wh = new Webhook(webhookSecret);
  let evt: Event | null = null;
  try {
    evt = wh.verify(payload, headers) as Event;
  } catch (_) {
    return res.status(400).json({});
  }

  const { id } = evt.data;
  // Handle the webhook
  const eventType: EventType = evt.type;

  if (eventType === "user.created" || eventType === "user.updated") {
    const { gstNumber, phoneNumber, id, name } = evt.data;

    if (!phoneNumber) {
      return res.status(400).json({});
    }

    await prisma.user.upsert({
      where: { id: id },
      update: {
        name: name,
        gstNumber: gstNumber,
      },
      create: {
        id: id,
        phoneNumber: phoneNumber,
        gstNumber: "",
        role: "BASIC",
        subscribedPlans: { create: { enabledPlan: "BASIC" } },
      },
    });
  }
  console.log(`User ${id} was ${eventType}`);
  res.status(201).json({});
}

type NextApiRequestWithSvixRequiredHeaders = NextApiRequest & {
  headers: IncomingHttpHeaders & WebhookRequiredHeaders;
};

type Event = {
  data: Prisma.UserCreateInput;
  object: "event";
  type: EventType;
};

type EventType = "user.created" | "user.updated" | "*";

import type { IncomingHttpHeaders } from "http";
import type { NextApiRequest, NextApiResponse } from "next";
import type { WebhookRequiredHeaders } from "svix";
import { Webhook } from "svix";
import { Prisma, prisma } from "@acme/db";

const webhookSecret: string = process.env.WEBHOOK_SECRET || "";

export default async function handler(
  req: NextApiRequestWithSvixRequiredHeaders,
  res: NextApiResponse,
) {
  const payload = JSON.stringify(req.body);
  const headers = req.headers;
  const wh = new Webhook(webhookSecret);
  let evt: Event | null = null;
  try {
    evt = wh.verify(payload, headers) as Event;
  } catch (_) {
    return res.status(400).json({});
  }

  const { id } = evt.data;
  // Handle the webhook
  const eventType: EventType = evt.type;

  if (eventType === "user.created" || eventType === "user.updated") {
    const { gstNumber, phoneNumber, id, name } = evt.data;

    if (!phoneNumber) {
      return res.status(400).json({});
    }

    await prisma.user.upsert({
      where: { id: id },
      update: {
        name: name,
        gstNumber: gstNumber,
      },
      create: {
        id: id,
        phoneNumber: phoneNumber,
        gstNumber: "",
        role: "BASIC",
        subscribedPlans: { create: { enabledPlan: "BASIC" } },
      },
    });
  }
  console.log(`User ${id} was ${eventType}`);
  res.status(201).json({});
}

type NextApiRequestWithSvixRequiredHeaders = NextApiRequest & {
  headers: IncomingHttpHeaders & WebhookRequiredHeaders;
};

type Event = {
  data: Prisma.UserCreateInput;
  object: "event";
  type: EventType;
};

type EventType = "user.created" | "user.updated" | "*";

J

James Perkins•4/16/23, 11:08 AM

the code is fine a 404 means the API endpoint you put into Clerk doesn't exist

A

albatroz•4/16/23, 11:09 AM

that's strange

JJames Perkins What is the URL that you setup in Clerk.

A

albatroz•4/16/23, 11:09 AM

it's the deployement url

A

albatroz•4/16/23, 11:09 AM

followed by the function /api/webhook/createuser

A

albatroz•4/16/23, 11:10 AM

J

James Perkins•4/16/23, 11:11 AM

Can you send me the url via DM (assuming you don't wan tto expose it here) so I can look. FYI I work at Clerk in case you are worried about sending random DMs with URLs

A

albatroz•4/16/23, 11:13 AM

Sure

J

James Perkins•4/16/23, 11:24 AM

Can you send me the middleware file you are using?

A

albatroz•4/16/23, 11:24 AM

i got a error with 400 status

A

albatroz•4/16/23, 11:24 AM

J

James Perkins•4/16/23, 11:24 AM

that was me

J

James Perkins•4/16/23, 11:25 AM

I was pinging the endpoint directly from my machine.

JJames Perkins Can you send me the middleware file you are using?

A

albatroz•4/16/23, 11:25 AM

this is the folder structure.

A

albatroz•4/16/23, 11:25 AM

Aalbatroz ```typescript import type { IncomingHttpHeaders } from "http"; import type { Nex...

A

albatroz•4/16/23, 11:25 AM

this is the createUser.ts file

J

James Perkins•4/16/23, 11:25 AM

Can you send me the middelware file.

A

albatroz•4/16/23, 11:25 AM

And this is the middleware file

A

albatroz•4/16/23, 11:25 AM

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export default withClerkMiddleware((_req: NextRequest) => {
  return NextResponse.next();
});

// Stop Middleware running on static files
export const config = {
  matcher: [
    /*
     * Match request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     *
     * This includes images, and requests from TRPC.
     */
    "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)",
  ],
};

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export default withClerkMiddleware((_req: NextRequest) => {
  return NextResponse.next();
});

// Stop Middleware running on static files
export const config = {
  matcher: [
    /*
     * Match request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     *
     * This includes images, and requests from TRPC.
     */
    "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)",
  ],
};

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export default withClerkMiddleware((_req: NextRequest) => {
  return NextResponse.next();
});

// Stop Middleware running on static files
export const config = {
  matcher: [
    /*
     * Match request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     *
     * This includes images, and requests from TRPC.
     */
    "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)",
  ],
};

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export default withClerkMiddleware((_req: NextRequest) => {
  return NextResponse.next();
});

// Stop Middleware running on static files
export const config = {
  matcher: [
    /*
     * Match request paths except for the ones starting with:
     * - _next
     * - static (static files)
     * - favicon.ico (favicon file)
     *
     * This includes images, and requests from TRPC.
     */
    "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)",
  ],
};

J

James Perkins•4/16/23, 11:29 AM

Can you do me a favor, can you just change the file to create-user and then redeploy and change in the webhook.

A

albatroz•4/16/23, 11:30 AM

ok

JJames Perkins Can you do me a favor, can you just change the file to create-user and then rede...

A

albatroz•4/16/23, 11:31 AM

no it did not worked

J

James Perkins•4/16/23, 11:32 AM

So it's something for sure with the deployment... hmm

A

albatroz•4/16/23, 11:33 AM

is there a way to get logs from the vercel function?
the

console.log

console.log

like aws cloudWatch

J

James Perkins•4/16/23, 11:51 AM

If you put logs in it it will log out. but to keep them longer you need to log drain.

But if it's 404ing then there are no logs. Running some tests on my side.

Create a User model in Prisma with Clerk on Signup

Similar Threads

Similar Threads

Similar Threads