Add Auth & Protect Routes in React in 3 Minutes (Kinde)

Рет қаралды 13,534

Күн бұрын

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Add auth to your React app fast: bit.ly/3QOe1Bh
👉 Full code: github.com/ByteGrad/kinde-rea...
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 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 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
👉 Kinde: check out Kinde for auth and more bit.ly/3QOe1Bh
⏱️ Timestamps:
00:00 Auth in React overview
00:28 Kinde setup
02:25 Login & Register
03:04 Authentication options
03:58 Show user info
05:44 Loading state
06:23 Protected route component
08:39 API call with bearer token
#webdevelopment #programming #coding #reactjs #nextjs

Пікірлер: 34

@ByteGrad 6 күн бұрын

Hi, 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! I'm also a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication and more bit.ly/3QOe1Bh

@trinidadjohnpatrickc.441 26 күн бұрын

This is pretty useful if you already know how authentication works and dont want to hassle yourself coding it by scratch. Thanks for the video!

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

Is there any git repository to learn reactjs (professional) with redux, middleware.

@404-not-found-service 2 ай бұрын

Thank you, I just wanted to implement this in my project with next, a hug and these videos are appreciated

@Exmantika 2 ай бұрын

Thanks for the video! This would be really good for OAuth, as you've demonstrated.

@ByteGrad 2 ай бұрын

Yep, very easy to use the social logins

@MortenLindorf 22 күн бұрын

Brilliant pitch, great knowledge

@basitjawad4090 2 ай бұрын

that was pretty informative. Learnt something today. 🎉

@ByteGrad 2 ай бұрын

Glad it was helpful!

@pratiksavaliya3890 2 ай бұрын

This is simple...please make video on how to integrate this with backend node/express server with protected api end point (authorisation)....i see no resources for that

@bryson2662 2 ай бұрын

Can you make a tanstack router video

@dhanarajccs 2 ай бұрын

Awesome video ❤🎉

@ByteGrad 2 ай бұрын

Enjoy!

@Can-el3cj 2 ай бұрын

nice video!

@ByteGrad 2 ай бұрын

Enjoy!

@voldemortvi4264 2 ай бұрын

i swear this was the easiest authentication in react i have ever seen

@clemutabazi Ай бұрын

@blackknight1268 2 ай бұрын

My bro said don't learn web development, ai will replace coding jobs and stuff making me anxious and stuff, and i just started with web development path, idk what to do please guide me about this Ai taking everything like what is it i just joined in man 😢😢😢

@ByteGrad 2 ай бұрын

Nah, I do a ton of coding work that’s not easily replaceable by AI at all. Maybe in 10+ years it’s a different story

@prashh47 2 ай бұрын

React native please

@vinniv6806 2 ай бұрын

or just write your own auth logic. It's simple. And you will learn something valuable about it.

@ByteGrad 2 ай бұрын

I highly recommend against this. As soon as you get past the basics it’s not simple at all and mistakes are very costly

@vinniv6806 2 ай бұрын

nope. I know that you must advertise Kinde in this video. I don't have problem with it. But creating own - session based auth in NextJS isn't rocket science. And the biggest benefit is - you have your own code. You don't rely on 3rd party in crucial component in your app. For example: what will you do, when kinde will no longer be mantained? And all good coders know that there are no code without a bug :) @@ByteGrad

@ByteGrad 2 ай бұрын

That's fine for a practice project with no security requirements but the countless data leaks in the real world show that it's not so easy to protect sensitive data. Plus it's complex and time-consuming to add organizations / teams / SSO / 2FA / roles & permissions / user management UI dashboard / etc. all by yourself. Kinde allows you to export data at any time and has a generous free tier up to 10500 MAU. You do pay some money when your project hits scale which is fair value IMO.

@vinniv6806 2 ай бұрын

I took me one week to write own auth with all the features you mention above (minus teams - client will never use it). I have 85k unique logins / month. I paid for professional security check. All green. So it's possible. Also - I'm not against Kinde / Clerk or other "login platforms". I'm just saying they are not mandatory. And all of them are very expensive for big projects. My client is saving a lot of money, because of my own auth. And happy client brings more clients :) More clients = more easy money to earn. The holy circle of webdev :) @@ByteGrad

@vinniv6806 2 ай бұрын

it didn't block anytning. Auth was developed on dev side, not production. Session based auth is very simple - tech wise. All browsers and mobile versions of them are supporting all of the key elements of it. Security audit was like $1k. It's a big webstore with many, many users. But not all of them are buying - generating revenue. You also cannot charge for registration :). Kinde / Clerk are good for SaaS / PaaS. But not for ecommerce project, when you have triple digits K users, thousands of daily logins. The cost is too high. Session based auths are more secure than cookie based. Also - security issues - not a problem. Browsers engines are not changing session handlers during updates. It's pointless. Sessions are also on server side so there is -->almost

@RagTheNutsOff 2 ай бұрын

Howdy, that's straightforwards compared to writing the base yourself. However can this now be expanded upon further to allow say different user levels of access, any subscription values etc..? Matt

@ByteGrad 2 ай бұрын

Hi Matt, absolutely. Kinde provides basic user roles out of the box in their dashboard. Soon they also have a Billing feature which will allow you to combine user management with subscriptions easily.