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

Подписаться 123 тыс.

Просмотров 13 тыс.

50% 1

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...
👉 Check out Kinde for auth and more 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 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

Опубликовано:

28 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@trinidadjohnpatrickc.441 19 дней назад

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!

@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

@MortenLindorf 15 дней назад

Brilliant pitch, great knowledge

@basitjawad4090 2 месяца назад

that was pretty informative. Learnt something today. 🎉

@ByteGrad 2 месяца назад

Glad it was helpful!

@user-go6vf9fj5o 2 месяца назад

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

@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

@dhanarajccs 2 месяца назад

Awesome video ❤🎉

@ByteGrad 2 месяца назад

Enjoy!

@Can-el3cj 2 месяца назад

nice video!

@ByteGrad 2 месяца назад

Enjoy!

@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

@voldemortvi4264 2 месяца назад

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

@clemutabazi 28 дней назад

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