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: github.com/carmellemillar/carmelle-codes-react-app

LoginForm.js - gist.github.com/carmellemillar/65ca0d324ea2e68597e…
WebApp.js - gist.github.com/carmellemillar/0fc6eb88ad0d66a056c…
usehooks/useAuth - usehooks.com/useAuth/