React JS Tutorial - 04 PROTECTED ROUTE - How to make a private route
Learn how to make a protected page in your app! Protected pages, or private routes, are parts of your application that you want to hide until the user logs in. This tutorial uses react-router-dom for navigation, Firebase for authentication / login, and React Context to keep track of global state in our web app.
0:00 Demo end state of tutorial
1:21 Start of tutorial - making a Login and WebApp Page
2:49 Explaining the plan, to make an AuthContext
4:12 Initialize AuthContext from usehooks
4:30 Cleaning up AuthContext
5:00 Explaining the file
6:00 Import firebase to clear firebase error
6:26 Refactoring auth helper functions
7:28 Add callback for navigating after signup/login
8:00 Add ProvideAuth to index.js, top level of our app
8:35 Call useAuth hook in SignUp Form
9:25 Test out our code manually
9:43 Bug fix
10:00 Back in App.js to make PrivateRoute component
10:41 Initialize PrivateRoute component
10:55 Refactor code from react-router-dom documentation
11:51 Use our routes constants for the Redirect
12:30 Add LOGIN and WEB_APP route constants
13:07 Export the ProtectedRoute module
13:50 Add PrivateRoute to App
15:00 Make Redirect go to SIGN_UP instead
15:15 Testing going straight to the PrivateRoute, /webapp
15:37 Call useHistory hook to navigate after sign up
16:53 Talking to myself about that location parameter
17:05 Testing navigating to /webapp
17:40 Refactoring LoginForm
18:15 Adding Login to our NavigationBar
18:51 Bug fix so our home isn’t WebApp
19:36 useAuth hook in NavigationBar to conditionally render links
19:55 Conditional rendering
20:31 Nav links when there is a user
20:55 Sign out link
21:33 Closing remarks
GitHub Repo Link: https://github.com/carmellemillar/car...
LoginForm.js - https://gist.github.com/carmellemilla...
WebApp.js - https://gist.github.com/carmellemilla...
usehooks/useAuth - https://usehooks.com/useAuth/
Watch video React JS Tutorial - 04 PROTECTED ROUTE - How to make a private route online without registration, duration hours minute second in high quality. This video was added by user Carmelle Codes 11 February 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,80 once and liked it 14 people.