Add Login/Auth to your React app in 5 mins
HTML-код
- Опубликовано: 4 июл 2024
- If you are looking for an easy and fast way to add authentication to your React application without going through the painful process of handling cookies/localstorage and manipulating all the variables to get simple authentication working. And it doesn't stop just here, as developers, we set up a lot of new projects and it kind of feels tiring to keep doing the same thing or even copy/pasting 😲
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
⭐ Timestamps ⭐
00:00 Intro
00:27 The Auth Kit library
01:25 Simple Login UI
02:02 UXPin sponsored video
02:42 Your Authentication Server (login/register)
04:12 Adding authentication to log-in
09:44 Protected routes (only authorized)
11:17 Add Signout
12:41 Cookies are fantastic!
⚡️ React Easy Auth repo
github.com/ipenywis/react-eas...
➡️ Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
![Sean Rii, Karyon, Sharzkii - Taungule [My Love] (Official Visualizer)](http://i.ytimg.com/vi/eJoMuypbSzQ/mqdefault.jpg)
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
Thank you man, you gave just basics and gave them well
This is extremely helpful. Thank you so much!
thanks Islem, this was very useful, doing that manually can be a pain, I'll be considering using this lib as a solution for handling authentication, cheers.
title says 5 mins, but the duration of the video is 13+ mins💀💀💀
Which is funny cuz he's using a framework to speed up & simplify authentication
Helped me to go around React authentication with my Spring Boot App, it worked like a charm
great vid. helped me alot
Thanks for this video
Thanks a lot mate. You have saved a lot time
Hi Bro, thanks for the tutorial, I'm just wondering if you could do an extended tutorial on how to setup access levels or user roles?
Dave gray has videos on that
Can you make a refresh token video on this library?
If I need to be authorized in multiple subdomains and on a domain, is this possible with your library?
What is the name of the theme you're using?
how to use refresh token please tell
That's not working for me ...
It says babel pacakges error. And when running this with a project using SWC instead of babel, it totally break my app ...
how to use refresh token?
awesome video
i am waiting for your videos
glad i'm not the only one who refers to auth as creepy stuff 🤣
How do i persist login after refresh?
theme?
I get an infinite loop after SignOut or go to Private Routes
thanks
Very nice and hjelpfull tutorial, thanks. but i would like to now what vsc color theme you are using. could you tell me some extensions you are using? couse i like it. thnaks in again.
The theme is halcyon. Thanks ^^
what's that ide?
Please also provide the link of api used in this video
He literally did in the description. Also used Yarn…
api not working
big fan of you
getting error "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
i'm facing the same error
did u rectify it🙂
me too
im getting an error: annot update a component (`AuthProvider`) can you please help me?
i got the same, do you have a solution?
same
I get an infinite loop after SignOut or go to Private Routes
@@Ronaldo7TFM did you find a solution? im having the same problem here
try using the version 2.12.7
Hi, the cookies are deleted when I refresh the page. Are they supposed to do that?
did you solved this problem?
@@murilobarbosa5062 actually I didn't so I choose to save the token on the browsers state
@@murilobarbosa5062the usual way is to set it in your react context that wraps around the application
Sometimes I think content creators are so funny. You just released a video "why JSON web tokens suck! You should stop using them!" 😂 Idk I find it funny
What vscode theme are you using?
up
Halcyon
i'm getting this message Module '"react-auth-kit"' has no exported member 'AuthProvider'. Did you mean to use 'import AuthProvider from "react-auth-kit"' instead
oh nevermind, I saw an issue in the docs saying I need to install react-auth-kit@2.12.7 instead
@@unmye yes it fixed my error too.
@@unmye thanks for this comment, it fixed my error
could the kit be used with nextjs?
The docs of "react-auth-kit" library says: "Works with Gastsby, Next JS".
How can I prevent user from accessing '/login' as authorized user? I'm looking for something like the opposite to
If logged in, redirect
Hi i am getting following error.
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
react-dom.development.js:28439 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
App.js
} />
have you solved this error?im getting the same
@@sudekarakus same error for me
have you resolved this
me too
can you make the same app but with next js? wnna see how to implemennt this with next js and also http only cookie
i think for nextjs, nextauth is the only library than can really work well
@@monarchgam3r next auth is full stack loking for secure client side
@@zakidzz well this library can't work for that..as it requires react router dom
@@monarchgam3r thnk s man
@@zakidzz are u already know how to make auth with next js for client side only?
Is it safe to store the jwt token in client side cookie?
Nope, you are vulnerable to XSS attacks.
The authentication token cookie must be set from the server.
7:03 is where he starts getting into the meat of what you actually do.
based
So you are saying that doing it from the scratch, understanding each and every step, controlling and customizing the process is crappy and creepy stuff?
it's not 5 mins
less then 5 min and this video is of 13 min 😂😂
hy guys, when I use
const auth = useAuthUser();
console.log(auth().email);
I get error "Object is possibly 'null'.ts(2531)" Could anybody help? thx