Clerk Auth Full-Stack app (Express.js, tRPC, Expo Nextjs )

- We'll Talk About:

1. What is Clerk and why?
2. Next-Auth vs Clerk?
3. 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

1. clone The following project ```

git clone https://github.com/mayar4ki/Clerk-auth.git

// or

git clone [e-mail]:mayar4ki/Clerk-auth.git

you'll have there most of what you need

2. Folder structure

![T3 stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeeleipsudgosqi6xxxz.png)

3. 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

![React native expo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8moeo380ei5ywzwmbbh.png)

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

![next js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjcxy066cxigzk3lyy40.png)

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.

![clerk](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agjvksimpywcuh975i26.png)

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

![express js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0id0qavgodbx0mkcr56.png)

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

![tRPC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rcf177bvq1uxhe9m0fw.png)

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

![Prisma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27gpfsn4lozchli1iien.png)

This package provides access to the Prisma client and seeds, allowing easy import wherever needed.

###svix: packages/webhook

![svix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv7du72fdzhftbxnfbue.png)


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.

![webhook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96mk60jw1sojdt1w7itu.png)

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