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

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
    @ByteGrad9 күн бұрын

    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
    @trinidadjohnpatrickc.44129 күн бұрын

    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
    @404-not-found-service2 ай бұрын

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

  • @Exmantika
    @Exmantika2 ай бұрын

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

  • @ByteGrad

    @ByteGrad

    2 ай бұрын

    Yep, very easy to use the social logins

  • @basitjawad4090
    @basitjawad40902 ай бұрын

    that was pretty informative. Learnt something today. 🎉

  • @ByteGrad

    @ByteGrad

    2 ай бұрын

    Glad it was helpful!

  • @MortenLindorf
    @MortenLindorf25 күн бұрын

    Brilliant pitch, great knowledge

  • @user-go6vf9fj5o
    @user-go6vf9fj5o2 ай бұрын

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

  • @dhanarajccs
    @dhanarajccs2 ай бұрын

    Awesome video ❤🎉

  • @ByteGrad

    @ByteGrad

    2 ай бұрын

    Enjoy!

  • @Can-el3cj
    @Can-el3cj2 ай бұрын

    nice video!

  • @ByteGrad

    @ByteGrad

    2 ай бұрын

    Enjoy!

  • @bryson2662
    @bryson26622 ай бұрын

    Can you make a tanstack router video

  • @pratiksavaliya3890
    @pratiksavaliya38902 ай бұрын

    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

  • @voldemortvi4264
    @voldemortvi42642 ай бұрын

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

  • @clemutabazi

    @clemutabazi

    Ай бұрын

    Ww

  • @blackknight1268
    @blackknight12682 ай бұрын

    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

    @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
    @prashh472 ай бұрын

    React native please

  • @vinniv6806
    @vinniv68062 ай бұрын

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

  • @ByteGrad

    @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

    @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

    @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

    @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

    @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
    @RagTheNutsOff2 ай бұрын

    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

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