Authentication component that tracks user authentication status

[keiffer01]

What is a quick description of the change?

Adds components that allows for tracking of the authentication status of the current user, allowing for certain pages to be marked as private.

Is this fixing an issue?

Partially addressed Issue #25.

Are there more details that are relevant?

An Auth directory was created in the components directory, and the following components were made:

• An AuthProvider component that makes use of React Context to set up the firebase auth listener and allow the current firebase user to be globally accessed. This component was wrapped around the App component's Router.
• A PrivateRoute component. Acts as a consumer of AuthProvider to determine the status of the current user. If the user is authenticated, this component functions identically to a Route component. If the user is not authenticated, they are redirected to the SignIn page. This component can now be used for any pages where the user needs to be authenticated. See the App/index.js file for usage.

Check lists (check x in [ ] of list items)

• Test written/updating
• Tests passing
• Coding style (indentation, etc)

Any additional comments?

The history module was added to allow tracking of the URL during testing.

A demonstration GIF is given below, where the view-trips and view-activities pages are now marked as PrivateRoutes:

[zghera]

If I understand correctly, ...rest are all the props passed into this component besides RouteComponent so justpath. So then where does routeProps come from? Also why is it render instead of component? Should it have the same props as one like this:

<Route path={ROUTES.SIGN_IN} component={SignInPage} />

[keiffer01]

Essentially I just want PrivateRoute to act exactly as a Route component, with the added authentication check. So yeah you have the right idea that ...rest are just all the other props passed into PrivateRoute. I then used a render prop to specify that the component to be rendered is either the RouteComponent, if the user is logged in, or a Redirect component if the user is not logged in. The routeProps are the props that are usually passed into the RouteComponent, such as URL params, etc.

If you think it would be beneficial to comment my code on some of these I can definitely do that!

[HiramSilvey]

I think a brief comment mentioning this would be good. +1

[keiffer01]

Sounds good, will do that before merging.

[HiramSilvey]

Approved with request for a minor comment addition.

[HiramSilvey]

I think a brief comment mentioning this would be good. +1