Add Auth & Protect Routes in Next.js in 2 Minutes

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Add auth to your Next.js app fast: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Next.js + Authentication starter repo: github.com/ByteGrad/nextjs-au...
My speedrun entry on X: / 1757802798610055677
Kinde website: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap for 2024 & 2025: email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Overview
0:17 SPEEDRUN
2:17 Protect route
#webdevelopment #programming #coding #reactjs #nextjs

[@ByteGrad]

I'm not as fast as I thought haha, but still pretty easy to add auth to an app these days.
My latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work!

[@Dipj01]

Can you make a CZcams tutorial on Redux? Your explanations are top notch

[@liebebilder3529]

Could you please make a video of making static and dynamic text translation

[@prohacker5086]

Seems like it's basically the same thing with the Auth.js, just MUCH MUCH more straightforward. Authjs has seen at least 5 major versions and every one of them is another kind of pain to use with almost non-existent documentation.
I don't know how flexible Kinde is to adapt to custom solutions like simple jwt with custom backend, but im sure as hell anything is worth a try just to avoid the Authjs lava floor.

[@GreasyBacon288]

you can actually create new file(or folder if you want the last item to be a folder instead). Then type `api/auth/[kindeAuth]/route.js` in one go and it'll create the folders/file for you want!

[@ByteGrad]

Haha yeah, I fumbled

[@CastiMta]

It's really great, but people care more about their credentials feature

[@snatvb]

1:00
just press "New File" and write "app/auth/[kindeAuth]/route.ts" and vscode creates all falders that u need.
Even you started as "New File" but u need only folder, just end with "/", for example: "my-folder/", then vscode creates folder instad file wihout extension :)

[@somefishhere]

Great speedrun!!!😊

[@Anto-mi5pn]

So the users are saved in their database, right? How does that work? Do they expose other helper methods to perform CRUD operations on the users of our application?

[@JustThink2000]

How do you connect it to a database

[@brancode404]

I've purchased your CSS and Javascript courses just now bro. Gonna go deep into it and after that your React/Next.js course 😁😁

[@ByteGrad]

Enjoy!

[@codingjogo]

how was it?

[@coders_rant]

Glad to see this implementation. Please make a video on lucia auth

[@dennisb1590]

Hi I realy love your teaching style and I would realy love to do your React-Course but unfortunatly I am broke and unemployed at the moment. Will it be on Sale eventually or is it possible to get some kind of discount code? I know you realy put in alot of work with the course and I would love to learn more from you it´s just that 110 after tax is alot of money in my positon.

[@MrJettann]

Let's make auth with access and refresh tokens with ssr, it would be much more interesting

[@poizonncs8264]

Love this 😂

[@mma-dost]

Hey, can you please make a crash course on micro frontend and module federation? Wanted to learn about them what are they? Recruiter will be impressed maybe 😁😁

[@ByteGrad]

Interesting idea

[@mma-dost]

😁 waiting@@ByteGrad

[@xen.sky_8674]

can we use clerkjs to break your record?

[@ByteGrad]

Nah, Kinde only 😉

[@xen.sky_8674]

@@ByteGrad fine, you win :D

[@heykinde]

That would only slow you down :)

[@xen.sky_8674]

@@heykinde Not really, I could set up a basic auth with just 3-4 steps. I'm yet to try kinde tho

[@Qasimyousaf-zw5kw]

Good video ❤

[@codewrangler]

wow... watch out clerk!

[@madhurchaturvedi5551]

sir please teach us how to make navbar in react is tailwind CSS with mega drop-down

[@thomasforselius3961]

You're already on CZcams. Use it. Don't waste his time

[@madhurchaturvedi5551]

@@thomasforselius3961 what the problem do you even watch his videos

[@404-not-found-service]

woow