Next.js 14 Authentication Tutorial (Super EASY!)

Рет қаралды 79,695

7 ай бұрын

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.gg/vM2bagU
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

Пікірлер: 116

@djimenezweb 7 ай бұрын

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!

@JamesQQuick 7 ай бұрын

So glad this was helpful!

@existentialquest1509 7 ай бұрын

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

@pizzabossxd 7 ай бұрын

and that’s why Auth.js is 🐐

@existentialquest1509 7 ай бұрын

@@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

@JamesQQuick 7 ай бұрын

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

@iamvinny 5 ай бұрын

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.

@JamesQQuick 5 ай бұрын

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

@user-wz7pw7sp7r 2 ай бұрын

Awesome video and great for my project. Slowly building it out so I will check out more of what you have done! Thanks man!

@VincentFulco 7 ай бұрын

very helpful. wrapping head around server actions and passing data. thanks

@JamesQQuick 7 ай бұрын

Yeahh! There's a lot going on. It's a fun learning experience though1

@waleedmumtaz 7 ай бұрын

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

@JamesQQuick 7 ай бұрын

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

@user-mq1zn1cn1j 6 ай бұрын

Great , What font do you use in the vscode ?

@michaelrooze278 4 ай бұрын

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?

@lann1sterroy Ай бұрын

Great video James, thanks a lot!

@AbnerG787 7 ай бұрын

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!

@dipteshchoudhuri 7 ай бұрын

I don't think xata has any integration with clerk. What James showed was pretty generic database stuff.

@AbnerG787 7 ай бұрын

@@dipteshchoudhuri awesome, I pulled data from supabase and auth with clerk. I just need to integrate them. Thanks!

@JamesQQuick 7 ай бұрын

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

@LeftyRC Ай бұрын

What font are you using in vscode

@tomaasmonaco 7 ай бұрын

Do you really recommend Arc for web development? I mean, how you manage to work with the console, css, etc. all good?

@diefloppers 4 ай бұрын

It's chromium based so it all works just as it would in Chrome.

@codewrangler 7 ай бұрын

Solid video - thanks James!

@JamesQQuick 7 ай бұрын

So glad you enjoyed it! Any requests for future content?

@codewrangler 7 ай бұрын

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

@kellslte 7 ай бұрын

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.

@user-fn1qn5vn4d 6 ай бұрын

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

@A03L 4 ай бұрын

You're such a great teacher Can you do similair project but add roles to users ?

@ovived88 7 ай бұрын

can you use another DB for thid?

@abhaysharma8845 6 ай бұрын

sir, what browser are you using for running localhost:3000

@aiwithhamzanaeem 4 ай бұрын

Thank you James

@natanloterio 5 ай бұрын

James, thank you!

@Assoehosselaar 7 ай бұрын

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

@JamesQQuick 7 ай бұрын

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!

@quamzgraphix9826 7 ай бұрын

Great explanation. Please what browser are you using 😅

@anujparekh2829 2 ай бұрын

Arc

@Sndiso 7 ай бұрын

Awsome content James

@JamesQQuick 7 ай бұрын

Thank you!

@amitkeinan9323 7 ай бұрын

Not very related:) but what extension are you using for the terminal suggestions?

@ThiagoMarquesdeOliveira 7 ай бұрын

zsh

@maitrisapp 6 ай бұрын

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.

@JamesQQuick 6 ай бұрын

haha thanks so muhc!

@kacperkepinski4990 6 ай бұрын

what if I want to place that button to sign in in some site?

@FSDevOps 6 ай бұрын

Many thanks my friend... I hope this help me to get my first shop as jr developer :)

@cryptototalwar2915 6 ай бұрын

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!

@JamesQQuick 6 ай бұрын

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

@garikmelqonyan6011 6 ай бұрын

Good job!

@AnggaRisky 7 ай бұрын

Yyeaaaay new video.

@JamesQQuick 7 ай бұрын

Yeahhhh what did you think of Clerk?

@barakel.israel 5 ай бұрын

Can you do a tutorial on Clerk Organization and UserRoles whilst still including authentication?

@moron1844 4 ай бұрын

I noticed you have a different browser, what browser are you using?

@rejie 4 ай бұрын

Its Arc browser

@nasssty284 4 ай бұрын

getting error on xata init, i tried installing xata globally and locally but still getting errors

@andersbraathen1256 7 ай бұрын

Thanks, very helpfull!

@JamesQQuick 7 ай бұрын

Glad it helped!

@olufuwadavid5064 7 ай бұрын

Please you will have to create a bigger fullstack application using these tools. This is a fantastic tutorial!. Thank you very much.

@JamesQQuick 7 ай бұрын

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

@olufuwadavid5064 7 ай бұрын

@@JamesQQuick already signed up!!👍

@digimagehedgie2613 4 ай бұрын

got a Github link for this?

@insensibility 5 ай бұрын

Hey, may I know how did you style your terminal like that?

@ZenoMinus 5 ай бұрын

That is likely either "oh my bash" or "oh my zsh"!

@devyb-cc 5 ай бұрын

thank you very much, i am moving to workos btw

@jacobphillips9235 5 ай бұрын

Thanks!

@BBocho 5 ай бұрын

Thank you very much!

@JamesQQuick 5 ай бұрын

You're very welcome!

@InspiringPositiveQuotes1196 2 ай бұрын

nice very helpful video sir

@meraklicoder 7 ай бұрын

thank you

@codedwebs 6 ай бұрын

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.

@antoninodelfiume5932 Ай бұрын

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

@asepsopiyan_ 23 күн бұрын

check the clerk documentation. its have update how to works with it

@mirkoputignani3207 7 ай бұрын

What's the browser you start at 1:55?

@JamesQQuick 7 ай бұрын

I’m using arc browser!

@kekefkekef1 19 күн бұрын

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

@JamesQQuick 14 күн бұрын

There is a free tier in Clerk that is really good. Any specific concerns you have about breaking out of their free tier?

@kekefkekef1 14 күн бұрын

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

@JamesQQuick 14 күн бұрын

@@kekefkekef1 Gotcha. Yeah I guess I just assume that's a given but definitely doesn't hurt to clarify. Great callout!

@shakapaker 7 ай бұрын

Why KZfaqrs always show how to create auth with auth providers lmao

@IvanRandomDude 7 ай бұрын

I mean, it is always easy when you use paid SaaS products :D

@JamesQQuick 7 ай бұрын

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

@kenscode 7 ай бұрын

@@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

@olufuwadavid5064 7 ай бұрын

@@kenscode Just did same and bruh, especially intercepting api requests when the JWTs expire

@swimmyJones 7 ай бұрын

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

@JamesQQuick 7 ай бұрын

What information are you looking for exactly? You should have access to everything you need with the hooks from clerk.

@swimmyJones 7 ай бұрын

@@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 😂

@swimmyJones 7 ай бұрын

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.

@swimmyJones 7 ай бұрын

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

@dondaniboy 7 ай бұрын

Astro authentication coming next? 🍻😊

@JamesQQuick 7 ай бұрын

Waiting for a more stable/supported tool specifically for Astro. But I also cover basic authenticatin in my Astro courrse :)

@rafi-hidayat 7 ай бұрын

because at 16:40 you censored the xata api key, i think you should also censore your xata api key at 36:05 James 😅

@JamesQQuick 7 ай бұрын

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

@rafi-hidayat 7 ай бұрын

@@JamesQQuick the simple one is always one of the best solution i see 😂

@alexy.3512 5 ай бұрын

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.

@felipekesley 6 ай бұрын

que navegador é esse ?

@JamesQQuick 6 ай бұрын

Arc browser - arc.net/

@shekishral6570 18 күн бұрын

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.

@JamesQQuick 14 күн бұрын

There are free tiers for both. What alternatives would you suggest?

@shekishral6570 14 күн бұрын

@@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).

@JamesQQuick 14 күн бұрын

@@shekishral6570 Yeah, so you'd be looking more for a "build it from scratch" scenario?

@shekishral6570 14 күн бұрын

@@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).

@JamesQQuick 14 күн бұрын

@@shekishral6570 Ah ok. Something like next-auth (now auth-js I think). fair points. Thanks again for sharing that feedback!