React

npm i react-router-dom

import {
  BrowserRouter,
  Routes,
  Route,
  useNavigate,
  useParams,
  Link,
} from "react-router-dom";

Auth Context :

Pasted image 20240213235824.png
Pasted image 20240214001324.png

Pasted image 20240214001544.png
we can also use hooks for const authContext = useContext(AuthContext); and then pass it down from AuthContext.js
Pasted image 20240214004729.png
Pasted image 20240214004744.png

How does Pasted image 20240214005125.png this work ?****
Pasted image 20240214005105.png

gives us the output as

using `authContext` :

Pasted image 20240316185006.png

Problem #1 :

We are able to access the todos page by directly visiting the link http://localhost:3000/todos even when we are logged out, we have to fix this.

We want users to access the /todos route only when they are logged in.

	<Route path="/welcome/:username" element={<WelcomeComponent />} />
	<Route path="/todos" element={<ListTodosComponent />} />
	<Route path="/logout" element={<LogoutComponent />} />

These 3 routes should only be accessible when a user is authenticated.
If a user tries to access these routes without logging then he should be re routed to the login page.

Connecting The Rest API to React FrontEnd : Folder 12

Axios :

npm i axios
Pasted image 20240324111715.png

Pasted image 20240324111725.png

3 Methods are defined for it, catch, finally and then.
.then() will get called when the process is successful.
.catch() is used to catch any errors.
.finally() will be called irrespective of whether a successful call was made or not. This is basically where we do the cleanup.

Now, we get the following error : (Video 3 and Video 4)
Pasted image 20240324112508.png

This happens because we are making a call from
These kinds of requests are called cross-origin requests. By default cross origin requests are denied
! Web MVC Configurer : See Video 4.

Replacing username :