Skip to content

Protected routes with JWT ok! #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
richardd82 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Protected routes with JWT ok! #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,194 changes: 3,043 additions & 151 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"install": "^0.13.0",
"json-ts": "^1.6.4",
"jsoneditor": "^10.0.0",
"jsonwebtoken": "^9.0.2",
"next": "14.0.4",
"next-auth": "^4.24.5",
"passport-github": "^1.1.0",
Expand All @@ -28,13 +29,16 @@
"yup": "^1.3.3"
},
"devDependencies": {
"@types/jsonwebtoken": "^9.0.6",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react-syntax-highlighter": "^15.5.11",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.0.4",
"i": "^0.3.7",
"npm": "^10.5.0",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
Expand Down
58 changes: 58 additions & 0 deletions src/app/_middleware.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { Layout } from "@/app/components";
import { useEffect, useState } from "react";
import jwt, { JwtPayload } from "jsonwebtoken";
import { set } from "react-hook-form";

interface DecodedToken extends JwtPayload {
exp?: number;
}

const decodeToken = (token: string): DecodedToken | null => {
return jwt.decode(token, { complete: true }) as DecodedToken;
};

const withAuth = (Component: React.ComponentType<any>) => {
const AuthComponent = (props: any) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isLoading, setIsLoading] = useState(true);

const user: any = localStorage.getItem("user");
const token = user ? JSON.parse(user) : null;


useEffect(() => {
if (token) {
const decodedToken = decodeToken(token.token);
debugger;
// console.log(decodedToken?.payload);
// console.log(decodedToken?.payload.exp , "decodedToken?.exp");
// console.log(Date.now() / 1000, "Date.now() / 1000");

if (
decodedToken &&
decodedToken?.payload.exp &&
decodedToken.payload.exp > Date.now() / 1000
) {
setIsAuthenticated(true);
}
}
setIsLoading(false);
}, []);
if (isLoading) {
return <div></div>;
}

if (!isAuthenticated) {
// Redirige al usuario si no está autenticado
window.location.href = "/auth/login";
return null; // Devuelve null para evitar renderizar el componente
}

// Si el usuario está autenticado, renderiza el componente
return <Component {...props} />;
};

return AuthComponent;
};

export default withAuth;
3 changes: 1 addition & 2 deletions src/app/auth/login/components/GithubBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from "react";
import githubIcon from "../../../../../public/social-github.svg";
import Image from "next/image";
import Link from "next/link";
import axios from "axios";

const GithubBtn = () => {
const urlBackend = process.env.NEXT_PUBLIC_BACKEND_URL;
Expand All @@ -12,7 +11,7 @@ const GithubBtn = () => {
return (
<Link href={`https://github.com/login/oauth/authorize?client_id=${gitClientId}&redirect_uri=${urlBackend}/auth/github/callback&scope=user:email`}>
<div className='flex w-full justify-center p-4'>
<Image src={githubIcon} alt='Github Icon' className='w-1/4 cursor-pointer'/>
<Image src={githubIcon} alt='Github Icon' className='w-1/6 cursor-pointer'/>
</div>
</Link>
);
Expand Down
2 changes: 0 additions & 2 deletions src/app/auth/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
"use client";
import React, { use, useEffect } from "react";
import { Header, Layout } from "../../components";
import LoginForm from "./components/LoginForm";

Expand Down
11 changes: 0 additions & 11 deletions src/app/auth/private/profile/page.tsx
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion src/app/community/client/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Header } from '@/app/components'
import LeftSideBar from '../LeftSideBar'
import Client from './components/Client'
import { ClientProvider } from './context/RequestContext'
import withAuth from '../../_middleware'

const ClientPage = () => {
return (
Expand All @@ -17,4 +18,4 @@ const ClientPage = () => {
)
}

export default ClientPage
export default withAuth(ClientPage)
4 changes: 3 additions & 1 deletion src/app/community/components/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
'use client'
import { Layout } from '@/app/components'

import ContentBox from './components/ContentBox'
import { ContentProvider } from './context/ContentContext'
import withAuth from '../../_middleware'

const page = () => {
return (
Expand All @@ -13,4 +15,4 @@ const page = () => {
)
}

export default page
export default withAuth(page)
2 changes: 1 addition & 1 deletion src/app/components/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Avatar = () => {
let loggedUser = JSON.parse(localStorage.getItem("user")!);

// console.log(avatar, "AVATAR");
console.log(loggedUser, "LOGGEDUSER");
// console.log(loggedUser, "LOGGEDUSER");

const toggleDropDown = () => {
setShowDropdown(!showDropdown);
Expand Down
6 changes: 4 additions & 2 deletions src/app/games/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use client';
import { Layout } from '../components'
import { CardDocs } from './components'
import withAuth from "../_middleware";

function GamesPage() {
return (
Expand Down Expand Up @@ -44,5 +46,5 @@ function GamesPage() {
</Layout>
)
}

export default GamesPage
// debugger;
export default withAuth(GamesPage)
4 changes: 3 additions & 1 deletion src/app/guides/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use client';
import { Layout } from '@/app/components'
import { CardDocs } from '../games/components'
import withAuth from '../_middleware'

const Guides = () => {
return (
Expand Down Expand Up @@ -45,4 +47,4 @@ const Guides = () => {
)
}

export default Guides
export default withAuth(Guides)
5 changes: 3 additions & 2 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import Link from "next/link";
import { Button, Layout } from "./components";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { log } from "console";
// import withAuth from "./auth/private/profile/_middleware";

export default function Home() {
function Home() {
const [loggedUser, setLoggedUser] = useState<string | null>(null);

const tryToParseJson = (data: string): string | null => {
Expand Down Expand Up @@ -83,3 +83,4 @@ export default function Home() {
</Layout>
);
}
export default Home;