Progressive Dance

Because every new learning feels like a progressive dance 💃🏽!

Simple App using Next.js, Auth0 and Convex

Next.js

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Convex

Behind the convex reactor: real time is all the time!

Follow the quickstart tutorial here.

npx convex dev

Is Convex a relational or NoSQL DB? Both, read Document ID's: References and Relationships.

I recommend you to follow this tutorial to get a better idea of how convex works.

App Router

Nice To Know:

• Introduced in Next 13 version, there is no real need to use /pages.
• By default all are Server Components, but you can also create Client Components using the use client.

🔐 Authentication - auth0/nextjs SDK + convex custom auth

This application uses the auth0/nextjs SDK which automatically connects with our Auth0 provider with the env variables provided in the .env.local.example file, when calling the handleLogin method under the /app/api/auth/[auth0]/route.ts it creates for us the dynamic routes needed for Authentication flow. It is important to read the difference between the two SDK's security models read here.

On top of that we are saving, and using our users from the Convex provider, a lightweight backend solution that allow us to connect clients to the sync worker, which delegates running Js to the runner, that then queries the DB layer. Some customization in the auth integration was needed, since the auth0/nextjs does not provided the same out-of-the-box solution as auth0/react with the Auth0Provider HOC component, so we needed to create a hook to provide the state of our idToken to convex.

See here difference between idToken and accessToken.

Steps:

auth0/nextjs-auth0

This library requires Node.js 16 LTS and newer LTS versions.

1. Create a new Auth0 application here.
2. Follow the steps here using the App Router. If you want a deeper insight on the implementation, follow the tutorial here.

Awesome, we have our Basic Authentication done, let's integrate with our backend to save the users...

convex custom auth

3. Follow the steps here for the basic set up.
4. Create a custom hook to provide the status of our auth0entication with Convex. See /hooks/next-auth0-provider for an example.
5. Use the newly created hook and pass it to the ConvexProviderWithAuth HOC. See /app/ConvexProvider.tsx.
6. Create another custom hook to use the new authentication state and user passed to the HOC above. See /hooks/user.
7. Test that you can save, and consume a user correctly.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.