- We'll Talk About:
- What is Clerk and why?
- Next-Auth vs Clerk?
- Integrating Clerk with Next/Expo/Express
1. What is Clerk and why?
Auth & user management services that work with multiple frameworks,
It's easy to use, and helpful when you are using it on multiple applications.
2. Next-Auth vs Clerk?
Next-auth is free, Clerk is not.
But Clerk has a very Generous free plan (5000 Active users)
with a lot of nice features like:
- Verification emails
- Custom domains
- Pre-built components
- Clerk branding
- Community support
Plus, you don't have to deal with multiple consoles for API keys, making your life easier.
Another bonus is that it works with React, Next, and Expo!
About Next-Auth it's good, but I want something that can work on both mobile and web.
It's faster to have everything I need already prepared.
3. Integrating Clerk with Next/Expo/Express
We'll explain a full-stack application featuring:
- Clerk for Authentication and User Management.
- tRPC fully integrated with Clerk & works with both Express.js and Next.js.
- Clerk data synchronized to our backend with webhooks.
- T3 turbo repo.
and for sure tRPC middleware, context, credentials & social auth, webhook, database. and so on, all included
- clone The following project
git clone https://github.com/mayar4ki/Clerk-auth.git
// or
git clone git@github.com:mayar4ki/Clerk-auth.git
you'll have there most of what you need
- Folder structure
- How the integration is done
Note: I won't be able to explain the whole thing because there is too much to talk about. I'll do my best to clarify things, but remember the docs are the best resource. I'm just putting things together.
React-Native(Expo): apps/expo
This Directory will have an expo application that is fully integrated with tRPC & clerk-auth.
This example includes middleware and everything you need for a real-world app
Note: Some code explanations are provided within the comments.
Next.js: apps/nextjs
This Directory will have a Nextjs application that is fully integrated with tRPC & clerk-auth
This example includes middleware and everything you need for a real-world app.
In addition to that, at apps/nextjs/src/pages/api we have two directories
api/trpc: is for tRPC to be used by the Nextjs app or react-native(expo) app
api/user: is for the webhook.
In this application, we have our database that includes our users, so when a new user signs up using Clerk we should create a profile for that user in our db so we can use it for the relations between tables.
To achieve that webhooks should be used.
Clerk uses Svix to send their webhooks.
Using the dashboard you can get everything you need to integrate the webhook
Note: I'll explain more about the webhook in the packages section.
Express.js: apps/express
This project is used to build two APIs
api/trpc: is for tRPC to be used by Nextjs, React, or React-native(expo).
api/webhooks/user: is for the webhook
Note: we can use Nextjs or Expressjs APIs. They are the same.
The goal was to do it in two different ways, but you can use whatever you like.
Now let's start with the packages
tRPC: packages/api
This package contains all of our app logic with contexts, middlewares, routes...
IMPORTANT: The original project used Express for tRPC. Ensure you import the appropriate context.
Prisma: packages/db
This package provides access to the Prisma client and seeds, allowing easy import wherever needed.
svix: packages/webhook
When a user signs up using Clerk, we should create a new user in our db. The Same thing goes for other actions. For example, if the user changes his name or profile pic, we should Sync Clerk data to our backend via webhook.
Clerk-dashboard -> We'll set up a webhook to manage these things and select the actions that should trigger it.
Once configured, your application is production-ready! 🎉🎉 I hope this clarifies things.
Useful Links 🔗
Clerk official example using Nextjs & expo: (no express, webhooks or credential auth)
https://github.com/clerk/t3-turbo-and-clerk
The link to the repo that we are explaining
https://github.com/mayar4ki/Clerk-auth
Top comments (0)