How can I use Clerk with Convex on NextJS13 app routes? | Convex Community | Page 1

silent mist Jul 31, 2023, 2:02 PM

#

Any one can help?

I saw the tutorial to use Clerk + Convex on Next13, but is using pages router, I tried, but not works on app router, says router is not ready.

pseudo estuary Jul 31, 2023, 2:03 PM

#

@silent mist Where does it say that router is not ready?

silent mist Jul 31, 2023, 2:03 PM

#

On the browser, let me post here all the code I used, one second!

pseudo estuary Jul 31, 2023, 2:04 PM

#

Here's our guide to using the App router, is this what you're using? https://docs.convex.dev/quickstart/nextjs

#

Clerk's integration with App router is a little different, I could understand these being confusing to combine.

silent mist Jul 31, 2023, 2:09 PM

#

here:

'use client';
import { ReactNode } from 'react';
import { ConvexProviderWithClerk } from 'convex/react-clerk';
import { ConvexReactClient } from 'convex/react';
import { ClerkProvider, useAuth } from '@clerk/nextjs';

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export default function ConvexClientProvider({ children }: { children: ReactNode }) {
    return (
        <ClerkProvider>
            <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
                {children}
            </ConvexProviderWithClerk>
        </ClerkProvider>
    );
}

silent mist Jul 31, 2023, 2:10 PM

#

