- Видео 26
- Просмотров 93 184
Kodie
Великобритания
Добавлен 23 сен 2022
I've been coding since the 80's in most languages and on most platforms. Starting with the Amstrad CPC 464, I've used just about every language to produce sites and applications that had real-world applications.
I don't claim to be the best and I'm certainly not professionally qualified, but what I have produced with me self-taught knowledge, is produced products that are used by businesses across the world.
Hit the subscribe button to get informed when I post new tutorials and leave me a comment if there's something I've missed or a topic you want me to cover.
I don't claim to be the best and I'm certainly not professionally qualified, but what I have produced with me self-taught knowledge, is produced products that are used by businesses across the world.
Hit the subscribe button to get informed when I post new tutorials and leave me a comment if there's something I've missed or a topic you want me to cover.
How to create Protected Routes and Authentication with React Router V6 2023
Download the code here - github.com/KodieCode/react-private-routes-authentication
In this video, we'll be learning how to create protected routes and authentication with React Router V6. Private routes allow us to control how specific paths are accessible, while authentication provides a secure way to ensure only authorised users can access our content.
By the end of this video, you'll be able to create private routes and authentication in React Router V6, ensuring that your users are protected while they access your content
Using React Router V6 we'll put together an App that has:
1. Authentication wrapper using useContext and useReducer
2. A custom component to build our routes and menu opti...
In this video, we'll be learning how to create protected routes and authentication with React Router V6. Private routes allow us to control how specific paths are accessible, while authentication provides a secure way to ensure only authorised users can access our content.
By the end of this video, you'll be able to create private routes and authentication in React Router V6, ensuring that your users are protected while they access your content
Using React Router V6 we'll put together an App that has:
1. Authentication wrapper using useContext and useReducer
2. A custom component to build our routes and menu opti...
Просмотров: 70 698
Видео
Unlock Your Earning Potential: Why you need to Start Learning to Code Today!
Просмотров 101Год назад
Are you curious about the world of coding but unsure if it's the right path for you? In this video, we'll explore the top reasons why learning to code can be a game-changer for your personal and professional life. From enhancing problem-solving skills to opening up lucrative career opportunities, coding has a lot to offer. Join us as we dive into the exciting world of programming and discover h...
How to Filter Array of Objects in Javascript - ReactJS Edition
Просмотров 963Год назад
In this video, we'll be learning how to filter an array of objects in JavaScript using the filter function. This function can be used to remove specific items from an array, based on a given condition. If you're looking to learn how to filter an array of objects in JavaScript, then this video is for you! We'll be using the filter function to remove specific items from an array, based on a given...
How to use Dates in JavaScript and React with MomentJS
Просмотров 368Год назад
In this video, we'll learn how to use MomentJS to work with dates in JavaScript. We'll cover how to create, parse, and format dates in both React and JavaScript. If you're interested in learning more about how to use dates in JavaScript, then this video is for you! We'll cover everything from how to create dates to how to parse them into strings. By the end of this video, you'll have the skills...
How to create Private Routes and Authentication with React Router V6
Просмотров 10 тыс.Год назад
NEW VERSION AVAILABLE Due to the feedback received on this video, a new version with a link to download the code is available here: ruclips.net/video/q94v5AhgrW4/видео.html In this video, we'll be learning how to create private routes and authentication with React Router V6. Private routes allow us to control how specific paths are accessible, while authentication provides a secure way to ensur...
How to Iterate through an array in JSX - ReactJS
Просмотров 708Год назад
Many people coming to React from our Javascript struggle to loop through data and render to the DOM. That’s where the map feature comes in. Iterate through data and output to the DOM with or without conditions. #reactjs #arrays #jsx
How to control refreshing your hook data - React JS Hooks
Просмотров 802Год назад
How to control refreshing your hook data - React JS Hooks
Revolutionise Your Code: Unleash the Power of Inline JSX Switch Statements
Просмотров 1,3 тыс.Год назад
Revolutionise Your Code: Unleash the Power of Inline JSX Switch Statements
How to use the useReducer Hook - Better than useState for managing objects, arrays or complex data
Просмотров 881Год назад
How to use the useReducer Hook - Better than useState for managing objects, arrays or complex data
How to create a custom hook in ReactJS - Move your data and logic to reusable components
Просмотров 373Год назад
How to create a custom hook in ReactJS - Move your data and logic to reusable components
How to use the useContext Hook for a truly global state - React JS Tutorial
Просмотров 797Год назад
How to use the useContext Hook for a truly global state - React JS Tutorial
React JS Crash Course for Beginners - E6 - React-Router
Просмотров 122Год назад
React JS Crash Course for Beginners - E6 - React-Router
React JS Crash Course for Beginners - E5 - useEffect
Просмотров 63Год назад
React JS Crash Course for Beginners - E5 - useEffect
React JS Crash Course for Beginners - E4 - State & Forms
Просмотров 114Год назад
React JS Crash Course for Beginners - E4 - State & Forms
React JS Crash Course for Beginners - E3 - Components & Props
Просмотров 94Год назад
React JS Crash Course for Beginners - E3 - Components & Props
React JS Crash Course for Beginners - E2 - JSX & Styles
Просмотров 59Год назад
React JS Crash Course for Beginners - E2 - JSX & Styles
React JS Crash Course for Beginners - E1 - Setup & Installation
Просмотров 118Год назад
React JS Crash Course for Beginners - E1 - Setup & Installation
same here i was doing a while loop haha I'm a noob
So objects don’t always have to be arrays ?
Is it possible to work things this way using createBrowserRouter. Interested to understand this more, and see if I can use child routes with this kind of setup.
Isn't this method easy to bypass? User can easily change ahte isAuthenticated state or isPrivate consts. Is it okay to protect client routes like this and just protect private data on the backend?
This video was exactly what I needed!! I've been confused with authentication and the bunch of different ways to do it and a video that cuts all the extra stuff and shows you the basics of how it works was perfect. Thanks so much, hope you make more videos was sad to see this was your latest on in a year.
This is a super useful video!!!, went through it, understood how everything is done, great video!!!
Gold Gold Goldberg !! Happy to find this channel !!
you explained it well thank you 👍👍
straight and easy to understand thanks for the video.
Nice ❤
thanks for helping me with this vid, one subscribe for you sir
Why are the extension files `.js` instead of `.jsx`?
Doesn't matter it's a framework
How would you type this hook with typescript? im getting the error "No overloa matches this call all over the place. Thanks and great video!
Really nice video, Thankyou.
Glad you liked it!
Please I need a tutorial on how to use localstorage with this
Very helpful :) thank you for that info. I was struggling how send data between 3 different components and that video help me a lot. THX again
You're welcome!
can you help me to do same thing in next.js, i have to do with user role based , their tho 2 user role , so how to do in next.js with typescript?
How can I Implement roles of users?
can you make a new video on how not to make user logout whenever the page refresh?
yes pls do that user key and session expire thingi we do want it
Grwat
You deserved more subscribers. You are a good example on what the developers should follow. I haven't followed yours but I created something that is similar and in tsx.
I appreciate that!
i love it great knowledge been passed here, thanks a lot
My pleasure!
im a full stack MERN and really agreed to your suggestions and advice, i also apply for computer science in University but they sent to Mathematics Department, and i try to change my course to computer but they reject my applications, so i decide to continue as a self thought programmer and i find my self being a fullStack Mern and the best programmer among our course mets.... actually in terms of becoming a programmer it almost like wasting of time when learning to code at university
This video is just pure gold! Straightforward, concise, without any useless information. Amazing!
Glad you enjoyed it!
Great and concise 👍
Glad it was helpful!
Great code , can I please ask how do we redirect to access denied page if we type in /Account if user is not logged in
I'm from Russia, but I hope you understand me :D I suggest trying to work with conditional rendering, For example userisAuth ? <MainLayout/> : navite('./login')
It's amazing! thank you very much!
Glad you like it!
it's not working
What's the issue you're having? I don't think anyone else has had a problem.
Good work!
Thanks!
Hi @kodie, Great content here. However, I'd prefer to show the login page if a user tries to access a private page
This is easy enough to do with creating a default route pointing at the login page. That means any route not created based on their status, will show that page instead.
Thks sir.
You’re welcome
thanks you for this tut
Welcome 😊
how to add role user sir
You would need to add an additional object against the user to define their role and then load the routes depending on what that role is allowed to access.
Perfect ....Exactly what I was looking for...Coming from pure javascript, jquery and PHP to React this was bit tricky....for me at least....Thanks for making it simple...
Great to hear!
Good luck with your channel. Liked your content
I appreciate it!
Nice, simple, to the point. Thanks!
Glad it helped!
Amazing video! I love how there are people like you that go straight to the point and explain in plain English. Thanks a lot for the video! PS: Better teaching methods than my university (will definitely suggest to my friends)!
Really appreciate the feedback!
why on refresh it does not hold the private links? It resets and I have to click on "login" again so they pop up
This is because in that tutorial we are not storing that the user is authenticated in the localStorage or a cookie. This means a refresh of the page restarts the state. I am working on a video to expand on this authentication method and show how to start storing user details including if the user is logged in so that a returning user might be automatically authenticated
thanks for this kodie!
Our pleasure!
Thanks for the helpful tutorial!!!
Glad it was helpful!
rooutah
Thanks
thank you
Welcome!
Thank you! The map part is genius
Thanks for feedback
How do we add google auth to this?
I'm planning to do a video on various third party Auth libraries including Google very soon.
@@kodieCode Thanks!
@@kodieCode waiting for the video man!!
it was greate one the challlenging thing that i faced is to convet calenders like gregorian to hijri and jalali
Wow. Not something I've come up against. How did you get around it?
This only dynamicly shows the menu items. If a user is not logged in it still can go to the private route by typing it in. There is no redirect.
The routes are only accessible when logged in as the routes are only defined when authenticated therefore not accessible. If a user not logged in tries to directly access a private route they will be shown the default controller
Wow never thought of setting it up like that. Makes absolute sense. An aha moment for me. Thanks for the reply.
No problem. The great thing about an overall Auth controller with useContext is that you can make just about anything easily conditional on the user being logged in.
But what If the user enters to that route from a different tab, he is logged in but since the state of user logged in is only on the other tab, now he wont have access? @@kodieCode
This is okay but how can we show 404 page and not authenticated user according to condition.
when discussing features can you add the pitfalls to avoid, for example unnecessary rerenders?
Thanks for the suggestion
Could we use .then as a substitute for the nesting?
Not in this case, no.