├── .eslintrc.json ├── .gitignore ├── README.md ├── middleware.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── api │ └── hello.js ├── dashboard.js └── index.js ├── public ├── Sprinkle.svg ├── favicon.ico └── vercel.svg └── styles ├── Home.module.css └── globals.css /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /middleware.js: -------------------------------------------------------------------------------- 1 | import { NextResponse } from "next/server"; 2 | 3 | export default function middleware(req){ 4 | let verify = req.cookies.get("loggedin"); 5 | let url = req.url 6 | 7 | if(!verify && url.includes('/dashboard')){ 8 | return NextResponse.redirect("http://localhost:3000/"); 9 | } 10 | 11 | if (verify && url === "http://localhost:3000/") { 12 | return NextResponse.redirect("http://localhost:3000/dashboard"); 13 | } 14 | 15 | 16 | } -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "protectedroutes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "js-cookie": "^3.0.1", 13 | "next": "12.2.2", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "eslint": "8.20.0", 19 | "eslint-config-next": "12.2.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /pages/dashboard.js: -------------------------------------------------------------------------------- 1 | import Cookies from "js-cookie"; 2 | import { useRouter } from "next/router"; 3 | import Link from "next/link"; 4 | 5 | const Dashboard = () => { 6 | const router = useRouter(); 7 | 8 | const logOut = () => { 9 | Cookies.remove("loggedin"); 10 | router.push('/') 11 | }; 12 | 13 | return ( 14 |
15 | 16 | 19 | 20 |
21 |

You Are Logged In!

22 | 29 |
30 |
31 | ); 32 | }; 33 | 34 | export default Dashboard; 35 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Cookies from "js-cookie"; 2 | import { useRouter } from "next/router"; 3 | import Link from "next/link"; 4 | 5 | export default function Home() { 6 | const router = useRouter(); 7 | 8 | const logIn = (e) => { 9 | e.preventDefault(); 10 | Cookies.set("loggedin", "true"); 11 | router.push("/dashboard"); 12 | }; 13 | 14 | return ( 15 |
16 | 17 | 20 | 21 |
22 |
logIn(e)}> 23 |

Log In

24 | 25 | 26 | 27 |
28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /public/Sprinkle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asiqurrahman/Next.js-Protected-Routes/c80acdb94666c5ef4c8c462e52df4dc16ad07f69/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 100vh; 3 | padding: 0 0.5rem; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | 11 | .main { 12 | padding: 5rem 0; 13 | flex: 1; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | .footer { 21 | width: 100%; 22 | height: 100px; 23 | border-top: 1px solid #eaeaea; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | } 28 | 29 | .footer a { 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | flex-grow: 1; 34 | } 35 | 36 | .title a { 37 | color: #0070f3; 38 | text-decoration: none; 39 | } 40 | 41 | .title a:hover, 42 | .title a:focus, 43 | .title a:active { 44 | text-decoration: underline; 45 | } 46 | 47 | .title { 48 | margin: 0; 49 | line-height: 1.15; 50 | font-size: 4rem; 51 | } 52 | 53 | .title, 54 | .description { 55 | text-align: center; 56 | } 57 | 58 | .description { 59 | line-height: 1.5; 60 | font-size: 1.5rem; 61 | } 62 | 63 | .code { 64 | background: #fafafa; 65 | border-radius: 5px; 66 | padding: 0.75rem; 67 | font-size: 1.1rem; 68 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 69 | Bitstream Vera Sans Mono, Courier New, monospace; 70 | } 71 | 72 | .grid { 73 | display: flex; 74 | align-items: center; 75 | justify-content: center; 76 | flex-wrap: wrap; 77 | max-width: 800px; 78 | margin-top: 3rem; 79 | } 80 | 81 | .card { 82 | margin: 1rem; 83 | padding: 1.5rem; 84 | text-align: left; 85 | color: inherit; 86 | text-decoration: none; 87 | border: 1px solid #eaeaea; 88 | border-radius: 10px; 89 | transition: color 0.15s ease, border-color 0.15s ease; 90 | width: 45%; 91 | } 92 | 93 | .card:hover, 94 | .card:focus, 95 | .card:active { 96 | color: #0070f3; 97 | border-color: #0070f3; 98 | } 99 | 100 | .card h2 { 101 | margin: 0 0 1rem 0; 102 | font-size: 1.5rem; 103 | } 104 | 105 | .card p { 106 | margin: 0; 107 | font-size: 1.25rem; 108 | line-height: 1.5; 109 | } 110 | 111 | .logo { 112 | height: 1em; 113 | margin-left: 0.5rem; 114 | } 115 | 116 | @media (max-width: 600px) { 117 | .grid { 118 | width: 100%; 119 | flex-direction: column; 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"); 2 | 3 | * { 4 | margin: 0px; 5 | padding: 0px; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Open Sans", sans-serif; 11 | background-color: #12181b; 12 | background-image: url("/Sprinkle.svg"); 13 | } 14 | 15 | nav { 16 | margin: 50px; 17 | } 18 | 19 | nav h1 { 20 | padding: 10px; 21 | font-size: 2.5em; 22 | background-color: #6675ff; 23 | width: fit-content; 24 | border-radius: 10px; 25 | color: white; 26 | cursor: pointer; 27 | } 28 | 29 | form { 30 | width: 700px; 31 | height: 500px; 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | background-color: #1f222a; 36 | color: white; 37 | border-radius: 10px; 38 | box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; 39 | } 40 | 41 | form input { 42 | all: unset; 43 | width: 600px; 44 | height: 50px; 45 | background-color: whitesmoke; 46 | border: 2px solid grey; 47 | border-radius: 10px; 48 | color: black; 49 | font-size: 1.5em; 50 | padding-left: 20px; 51 | margin-top: 50px; 52 | } 53 | 54 | form h1 { 55 | margin-top: 20px; 56 | } 57 | 58 | button { 59 | all: unset; 60 | padding: 10px; 61 | font-size: 1.5em; 62 | background-color: #6675ff; 63 | text-align: center; 64 | font-weight: bold; 65 | width: 300px; 66 | border-radius: 10px; 67 | color: white; 68 | cursor: pointer; 69 | margin-top: 60px; 70 | } 71 | 72 | .dashboard { 73 | display: flex; 74 | flex-direction: column; 75 | align-items: center; 76 | } 77 | 78 | .dashboard h1 { 79 | font-size: 3.5em; 80 | color: #6675ff; 81 | } 82 | --------------------------------------------------------------------------------