silent mist here: ``` 'use client'; import { ReactNode } from 'react'; import { ConvexProvi...

Context

#

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import ConvexClientProvider from '../context/ConvexClientProvider';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app'
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang='en'>
            <body className={inter.className}>
                <ConvexClientProvider>{children}</ConvexClientProvider>
            </body>
        </html>
    );
}

silent mist Jul 31, 2023, 2:10 PM

#

silent mist ``` import './globals.css'; import type { Metadata } from 'next'; import { Inter...

Layout

#

Error

#

#

- error Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
null```

#

But! If instead use clerk nextjs, use clerk react, works...

#

import { ReactNode } from 'react';
import { ConvexProviderWithClerk } from 'convex/react-clerk';
import { ConvexReactClient } from 'convex/react';
import { ClerkProvider, useAuth } from '@clerk/clerk-react';

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export default function ConvexClientProvider({ children }: { children: ReactNode }) {
    return (
        <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}>
            <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
                {children}
            </ConvexProviderWithClerk>
        </ClerkProvider>
    );
}

#

This works fine...

pseudo estuary Jul 31, 2023, 2:12 PM

#

💯 thanks for the repro!

#

Using clerk-react is the approach we've tested

silent mist Jul 31, 2023, 2:13 PM

#

BTW, I LOVED CONVEX, for now on, its my favorite serveless backend 🙂

silent mist Jul 31, 2023, 2:13 PM

#

pseudo estuary Using clerk-react is the approach we've tested

Nice, so, will be good to but this on documentation 🙂

pseudo estuary Jul 31, 2023, 2:14 PM

#

but wanting to use clerk-nextjs makes sense, I'll look into this

silent mist Jul 31, 2023, 2:14 PM

#

Yeah, because I don't know what feature we will gonna miss

#

but, another question, now, with this implementation, what change on the flow?

pseudo estuary Jul 31, 2023, 2:15 PM

#

We installing that library in step 6 of https://docs.convex.dev/auth/clerk but we can call it out specifically there

silent mist Jul 31, 2023, 2:15 PM

#

pseudo estuary We installing that library in step 6 of https://docs.convex.dev/auth/clerk but w...

owww, I saw now

#

So, just tell me if I made the correct implementation here (its another thing)

#

Like, I put a funciton to every new user create on clerk, create a profile on convex

#

So, the profile quere/mutations:

import { v } from 'convex/values';

export const getAll = query({
    args: {},
    handler: async (ctx) => {
        return await ctx.db.query('profile').collect();
    }
});

export const getByUserId = query({
    args: {
        userId: v.string()
    },
    handler: async (ctx, { userId }) => {
        return await ctx.db
            .query('profile')
            .withIndex('byUserId', (q) => q.eq('userId', userId))
            .first();
    }
});

export const create = mutation({
    args: {
        userId: v.string(),
        name: v.string(),
        email: v.string(),
        avatarUrl: v.optional(v.string())
    },
    handler: async (ctx, { userId, name, email, avatarUrl }) => {
        return await ctx.db.insert('profile', {
            userId,
            name,
            email,
            avatarUrl
        });
    }
});

export const update = mutation({
    args: {
        userId: v.string(),
        name: v.string(),
        email: v.string(),
        avatarUrl: v.optional(v.string())
    },
    handler: async (ctx, { userId, name, email, avatarUrl }) => {
        const profile = await ctx.db
            .query('profile')
            .withIndex('byUserId', (q) => q.eq('userId', userId))
            .first();

    if (!profile) {
            return await ctx.db.insert('profile', {
                userId,
                name,
                email,
                avatarUrl
            });
        }

        return await ctx.db.patch(profile._id, {
            userId,
            name,
            email,
            avatarUrl
        });
    }
});

export const remove = mutation({
  args: {
    userId: v.string(),
  },
  handler: async (ctx, { userId }) => {
    const profile = await ctx.db
      .query('profile')
      .withIndex('byUserId', (q) => q.eq('userId', userId))
      .first();

    if (!profile) {
      return
    }

    return await ctx.db.delete(profile._id);
  }
});

pseudo estuary Jul 31, 2023, 2:17 PM

#

But I agree this deserves specifically mentioning, Next.js is common enough that we can have a guide specifically for Next.js + Clerk someday

silent mist Jul 31, 2023, 2:18 PM

#

and this is the api/route who will receive the webhooks events:

import type { WebhookEvent } from '@clerk/clerk-sdk-node';
import { ConvexHttpClient } from 'convex/browser';
import { api } from '../../../../../convex/_generated/api';

const client = new ConvexHttpClient(process.env.CONVEX_URL!);

export async function POST(req: Request) {
    const body = (await req.json()) as WebhookEvent;
    console.log(body);
    try {
        if (body.type === 'user.created') {
            const name =
                (body.data.first_name ? body.data.first_name : 'No') +
                ' ' +
                (body.data.last_name ? body.data.last_name : 'Name');

            const user = await client.query(api.profile.getByUserId, { userId: body.data.id });
            if (!user) {
                await client.mutation(api.profile.create, {
                    userId: body.data.id,
                    name,
                    email: body.data.email_addresses[0].email_address,
                    avatarUrl: body.data.profile_image_url
                });

                console.log('Profile created');
            }
        }

        if (body.type === 'user.updated') {
            const name =
                (body.data.first_name ? body.data.first_name : 'No') +
                ' ' +
                (body.data.last_name ? body.data.last_name : 'Name');

            console.log(name);

            await client.mutation(api.profile.update, {
                userId: body.data.id,
                name,
                email: body.data.email_addresses[0].email_address,
                avatarUrl: body.data.profile_image_url
            });

            console.log('Profile updated');
        }

        if (body.type === 'user.deleted') {
            const user = await client.query(api.profile.getByUserId, { userId: body.data.id as string });
            if (user) {
                await client.mutation(api.profile.remove, { userId: body.data.id as string });
            } else {
                console.log('Profile deleted not found profile');
            }
        }

        return NextResponse.json({ status: 'ok' });
    } catch (e) {
        console.log(e);
        return NextResponse.json({ status: 'error' });
    }
}

#

Every time the user is created, updated or delete, I will create the profile on the convex,

pseudo estuary Jul 31, 2023, 2:18 PM

#

@silent mist have you seen the example for this?

silent mist Jul 31, 2023, 2:19 PM

#

or on delete, I will remove

pseudo estuary Jul 31, 2023, 2:19 PM

#

https://github.com/thomasballinger/convex-clerk-users-table

silent mist Jul 31, 2023, 2:19 PM

#

pseudo estuary <@364511299855450114> have you seen the example for this?

No, I made using the webhook clerk documentation, I don't know

pseudo estuary Jul 31, 2023, 2:19 PM

#

Nice, well we can compare https://github.com/thomasballinger/convex-clerk-users-table/blob/main/convex/http.ts#L17

#

so one difference is that you're doing this in a Next.js API route, while the example does it with a Convex HTTP endpoint

silent mist Jul 31, 2023, 2:21 PM

#

nice, its the same logic, but instead a profile, is the entire user

#

yeah

#

i used ngrok

#

for my localhost receive the apis

pseudo estuary Jul 31, 2023, 2:22 PM

#

This looks reasonable though! You're not validating the webhook request yet

silent mist Jul 31, 2023, 2:22 PM

#

Yeah, its one of the things I need to implement

pseudo estuary Jul 31, 2023, 2:23 PM

#

and you should add some authentication to the user profile update mutation, so that it's protected from public use

silent mist Jul 31, 2023, 2:24 PM

#

good insight, thanks!

pseudo estuary Jul 31, 2023, 2:24 PM

#

I think your approach looks good? although using a Convex HTTP endpoint might be more convenient

silent mist Jul 31, 2023, 2:24 PM

#

I will be open a lot more support,

silent mist Jul 31, 2023, 2:24 PM

#

pseudo estuary I think your approach looks good? although using a Convex HTTP endpoint might be...

prob, I din't had this repo before, now I will look again

#

My project will get a lot query relationship

#

So, I will need help with this soon

#

for now, I'm playing with convex, I will try migrate my sanity.io project to here...

pseudo estuary Jul 31, 2023, 2:26 PM

#

Sounds good, let us know how it goes!

silent mist Jul 31, 2023, 2:26 PM

#

🙂

near yarrow Jul 31, 2023, 4:56 PM

#

@silent mist there are helpful posts and code examples for dealing with document relationships on Stack:
https://stack.convex.dev/relationship-structures-let-s-talk-about-schemas

Relationship Structures: Let's Talk About Schemas

In this post we’ll look at some patterns for structuring relationships in the Convex database.

silent mist Jul 31, 2023, 8:30 PM

#

Just to update this topic, the implementation with react clerk instead clerk nextjs will be problematic with app route, because app route relies on clerk nextjs helpers functions

#

I already got some errors

near yarrow Jul 31, 2023, 9:28 PM

#

As long as you stick to client-side and client components, you should be ok. So basically don't use Next-specific Clerk integration. Would that work?

silent mist Jul 31, 2023, 9:30 PM

#

I think will, I just need first understand what the integration with clerk makes, and then take the decision

silent mist Jul 31, 2023, 10:05 PM

#

So, after reading the documentation, the use case is to has a helper context to know if the user are or not logged in and block some query/mut?

near yarrow Jul 31, 2023, 10:06 PM

#

Yup!

#How can I use Clerk with Convex on NextJS13 app routes?