Next.js 14 Authentication Tutorial (Super EASY!)
HTML-код
- Опубликовано: 6 июл 2024
- Clerk makes authentication SO EASY! Let's see how to add client-side and server-side authentication to a Next.js 14 application from scratch!
Try Clerk - clerk.dev/
Newsletter 🗞 - www.jamesqquick.com/newsletter
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
*TIMESTAMPS*
00:00 - Intro
00:30 - Creating a New Next.js 14 Project
03:45 - Creating a New Next.js Route
04:15 - Creating an Authenticated Navbar
06:00 - Setting Up Clerk in Next.js
09:45 - Displaying User Info from Clerk
12:45 - Adding Public Routes
14:30 - Adding a DB with Xata
19:50 - Saving User Data to Xata with Server Actions
28:30 - Associating Xata Data with Clerk Users
34:20 - Customize Sign-in and Sign-up Pages
Thank you James!
I was looking for something like this for a long time. I enjoyed it very much. It didn't take me much long and I hardly had any issues. Keep it up!
So glad this was helpful!
Do you have to use a form to save data to the database? Can I use state from a client component and use that in a useEffect to save data to the database?
Great , What font do you use in the vscode ?
Awesome video and great for my project. Slowly building it out so I will check out more of what you have done! Thanks man!
Awesome video, James!
I recently started tapping into backend development to better understand how it all connects with the frontend since I already have some experience on the frontend. I must say now I have a much clear understanding of how things work overall.
I found the auth part a bit complicated though. I learned about session cookies and tokens using JWT. Do you think one must always consider using a third-party service such as Clerk for authentication? What could be some of the reasons not using such services and building your own?
Buy the way, Next.js really confusing me now since their server and client logic are in one file. 😅
Yeah I think third party services are very popular and worth trying out. If you would rather build everything yourself, you can totally do that too. SOme people fear lock-in with 3rd party services. For me, the speed at which I can build stuff is worth it
really fed up of these dev advocates pushing products like clerk as auth solutions - huge lock-in , security risk when company u trust to store the most imp aspect of ur app goes bust etc . Auth is something which is a pain but has to be done the right way
and that’s why Auth.js is 🐐
@@pizzabossxd yeah but it’s in perpetual beta and still no credential - this is why i love laravel and the ecosystem - complete with with user profile , 2 factor , email verification with one command - 2 flavours - most importantly comes with xss checks , rate limiting etc .. I hoping auth js goes this way but who knows
If that works for you that's amazing. Just because you don't like existing products doesn't mean iit doesn't have an audience. these tools exist they benefit enough people. Otherwise, they wouldn't be around
Javascript developer are so lazy, they need to pay for everything, setting up a database? forget about it, just pay for vercel. authentication? just pay for clerk. good luck with the bills when the project grows.
If you don't want to do that, then....don't lol I'm not saying this is the only way. It's frustrating when people comment as if they know the only way to do things. @@iamvinny
very helpful. wrapping head around server actions and passing data. thanks
Yeahh! There's a lot going on. It's a fun learning experience though1
can you use another DB for thid?
What font are you using in vscode
sir, what browser are you using for running localhost:3000
Do you really recommend Arc for web development? I mean, how you manage to work with the console, css, etc. all good?
It's chromium based so it all works just as it would in Chrome.
Absolute gold of a video, I'm trying to do this but with supabase instead of xata. Reading through documentation is slow, but a great learning experience! Also, is it possible to do this with supabase or is xata integrated with clerk in a manner that supabase is not? Thanks!
I don't think xata has any integration with clerk. What James showed was pretty generic database stuff.
@@dipteshchoudhuri awesome, I pulled data from supabase and auth with clerk. I just need to integrate them. Thanks!
Yep! You could definitely do this with Supabase, but Supabase already has auth built in. So, if I was using Supabase, I'd just use it's auth instead of clerk personally
what if I want to place that button to sign in in some site?
Great video James, thanks a lot!
Not very related:) but what extension are you using for the terminal suggestions?
zsh
Solid video - thanks James!
So glad you enjoyed it! Any requests for future content?
honestly your Xata and clerk videos have really opened up my interest outside of Supabase - it would be great to see more videos on more advanced Xata features like aggregations, summarization - it could help others see alternative stack options to just NextJS + Supabase
@@JamesQQuick
You're such a great teacher
Can you do similair project but add roles to users ?
Hey, may I know how did you style your terminal like that?
That is likely either "oh my bash" or "oh my zsh"!
I noticed you have a different browser, what browser are you using?
Its Arc browser
getting error on xata init, i tried installing xata globally and locally but still getting errors
James, thank you!
This is a great tutorial, a solid example of how Next.js handles authentication. I really love this. I have a question/request, could you make one video where you use your own auth pages while relying on next-auth to handle the actual auth? I have a project I am working on and I am finding it difficult to handle the authentication with the backend I am working with.
bro i tried so many things with next-auth custom login pages, i managed to get it work for a moment, and after some days, that shit stop working on its own, like, firstly it was working fine, but after some days, whenever i login, it will register the login and put it in session, but when i try to go to the protected pages (protected by next-auth middleware) for some reason they redirect me to login page *AGAIN*, and here is a catch, after i give it a little bit of time, with no changes in code or restarting the server, i was just sitting in my browser, it decide to open the protected page on its own 😑😑😑😑, like why, i console.log the shit out of the application, and everything works fine, but it just dont want me to open those pages for sometime, it be like , come after a minute then ill think about it, like bruh
Thank you James
Thanks, very helpfull!
Glad it helped!
Great explanation. Please what browser are you using 😅
Arc
Great video, and introduction to Clerk and Xeta, never heard of either before ❤ only issue is that filtering the database on the userid is not really secure because its not a database rule denying access when the user is not actually the user but just provides the id
In this case, we aren't taking a user id that's passed in. we are taking the user id from the logged in user from a cookie that can't be changed in frontend javascript. Should be good there!
Awsome content James
Thank you!
Many thanks my friend... I hope this help me to get my first shop as jr developer :)
Can you do a tutorial on Clerk Organization and UserRoles whilst still including authentication?
Thank you very much!
You're very welcome!
thank you very much, i am moving to workos btw
What's the browser you start at 1:55?
I’m using arc browser!
Good job!
I have been trying to find a Nextjs tutorial that uses app router for Auth for 2 days and this was the one i needed. Would be cool if you provided source code for the tutorial but its not necessary either since your videos is so short and comprehensive. Thank You!
Ah great point! Here's the closest project that includes Clerk. It's my recent project Deals for Devs.
github.com/jamesqquick/developer-black-friday-deals
got a Github link for this?
Thanks!
For some reason my app doesn't redirect the user to the clerk login page...can anyone tell me why? everything in the code looks good
check the clerk documentation. its have update how to works with it
thank you
Please you will have to create a bigger fullstack application using these tools. This is a fantastic tutorial!. Thank you very much.
Great feedback! More to come but I'll be working on a courrse with this. Sign up for my newsletter to stay up to date! jamesqquick.com/newsletter
@@JamesQQuick already signed up!!👍
nice very helpful video sir
Yyeaaaay new video.
Yeahhhh what did you think of Clerk?
This came at a really complicated moment where I was trying to resolve auth on a Next JS site using the app router. If I could give it ten likes, I would! Many thanks, James.
haha thanks so muhc!
How is there no session code whatsoever in the Tutorial they put out for Next 14? I have auth setup, but I can't find anything anywhere for how to get the session after loggin in lol
What information are you looking for exactly? You should have access to everything you need with the hooks from clerk.
@@JamesQQuick I was just trying to do everything with the Credentials Provider and my database. It looks like Clerk provides a way to get session data without having to wrap the app in a ServerSession. The way I wrapped my other apps in a ServerSession Provider doesn’t seem to work with the updates, so that’s what I was stuck on. I guess I’ll just try using Clerk lol 😂
Holy crap. I see why people recommend just using a third party for auth. I set up clerk and it was SO MUCH EASIER. I can finally just build my app now lol. Great tutorial.
I do still think it’s so weird that in the tutorial the Next JS people published there is zero session handling but with clerk I just don’t have to worry about it haha
Hi, you have a great tutorials. I want a tutorial how to custom login signup with social media like google fb etc with the help of node js as backend. totally custom.
Astro authentication coming next? 🍻😊
Waiting for a more stable/supported tool specifically for Astro. But I also cover basic authenticatin in my Astro courrse :)
que navegador é esse ?
Arc browser - arc.net/
because at 16:40 you censored the xata api key, i think you should also censore your xata api key at 36:05 James 😅
I decided it wasn't worth it and I generated a new one lmao. It was harder to edit because I scrolled on the screen lmaooo
@@JamesQQuick the simple one is always one of the best solution i see 😂
I mean, it is always easy when you use paid SaaS products :D
Well that's why they exist no? Also, there is a free tier like all good SaaS products. And it's a hell of a lot better than building it all myself in my opinion
@@JamesQQuick the free tier is pretty generous, it's worth it even if I had to pay anyways because when I did auth for a MERN project with JWTs it was quite complex and time consuming this makes things so easy it is ridiculous
@@kenscode Just did same and bruh, especially intercepting api requests when the JWTs expire
super easy! 38 min video 😂
Lol the basic setup to protect a page takes minutes. We also created a brand new project from scratch and added a db. 100% the auth part is east lol
Would be great to add in the title of the video you're using Clerk. It bring confusion while searching for generic authentication without a paid tool
There is a free tier in Clerk that is really good. Any specific concerns you have about breaking out of their free tier?
@@JamesQQuick Not at all, but it basically you need to take that into account if you plan to build an app which, in that case, might bring more than 10k MAU on the platform. So making sure you mention it might be helpful. And also, we never know if they will keep the same pricing.
@@kekefkekef1 Gotcha. Yeah I guess I just assume that's a given but definitely doesn't hurt to clarify. Great callout!
I like the tutorial. What I don't quit like about this tutorial that you are using not complete free libraries for authe and db.
There are free tiers for both. What alternatives would you suggest?
@@JamesQQuick I don't claim to know the nodejs ecosystem. I'm mostly a JavaScript / frontend developer who likes to experiment with other technologies. Recently I wanted to explore the possibilities of how to build a full-stack app with nodejs. I know that the technologies you used also have a free version (up to a certain scalability), but I don't like investing my time learning a technology or making my project dependent on a technology that suddenly requires me to pay a lot (and I'm sure many people share my feeling). Especially when it comes to databases (I admit, authentication is more tricky).
@@shekishral6570 Yeah, so you'd be looking more for a "build it from scratch" scenario?
@@JamesQQuick Well, not quite. I wouldn't want to do the authentication from scratch. I'm sure there are good open source libraries for that, and with regard to databases, there are also good database libraries or ORM libraries that do a lot of the work for you. In summary, if you only used open source libraries in the video, it would be a "perfect" presentation/tutorial that combines everything to get a quick project up and running (which is also scalable).
@@shekishral6570 Ah ok. Something like next-auth (now auth-js I think). fair points. Thanks again for sharing that feedback!
Why RUclipsrs always show how to create auth with auth providers lmao
People, please do NOT outsource user management and authN/authZ. Companies like that are serious target to be breached. And it is just a matter of time before this happens.
Who the hell is Clerk? Software developer = copy, paste
bruhhhhh what is going on this is toooo ezi pezi
Another saas authentication tutorial.
Useless video, unless you use some 'clerk' pkg which is not unified approach, that not what I was actually looking for(
so we didn't learn authentication we learned clerk awfull BS content would not recommend
A tutorial with a paid third party service 👎