- 26
- 100 834
Kodie
United Kingdom
Приєднався 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 options
3. A login page that calls a login function from our Auth Wrapper
4. Dynamically build and set our menus and routes depending on the user's status
#reacttutorial #reactrouter #reactjs
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 options
3. A login page that calls a login function from our Auth Wrapper
4. Dynamically build and set our menus and routes depending on the user's status
#reacttutorial #reactrouter #reactjs
Переглядів: 76 554
Відео
Unlock Your Earning Potential: Why you need to Start Learning to Code Today!
Переглядів 107Рік тому
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
Переглядів 1,3 тис.Рік тому
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
Переглядів 452Рік тому
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
Переглядів 11 тис.2 роки тому
NEW VERSION AVAILABLE Due to the feedback received on this video, a new version with a link to download the code is available here: ua-cam.com/video/q94v5AhgrW4/v-deo.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 ensure...
How to Iterate through an array in JSX - ReactJS
Переглядів 8182 роки тому
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
Переглядів 8992 роки тому
How to control refreshing your hook data - React JS Hooks
Revolutionise Your Code: Unleash the Power of Inline JSX Switch Statements
Переглядів 1,4 тис.2 роки тому
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
Переглядів 9322 роки тому
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
Переглядів 4042 роки тому
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
Переглядів 8682 роки тому
How to use the useContext Hook for a truly global state - React JS Tutorial
React JS Crash Course for Beginners - E6 - React-Router
Переглядів 1242 роки тому
React JS Crash Course for Beginners - E6 - React-Router
React JS Crash Course for Beginners - E5 - useEffect
Переглядів 652 роки тому
React JS Crash Course for Beginners - E5 - useEffect
React JS Crash Course for Beginners - E4 - State & Forms
Переглядів 1172 роки тому
React JS Crash Course for Beginners - E4 - State & Forms
React JS Crash Course for Beginners - E3 - Components & Props
Переглядів 992 роки тому
React JS Crash Course for Beginners - E3 - Components & Props
React JS Crash Course for Beginners - E2 - JSX & Styles
Переглядів 622 роки тому
React JS Crash Course for Beginners - E2 - JSX & Styles
React JS Crash Course for Beginners - E1 - Setup & Installation
Переглядів 1202 роки тому
React JS Crash Course for Beginners - E1 - Setup & Installation
Selamun Aleykum, Good day sir. I am learning basically learnt the react but question is npx create vite@latest and npm create react-app what is difference like iunderstand npx what is it and npm , which is better and each of them when to use
Finally someone who doesn’t code in the video just explains the code
ro, you're a genius, that's exactly what i was searching. THNKS 😀
It is not recommend to add a function in context provider?
sir you should create this in full playlist format that we can get more clearity for beginners its bit hard to understand everything, you should also connect it with backend that what routes are set in backend etc.
bcz in react js authentication is most confusing part for beginners
Noted
Thank you
You're welcome
same here i was doing a while loop haha I'm a noob
Hopefully this helped
So objects don’t always have to be arrays ?
Correct, objects are not always arrays or arrays of objects.
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.
It is, yes, React Router has moved on a bit since this tutorial but it's still relevant.
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?
In theory. the video was meant to help people that were struggling with the exact structure of routes and private content. There are many other things that should be used for security
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.
thanks for the comment. More coming in October now I have more time
This is a super useful video!!!, went through it, understood how everything is done, great video!!!
Thanks for the comment.
Gold Gold Goldberg !! Happy to find this channel !!
Appreciate the comment.
you explained it well thank you 👍👍
thank you for letting me know.
straight and easy to understand thanks for the video.
Thanks for giving me that feedback
Nice ❤
Appreciate it!
thanks for helping me with this vid, one subscribe for you sir
thanks for the comment and the sub
Why are the extension files `.js` instead of `.jsx`?
Doesn't matter it's a framework
It won't make an difference.
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!
I'm afraid I don't work in typescript, it doesn't work for me at the speed I code
Really nice video, Thankyou.
Glad you liked it!
Please I need a tutorial on how to use localstorage with this
This was with LocalStorage. I'm working on a JWT version
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?
I don't use next.js as it's best IMO for websites and I'm mainly working on backend and admin panels
How can I Implement roles of users?
You would just need to add additional layers to the user object and define that in the routes
can you make a new video on how not to make user logout whenever the page refresh?
It's as simple as looking up the user details from the localStorage on a page reload.
yes pls do that user key and session expire thingi we do want it
It's possible to add a user lookup to the database on page load but I will add more to this soon
Grwat
Thanks
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
Appreciate the feedback
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')
You could manually do that but I would add a default root
Good suggestion but only if there is no public page option
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!