Add Auth & Protect Routes in React in 3 Minutes (Kinde)
Вставка
- Опубліковано 1 чер 2024
- 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
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
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!
Thank you, I just wanted to implement this in my project with next, a hug and these videos are appreciated
Brilliant pitch, great knowledge
Is there any git repository to learn reactjs (professional) with redux, middleware.
Thanks for the video! This would be really good for OAuth, as you've demonstrated.
Yep, very easy to use the social logins
that was pretty informative. Learnt something today. 🎉
Glad it was helpful!
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
Can you make a tanstack router video
Awesome video ❤🎉
Enjoy!
i swear this was the easiest authentication in react i have ever seen
Ww
nice video!
Enjoy!
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 😢😢😢
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
React native please
or just write your own auth logic. It's simple. And you will learn something valuable about it.
I highly recommend against this. As soon as you get past the basics it’s not simple at all and mistakes are very costly
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
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.
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
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
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
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.