Easy Multi-tenant NextJS Apps With Clerk
Vložit
- čas přidán 26. 07. 2024
- Clerk 5 is an amazingly easy way to add authentication, with roles, permissions, and organizations to your application. It is a powerful toolkit for multi-tenancy. Let's dig in!
Code: github.com/jherr/clerk-5-role...
👉 Upcoming NextJS course: pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
5:27 Clerk Provider in React
7:00 Protecting Routes with Clerk Middleware
11:53 Applying The Show List to a User
19:27 Sync Active Organizations
25:09 Revolutionary User Interaction
27:43 Clerk v5 - Věda a technologie
I would love to see this role based Auth with next/auth and your implementation of that cool Protect component. 👌
Thanks! By far my favourite educational youtuber. Keep it up💙
Just another reason to love Clerk! TY Jack
A ton of people have been asking about Auth in Next.js. Thanks for this!
Cool. Thanks.
Very good
This looks great - awesome tutorial!
Lol “CZcams loves that so thank you for that “
I'm working on an app now that needs role based permissions. I worry with this route that I'm putting too much of my "eggs in one basket." I'm looking for libraries that will allow me to keep this level in-house. Right now, I can't see past the nightmare of having my roles setup and something happens to Clerk. I'm loving the video the drag/drop functionality--as I need to implement that for my app too! Thanks!!!
I am also wondering about this. does this increase the amount of calls to clerk as opposed to storing roles in the database? will this increase clerk costs?
que grande Jack, este contenido me sirve mucho!
De nada
I had issues connecting clerk to expo(49) app with tamagui, the context providers for tama and clerk has some sort of race condition on app router system
Hi Jack, I recently migrated from Clerk to WorkOS due to needing to support multiple authentication types (SAML + magic link) depending on the organization. Would love to get your opinion of WorkOS auth solution.
Guess the question remains on what services the stack hosting the app supports. It also depends on the ability to code for the admin building the site. So databases, analytics, authentication, scalability become externally provided by third parties. Making money from these services and allowing free hosting like amplify aws is greared towards the use of databases, analytics, authentication, scalability by third parties. Many do it yourself programmers prefer to save time by using these services. Simple authentication is relatively easy but multiple types of authentication gets heavy. I don’t like these models either but the database and authentication have become third party unless one host provides them all. Even if a stack supports them all you’re left with the source code always at the mercy of the provider leaving a security layer uncontrolled. So static ips to host a server becomes the last option, expensive, hard to scale and securing the stack itself becomes another workload.
Am I just dumb or is it impossible to have a checkbox that says "I have read and accept the Terms of Service and Privacy Policy" and another that says "I agree to receive marketing emails" in the Clerk ui?
I was trying to design something like this for a project of mine but the sessionClaims never added the custom keys (even although i declared them on globals) and the JWT token does indeed contain the memberships.
So i decided to copy your repo and check the differences, but to my surprise even the copy of your repository doesn't bring the membership on the custom claims. Could that be a Clerk update breaking change?
Thanks for showing this!
One question, why is SyncActiveOrganization not made into a hook (for eg useSyncActiveOrganization)? IMO it would be much more natural to use it in such a way since it doesn't return jsx.
Oh, that's a great idea!
In this example we grab memberships from a server component (RootLayout) and then we pass it to the client component (SyncActiveOrg), if we only had the hook we couldn't just call the hook inside the body of RootLayout.
But yes this would be possible with just client components.
I want to assign a default orgenozation to a user when he logins for the first time.
how can i acheive this?
Only halfway thru, following so far, but, Im assuming all of the things youre doing on the clerk admin pages can be done programmatically, for example if you have stripe hooked up to a webhook and you want to create a user upon receiving a payment successful. Also curious how to "attach" a dynamically created user to an org, complete with specific permissions / roles.
Interactions!!!! you have leaked some CREDENTIAL CODES DUDE!!!! 😅 great video great content and thanks clerk for sponsoring!!
Clerk's Phone OTP Auth doesn't work for several countries, especially in India & Bangladesh.
good
I’ve a custom backend with cookies and jwt, how to implement a custom Auth ?
How long on average should it take someone to set this up for me? I had Kinde set up and it took my developer like 7 days to get Kinde to work with a pro role and give pro features to that account, was frustrating and super slow
Can you tell me when will your nextjs course come?
I'm working on it every day.
Thanks for making this video. I am confused. You are using a free account there right? I got the pro plan ($25 a month). When going to "Organizations Settings" both "Roles" and "Permissions" tabs, request I upgrade my account (Enhanced B2B SaaS which cost $100 a month..bit much for a hobby project!). Or am I missing something? Did you sponsor gave you an account with all add-ons loaded already?)
Hoping I'm just confused because I'm inches away from just implementing my own solution (auth0 or something)
You planning on making WP videos? it's the only jobs that accept juniors right now.
Yeah clerk is good for small scaled project, but for production level stuff I would choose next auth v5. I know it takes a lot of time to auth correctly but dude it’s a skill issue if you can’t do it. It’s cheaper for your customers as well. So you better learn the hard stuff
Omg, we know your credentials. There's a big leak on interent now.
Maybe Nextjs 14 with firebase auth? 50k users in a free plan :) A version with credentials (aignup and sign in) and with Google sign in.
Looks cool of course, but I do not trust Clerk that much. And I do not know if it makes sense to use something like clerk. If you understand that you need such a complicated app with lots of roles where each user should have different rights, it is just safer and easier to go for AWS, where you can control and integrate auth, backend, roles and host your app in one place and pay just one bill.
The only thing that I find useful is that Clerk is HIPAA compliant, Google still can't make their auth HIPAA compliant :(
When do we spect the pronextjs course?
Working hard every single day on it.
@@jherr Thank you for answering. Can't wait. 👍🏻
Really nice video! i was wondering if i could help you edit your videos and make them more engaging.
hey you leaked your credentials 😂😂😂
I don't like that it made all of my application dynamic.
It should depend on where you put auth checks. If you don't put them in the layout it shouldn't force you into dynamic routes. It's possible in the demo code it's in the layout, but that doesn't mean it needs to be there.
By "Easy Multi-tenant" you mean have an app with users. Why use normal english when you can go with something more click-baity right?
Nope. I meant multi-tenant because this is multi-tenant. The org is the tenant. The data is sharded by org from the front to the back.
@@jherris it possible to have a user signup straight into the smith family tenant from a Signup page from the slug?
I am sorry I love watching you but we won’t use third party authentication, it is lazy and expensive. Also micropayments are everywhere in our lives. Netflix, etc. I don’t want to add one more.
Ya, they can sponsor all they want. I need a really good reason to ever even consider 3rd party auth
Guess the question remains on what services the stack hosting the app supports. It also depends on the ability to code for the admin building the site. So databases, analytics, authentication, scalability become externally provided by third parties. Making money from these services and allowing free hosting like amplify aws is greared towards the use of databases, analytics, authentication, scalability by third parties. Many do it yourself programmers prefer to save time by using these services. Simple authentication is relatively easy but multiple types of authentication gets heavy. I don’t like these models either but the database and authentication have become third party unless one host provides them all. Even if a stack supports them all you’re left with the source code always at the mercy of the provider leaving a security layer uncontrolled. So static ips to host a server becomes the last option, expensive, hard to scale and securing the stack itself becomes another workload.
I would use it at first, after i bake the product, i migrate to first party auth.
What about supabase with?
@@twitchizleagreed
Looks bad. When the first thing i see on their homepage is nextjs, remix and that youtuber clown with mustache i know itd bad.
I hate when libraries have x/nextjs. What's next x/svelte x/nuxt x/solid x/alpine, they should use web components or just provide js sdk.
I'll stick to ory kratos which i can self host easily and configure everything myself.
I don't want to sign in anywhere and i don't want them to give me their forms, i make them myself.
Thanks. Please review PayloadCMS multi-tenancy.