├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.js
├── index.css
├── index.js
└── pages
├── auth.js
├── dashboard.js
└── profile.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## React Router v6 - protected and public routes
2 |
3 | ### This repo shows how to use React Router v6 to create public and private routes in your react web app
4 |
5 | ### Youtube Tutorial Link - https://youtu.be/rGmJYIUwxdo
6 |
7 | #### 📚 Materials/References:
8 |
9 | - React Router v6: https://reactrouter.com/docs/en/v6
10 |
11 | - React Router upgradation guide: https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-protected-routes",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.0",
7 | "@testing-library/react": "^11.2.7",
8 | "@testing-library/user-event": "^12.8.3",
9 | "react": "^17.0.2",
10 | "react-dom": "^17.0.2",
11 | "react-router-dom": "^6.0.2",
12 | "react-scripts": "4.0.3",
13 | "web-vitals": "^1.1.2"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": [
23 | "react-app",
24 | "react-app/jest"
25 | ]
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FullstackSimplified/react-protected-routes-v6/15c7d7ba05a6b3d44547bb74808e6a86c598434d/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FullstackSimplified/react-protected-routes-v6/15c7d7ba05a6b3d44547bb74808e6a86c598434d/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FullstackSimplified/react-protected-routes-v6/15c7d7ba05a6b3d44547bb74808e6a86c598434d/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { Route, Routes, Navigate } from "react-router-dom";
3 | import Auth from "./pages/auth";
4 | import Dashboard from "./pages/dashboard";
5 | import Profile from "./pages/profile";
6 |
7 | const App = () => {
8 | const [auth, setAuth] = useState(null);
9 |
10 | useEffect(() => {
11 | let user = localStorage.getItem("user");
12 | user && JSON.parse(user) ? setAuth(true) : setAuth(false);
13 | }, []);
14 |
15 | useEffect(() => {
16 | localStorage.setItem("user", auth);
17 | }, [auth]);
18 |
19 | return (
20 |
21 | {!auth && (
22 | setAuth(true)} />}
25 | />
26 | )}
27 |
28 | {auth && (
29 | <>
30 | setAuth(false)} />}
33 | />
34 | } />
35 |
36 | )}
37 | } />
38 |
39 | );
40 | };
41 |
42 | export default App;
43 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { BrowserRouter } from "react-router-dom";
4 | import "./index.css";
5 | import App from "./App";
6 |
7 | ReactDOM.render(
8 |
9 |
10 |
11 |
12 | ,
13 | document.getElementById("root")
14 | );
15 |
--------------------------------------------------------------------------------
/src/pages/auth.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useNavigate } from "react-router-dom";
3 | const Auth = ({ authenticate }) => {
4 | const navigate = useNavigate();
5 |
6 | //auth button handler
7 | const onClick = () => {
8 | authenticate();
9 | navigate("profile");
10 | };
11 | return (
12 |
13 |
Please authenticate to continue
14 |
15 |
16 | );
17 | };
18 |
19 | export default Auth;
20 |
--------------------------------------------------------------------------------
/src/pages/dashboard.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Dashboard = () => {
4 | return (
5 |
6 |
Dashboard
7 |
8 | );
9 | };
10 |
11 | export default Dashboard;
12 |
--------------------------------------------------------------------------------
/src/pages/profile.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | const Profile = ({ logout }) => {
5 | return (
6 |
7 | Dashboard
8 |
Hi you are logged in
9 |
10 |
11 | );
12 | };
13 |
14 | export default Profile;
15 |
--------------------------------------------------------------------------------