14 |
15 |
16 | Home
17 | Free Component
18 | Auth Component
19 |
20 |
21 |
22 |
23 | {/* create routes here */}
24 |
25 |
26 |
27 |
28 |
29 |
30 | );
31 | }
32 |
33 | export default App;
34 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-auth",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.6",
7 | "@testing-library/react": "^11.2.2",
8 | "@testing-library/user-event": "^12.2.2",
9 | "axios": "^0.21.1",
10 | "bootstrap": "^4.5.3",
11 | "react": "^17.0.1",
12 | "react-bootstrap": "^1.4.0",
13 | "react-dom": "^17.0.1",
14 | "react-router-dom": "^5.2.0",
15 | "react-scripts": "4.0.0",
16 | "react-to-print": "^2.13.0",
17 | "universal-cookie": "^4.0.4",
18 | "web-vitals": "^0.2.4"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "react-scripts test",
24 | "eject": "react-scripts eject"
25 | },
26 | "eslintConfig": {
27 | "extends": [
28 | "react-app",
29 | "react-app/jest"
30 | ]
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.2%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 1 chrome version",
40 | "last 1 firefox version",
41 | "last 1 safari version"
42 | ]
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Authentication
2 |
3 | This repository houses a project built during the course of learning how to build an authentication system with react. The following are the tutorials:
4 |
5 | * [Introduction to React-Bootstrap](https://dev.to/ebereplenty/introduction-to-react-bootstrap-20ik)
6 | * [React Authentication - Register](https://dev.to/ebereplenty/react-authentication-part-1-39aj)
7 | * [React Authentication - LOGIN](https://dev.to/ebereplenty/react-authentication-login-h3i)
8 | * [React Authentication - Protecting and Accessing Routes/Endpoints](https://dev.to/ebereplenty/react-authentication-protecting-and-accessing-routes-endpoints-96h)
9 | * [Printing in React Made Easy With React-To-Print](https://dev.to/ebereplenty/printing-in-react-made-easy-with-react-to-print-4b3k)
10 |
11 | ## Dependencies
12 | * [Axios](https://www.npmjs.com/package/axios)
13 | * [React-Bootstrap](https://react-bootstrap.github.io/)
14 | * [universal-cookie](https://www.npmjs.com/package/universal-cookie)
15 | * [react-router-dom](https://www.npmjs.com/package/react-router-dom)
16 |
17 | ## Installation
18 | * Clone the whole project or by branch name
19 | * Run ``npm install``
20 | * Run ``npm start``
21 | *That will open the project on your default browser*
22 |
--------------------------------------------------------------------------------
/src/FreeComponent.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import axios from "axios";
3 | import PrintComponent from "./PrintComponent";
4 |
5 | export default function FreeComponent() {
6 | // set an initial state for the message we will receive after the API call
7 | const [message, setMessage] = useState("");
8 |
9 | // useEffect automatically executes once the page is fully loaded
10 | useEffect(() => {
11 | // set configurations for the API call here
12 | const configuration = {
13 | method: "get",
14 | url: "https://nodejs-mongodb-auth-app.herokuapp.com/free-endpoint",
15 | };
16 |
17 | // make the API call
18 | axios(configuration)
19 | .then((result) => {
20 | // assign the message in our result to the message we initialized above
21 | setMessage(result.data.message);
22 | })
23 | .catch((error) => {
24 | error = new Error();
25 | });
26 | }, []);
27 |
28 | return (
29 |
30 |
Free Component
31 |
32 | {/* displaying our message from our API call */}
33 |
{message}
34 |
35 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/ProtectedRoutes.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Route, Redirect } from "react-router-dom";
3 | import Cookies from "universal-cookie";
4 | const cookies = new Cookies();
5 |
6 | // receives component and any other props represented by ...rest
7 | export default function ProtectedRoutes({ component: Component, ...rest }) {
8 | return (
9 |
10 | // this route takes other route assigned to it from the App.js and return the same route if condition is met
11 | {
14 | // get cookie from browser if logged in
15 | const token = cookies.get("TOKEN");
16 |
17 | // return route if there is a valid token set in the cookie
18 | if (token) {
19 | return ;
20 | } else {
21 | // return the user to the landing page if there is no valid token set
22 | return (
23 |
32 | );
33 | }
34 | }}
35 | />
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/PrintComponent.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import { Button } from "react-bootstrap";
3 | import ReactToPrint from "react-to-print";
4 |
5 | export default function PrintComponent() {
6 | let componentRef = useRef();
7 |
8 | return (
9 | <>
10 |
11 | {/* button to trigger printing of target component */}
12 | }
14 | content={() => componentRef}
15 | />
16 |
17 | {/* component to be printed */}
18 |