Build a File Storage App with Role Based Authorization (Next.js, Shadcn, Typescript)
HTML-код
- Опубликовано: 12 июн 2024
- This might be my longest tutorial to date. We will be building a full stack file storage application with organizations, file upload, management, role based authorization. authentication, cron deletes, favorites, trash feature, including many UI components including dialogs, modals, toasts, dropdown, etc.
Link to repo github.com/webdevcody/file-drive
Note: in the video at 46:01, you can import a library directly from clerk instead of the clerk-sdk-node library like so
import type { WebhookEvent } from "@clerk/nextjs/server"
Be sure to checkout Convex here: convex.dev/c/wdc
Be sure to checkout Clerk here: dub.sh/A2JQT7h
00:00:00 Overview
00:04:55 Next + Convex Setup
00:08:15 Clerk Setup
00:11:48 ShadCN
00:13:40 Clerk Components
00:16:35 First Convex Mutation
00:20:27 Convex Query
00:23:54 Auth in Convex
00:25:55 Header
00:31:03 Scope Files using OrgId
00:42:17 Clerk Webhooks
01:02:45 OrgId Authorization
01:12:55 File Upload Dialog
01:29:18 Toast Component
01:36:01 Button Loader
01:39:09 Styling Homepage
01:44:20 Delete File Dropdown
01:54:50 Empty States
02:00:26 Page Spinner
02:03:12 File Types
02:17:30 Download Button
02:18:21 Search Bar
02:29:55 Side Nav
02:33:57 Refactor Layout
02:38:56 Active Link Style
02:41:27 File Browser
02:43:43 Mark as Favorite
02:54:31 Favorites Page
03:00:21 Favorite Star
03:12:33 Role Based Authorization
03:27:02 Delete Cron
03:32:09 Restore Item
03:39:22 Upload User
03:54:06 Minor Tweaks
03:58:39 Table
04:11:28 View Toggle
04:22:44 Personal Account Bug
04:29:44 Footer & Landing Page
This video was sponsored by Convex and Clerk.
My Products
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
After making this tutorial, it came to my attention that I used the incorrect way for showing the images and this can cause an error stating you need to use a uuid to access storage entries.
Instead of pointing to the /api/storage/:id endpoint, you should be using an action with ctx.storage.get method outline in this documentation: docs.convex.dev/file-storage/serve-files.
The updated commit can be here: github.com/webdevcody/file-drive/commit/0e31fcd44134d65ab95d4de95f3454f1383871b0
You've also entered into to the "Project making" arena. Cool, atleast some production like coding practice can be learnt.
Learning so much from you Cody thank you very much, please keep using convex! much love from Canada
FCC released serverless course, and you released this, now I gotta learn it all. Love you man for your generosity
FCC????
@@animeshbiswas2905 freecodecamp yt channel
@@animeshbiswas2905 free code camp
@@animeshbiswas2905 FreeCodeCamp i guess...
@@animeshbiswas2905 freecodecamp
Next level content and code! Good work
That's it! The GOAT with code along video! Keep up!
I like the way you are presenting. Thank youso much.
one or two a month like this would be insane
It looks like a cool application. Thank you for sharing with us your effort.
Sidenote: Don't use Clerk. 1) they use dark patterns to prevent you from cancelling & migrating data later (I got burnt recently) 2) their UI elements have subtle bugs that create hydration / refresh issues
Also, you have to setup webhooks. I don't want to do that extra work lmao, just use next auth and make fast ui with Chadcn
NextAuth > Kinde > Clerk
@@johnpaulpineda2476Amen to that
@@johnpaulpineda2476I’ve been using firebase auth for all my personal projects for 5 years, so would recommend
@@johnpaulpineda2476 lucia a good option too
Fire, fire, absolute fire!!!
Wow, Nice thank you so much for sharing the knowledge
More of this. More of the usual. More of web dev cody !!!!!
Nice Job Cody
THANK YOU CODY AS ALWAYS 🎉👌
Awesome tutorial thank you! I think as a next step I will try to build this in Angular as well to strengthen my Angular skills.
add malware scanning, adult/cp content detection and also a summary of what files might be related to the current open file, This will really ramp up the value of this project from being a relatively "bare bones" crud to MADNESS
cool add on suggestions for sure!
Such cool add-on
@@WebDevCody, hopeful you can cover it brother :)😉
Awesome, great project
wonderfull project. thankyou for sharing
Thank you I will watch this tonight on the couch
feel free to give feedback
Glad to be here Cody. As I learn from your videos, do you have plans to do a dedicated video on Convex at any point in the future? Keep up the great work 🙂
I have a couple of convex tutorials on my channel
Wonderful video! I'm trying to re-create it with extra features like malware detection, adult-content detection and darkmode...also got these ideas from comment section 😅
Love it ❤
How you stay motivated for coding?
Brother, it's amazing and I am thankful to you for sharing such helpful videos. I have one wish: can you create a full-stack college website?
@WebDevCody, Amazing tutorial. Loved it. I have a doubt about how do I let the user upload a file type other then the once we specified.
WOW subscribed
thanks for all of this, i have a question: Do I need to pay money to DB or any other service for this project when i deployed?
Good job babe!!!!
Love your tutorilas would love to know how you create such beautiful thumbnails?
Wow. Thanks.
Awesome video sir🤩, can you please also make RBAC with zitadel ?
Is there a way you can show us how to deploy this project? or if anyone in here has successfully deployed it in Vercel, because I'm having a difficult time deploying it and I keep getting an error on the webhook.
Hi Cody, can you create even a simple tutorial to use Authjs (next-auth version 5) with convex, using different providers, like credentials, github, google, discord, etc.
I saw your repo you used google exclusively.
I find it hard to figure out how to configure different providers apart from auth0 and clerk, in auth.config.
Thanks buddy
Could u do a full project like this but using aws stuff with next js? Preferably with sst
What type of font and them are you using on your vs code setup?
love this type of videos.u didn't added dark mode?
nah, but it takes like 5 minutes to wrap your app in a dark mode provider
Congrats
Really enjoyed this video thanks Cody. I have a question though as to why you stored the orgIds with both the orgId and role as an object on the users table? What if we wanted to query for users by an orgId with the role of admin, I'm not sure if Convex supports this type of nested filtering? But I would have thought to have a separate Orgs table alongside an userOrgRoles table, and remove the role from the users table and only storing the orgIds of which they belong to, or simply just the userOrg tables. Not sure if this makes any sense lol just a thought/issue Im facing myself
I think I was more of showing how convex support json like data structures. A separate table would also be fine, it would just require an additional query for all auth checks since we have to first get the user, then get the org table. Org table is probably more scalable
@@WebDevCody gotchya, i figured you were just prototyping quickly. Eitherway this video helped me a ton, your explanations simplified the process for me. Thanks again
why should we chose traditional backend instead of Convex?
That's good thanks for sharing your experience with us can you please create a inventory management system using Next.js. Your tutorials are always top-notch.
What type of inventory? Like grocery store?
@@WebDevCody stock register for a university or and add a also adjustment of new items and grocery stores also same idea. Can you do that please sir.
Nice one, btw whats your vscode theme?? I ve been bored with my 2 years theme
Bearded theme stained blue
Cody, what's the easiest/ simplest way to add Folders to the project?
Can you talk to the strategy in this app to make the file-browser component a client component vs building this app to be server rendered?
Wow Awesome, I would like to request that if you can extend this video to Upload file to AWS S3 bucket using Lambda functions. like in real world app that would be great
I'm currently on minute 50:00 of this exciting project. However, I'm not sure if it's too complicated for me. I've been following along, but I don't think I fully understand what's going on.
Shadcn/UI is a wonderful storage that people come and take away the components they want.
But there are stuff we can't, input mask, phone input, date picker (with allowing typing), multi select, ...
pay attention to 58:14, the dynamic return data fixing caused me an half hour to figure out
Broooo plzzz create a Production grade e-commerce app(not like the current RUclips ones :)) a single vendor app.
You can make a landing page to showcase 3- models of the main stream items of the store.
To make it more in quality and unique you can add a 3d Model of every product along with the normal images and the main challenge will be then optimizing it.
With roles(user and admin which will be the store owner), full fledged admin panel having inventory, and other business functionalities, Beautiful UI, review system, tracking system, Product recommendations, full fledged search, COD and online payment gateways 2-3, product page with detailed product descriptions with images etc and similar products.
An e-commerce app that the internet has never seen before.
:))
Nice project. Thanks for sharing. I would like to learn more about PDF documents and electronic signatures to incorporate into your project. Any tips for me?
there are libraries such as pdfjs which you can use to overlay images onto the PDF and you'd have to build out a UI which allows user to place the image where they want. I don't have much more info on that though
can you make a video that how to host this web app
I dont really wanna use Baas services such as supabase or convex. It would be very interesting for me, if you could make a video about full stack development without BAAS and less third party platforms
why not Supabase, you can host it yourself anywhere you want
That's too hard. And also no sponsor money.
you can always use next.js, find a postgres database host, and use next-auth. the moment you need email logins, password reset, forgot password flow, you'll kind of wish you just used a third party auth service.
0:35 you haven't clicked Dismiss, me too, I won't click that button
hey, are u using the following theme and its variant? :
Bearded theme- stained blue.
Yes
excuse me sir due to this new next js I am not able to use public routes in the case of middle ware part and due to this I am not even able to get clerk auth!!! what can I do ???😞
Can we make this project in a way in which we can add audio files .
Hello there, I spend the last four days binge watching your videos; consider in this video, how can we protect someone to access or view the uploaded files outside the application?
I found out that if you put the file url in a browser it loads the file just fine, how to prevent that?
Before I was using Edgestore, they broke file access outside the application, which is good to my opinions; But your video made me switch to convex, because it's easier to manage files.
Thanks buddy :)
The id of the image is mathematically impossible to brute force, but yes I think the url is all public so you need to make sure to not accidentally leak image ids or anything like that.
@@WebDevCody thanks buddy
bro How to deploy this application on vercel can u tell me the steps
Also what are the extensions that you're using?? For the intellisense and ect
I was using copilot for a bit on this video, but also using typescript and a tailwind auto complete extension
Please create a video to deploy it , I've been getting some errors
Can you make a tutorial for how to implement subscriptions in a web app like this that allows pay per user pricing for businesses?
I already have one; ruclips.net/video/Vjtn9pWAZDI/видео.html
file popup not open when i click in input file field
Trying to follow along using Clerk core 2 ... they have a new middleware using clerkMiddleware() instead of authMiddleware() ... so confusing now.
I have a new tutorial coming soon using core 2
@@WebDevCody That would be awesome especially if you tie Clerk multitenancy with Convex because nobody else has anything useful
Mate I couldn't understand a thing for the whole Clerk Webhooks part. Can I skip it and still go through rest of the video?
Yeah just copy the code from my repo and try to understand it later.
Hi Cody. In the part OrgId Auth, I have exac the same code as u before the commit, but, I think it is not working fine. Before that commit, I should see in the Home component the files of Personal Account + Files of organizations. Here I have the error, I am seeing only the files associateds to Personal Account. If i go to organization I see the files there, but I mean, In Personal Account I must see Personal Files + Orgs Files, is it right? What may be the error?
I’d say look through my repo code and compare to yours
@@WebDevCody I think it is exactly the same. Is it supposed that in personal account u should see only personal files or personal with org files that user is in?
No in a personal account you only see your files, not every org files plus your personal ones
@@WebDevCody Thanks for answering Cody! Are you going to add the part to deploy the app ?
Hi there! To anyone who may be trying to follow along has anyone gotten the error “This convex site does not have http actions enabled”? This is when trying to create the user thru the webhook. I’m sure it’s something I did wrong. Thanks and great video so far!
Did convex change anything regarding their file upload or display ?? Cant seem to display images and it is always showing bad getaway
is this next? did you update your next config to allow displaying images from the convex url?
Yes sir , i did this but i cant view the images in my uploaded website and even the pdfs and such@@WebDevCody
yes i did and it was working fine until today when my other project also started showing the same error in displaying the image . It is leading me to a url with the storage id and not the actual address in the convex database download option@@WebDevCody
What does „use node” directive in clerk.ts file? 45:53
allows the function to run using the normal node runtime instead of their v8 isolate runtime. When you run a mutation, action, and query, by default it uses a runtime with a faster boot time but it doesn't have access to many node_modules. If you need to bring in a third party library, sometimes you need 'use node' at the top of the file so convex knows how to package your dependencies and use them. In most cases, you won't need 'use node'
@WebDevCody What if i want to store files in folders?
You could probably just put a directory path attribute on the file table and then use that to change the perceived path
div classname= grid grid-cols-4 hap-4 // is it shadcn or tailwind? Or just bootstrap??
Tailwind extension
Uploading file is generating error
I cant seem to display my images or the pdfs as it is showing bad getaway and the URL is coming wrong.Cody is their any way to contact or share the code
My code repo is in the description
I'm not certain, but typing along this is where I have gotten stuck. It looks like that perhaps convex changed something and that /api/storage/{fileId} is no longer the correct path (verify by opening download in a new tab, you will see path does not match) and that they now require an additional storage.generate(fileId) step.
@@WebDevCody A workaround for the above. It works on screen with
Actually
can we deploy it ?
can this be followed by beginners and if not what would you recommend instead ?
define beginners? it's probably geared towards people who somewhat already know next / react a bit.
@@WebDevCody that makes sense. I am brushing up on my react and very much looking forward learning from your project . Thank you for making this available 🙏
Hi I'm trying to learn Nextjs, is this possible for me to do even if I only have free version of Clerk and Convex?
yes, both provide free tiers
@@WebDevCody thank you so much! I hope you can create more of this content where you dev from scratch. More love and support to you man!
how to fix This Convex deployment does not have HTTP actions enabled. error? on webhook
I’ve never seen that error, join the convex discord to ask for help
@@WebDevCody thanks for answer
Which browser are you using?
chrome
any thoughts on Supabase vs Convex ?
I already made a video on that
@@WebDevCody glad I found your channel. Cheers,
u think i need to have a better knowlege on convex before this tutorial i am understading the project but idk i am still confuesed abit and is learning convex can help we with mu resume
I have another video walkthrough another convex I’d recommend ruclips.net/video/vaQZYRSiimI/видео.htmlsi=60AAfTtvgnHGwFBy
@@WebDevCody no i understood in this project itself thz, and i like the way u degub on spot excepting more vidz like this really differnt from other creators
sir when i click download button it shows 404 error
same Problem where you able to solve it....
Im sorry, what have you done on 2:15:18
Hey Cody, why didn't you use clean code for this project?
It would have been great if you had build this project using clean code similar to that you have used in pantry management app before.
Too much added complexity for a tutorial
@@WebDevCody how much is it feasible in order to use convex and clerk to be implemented using clean code pattern?
Are you planning to make videos on this anytime soon?
Is this complete and free project
the demo at the start demos everything I build, so idk what you mean by complete.
yes, it's free to follow along; both convex and clerk provide free tiers
is there any thing that will require money.
no they have free tiers
bro this video is so amazing it's helpful for me if you can add blueprint for the dotENV file that will be helpful for us
This was a great tutorial and I always like your videos. Me personally I don't like Next.js and prefer not to use it.
sir i have a error in this
Ask in my discord if you need help
@@WebDevCody sir i post the problem with screenshot my id is adityaraj3645 sir you taught in image alt not show image in card
@@WebDevCody sir in when i tab on download error show wrong storage path issue please help me sir
@@WebDevCody sir i have already asked but no any response
i like your tutorials but i dont know why in this one I couldn't follow up and got lost after 1 hour
Sorry to hear that, what parts did you find confusing? I’ll try to improve for future ones
please help me asap sir!! I would be very thankful for you!
deployment
Make a frontend for S3 is not trivial task, definitely needs 4 hours tutorial 😂😂😂😂
pleaseeeeeeeee stop Clerk
🤔
@@WebDevCody Next Auth v5 is better and easier to accept API request, Clerk blocked by default
@@luanscar6371 show me the MFA docs for next auth
Thanks bro. But please can you use next auth , not clerk. Clearly no one likes Clerk
I like it
@@WebDevCody I meant your followers, but hey it’s your channel you can do what you want and ignore your followers inputs
Can you maybe prepare in some way before code writing??? You spent 20 minute just to figure out how to manage orgId key... Man, are you Junior dev?
that's not the style I use to code
SIr i have been stuck on an error around the parts where we use the webhook around 48:10 and it is constantly showing
ConvexError: [CONVEX Q(files:getFiles)] [Request ID: lH1NqL757gebWcm8] Server Error
Uncaught ConvexError: expected user to be defined
at async hasAccessToOrg (../convex/files.ts:89:13)
at async handler (../convex/files.ts:137:8)
Called by client
i have been stuck at this for the past two days . what can i be doing wrong and if there is anyway to help please do it . also we only have to run this in 2 terminals right ? one for convex and other for the client side ?
have you looked at the code in my github repo to compare what I have against your code? link in description
sure sir ..will reach you out incase it persists@@WebDevCody
everything is good except for that clerk auth. now every single next tut is married to clerk auth.
Clerk has a lot more functionality compared to next auth, including the most basic auth feature of email registration and login. No one likes magic links
I got this error :
⨯ InvalidCharacterError: The string to be decoded is not correctly encoded.
at atob (node:buffer:1347:11)
help me to resolve this
this is a 4 hour 30 minute tutorial. if you provided maybe around what part or feature this bug happened, that would be useful; otherwise, I can't help you.
it is showing this error after installation of clerk/nextjs around 10 mins of video
,which unable to decode the data