Implementing a Central Authentication Context

We are going to put state and functions for authentication in a central place in our code. We could use Redux for this, but we are going to take this opportunity to use a context in React.

Note: React context is a standard feature in React that allows components to share data without having to pass it through component properties.

We are going to put our authentication state and functions in a React context that we'll provide to all of the components in our app.

Authentication context implementation in React app

Let's carry out the following steps:

1. Create a new file in the src folder called Auth.tsx with the following import statements: