Hello i tried to fetch some data from my API and i can confirm that there is no issue in the API and can see the value of data in my terminal in my VS code ( which i know it is in server side of next js, Correct me if im wrong) but the value did not shown in client side, if logged it it did not show in browser console. i fetch data from other endpoint of my API in it work if i did not use jwt for my data.
can anyone show me what im doing wrong?
here is my code for my component
srcapp(dashboard)my-profilepage.tsx
"use client";
import useSWR, { preload } from "swr";
import { arrListUsers } from "@/signals/userSignal";
import axios from "axios";
import getAllOrganisasi from "@/axios/organisasi";
const baseUrl = process.env.NEXT_PUBLIC_BASE_API_URL
const fetcherListUsers = (url: string) => axios.get(url).then((res) => res.data);
preload("http://localhost:3005/user/getAll", fetcherListUsers);
preload("getAllOrganisasi", getAllOrganisasi)
const UserProfile = () => {
console.log("render my-profile");
const userlist = useSWR(`${baseUrl}/user/getAll`, fetcherListUsers);
const organisasiList = useSWR("getAllOrganisasi", getAllOrganisasi);
arrListUsers.value = userlist.data;
console.log('organisasiList data ==> ', organisasiList.data)
};
export default UserProfile;
srclibsjwt.ts
// 'use server'
import jwt from "jsonwebtoken";
const keyAuth: string = process.env.NEXT_PUBLIC_JWT_SECRET as string
type tokenRes = {
dataRes: any;
expired_at: string;
};
export const readPayloadToken = (token: string, endpoint: string | null | undefined) => {
try {
if(endpoint) console.log('endpoint ==> ', endpoint)
console.log('token ==> ', token)
let payload: any = jwt.verify(token, keyAuth, { algorithms: ['HS256'] })
if (!payload) throw Error ('no payload')
let { data, iat, exp } = payload;
if (data && iat && exp) {
let timeStamp = new Date(exp * 1000);
let expired_at = timeStamp.toLocaleString("id-ID", {
dateStyle: "full",
timeStyle: "full",
});
const tokenRes = {
dataRes: data,
expired_at,
};
return tokenRes as tokenRes;
}
return null;
} catch (error) {
console.log("error in readPayloadToken ==> n", error);
}
};
export const payloadTokenGenerate = async (payload: any) => {
try {
const token = await jwt.sign({ data: payload }, keyAuth, {
expiresIn: "12h",
algorithm: "HS256",
allowInsecureKeySizes: true
});
const decoded = await readPayloadToken(token, null);
const tokenRes = {
access_token: token,
expired_at: decoded?.expired_at,
};
return tokenRes;
} catch (error) {
console.log("error in payloadTokenGenerate ==> n", error);
}
};
srcaxiosorganisasi.ts
import { readPayloadToken } from "@/libs/jwt"
import axios from "axios"
const baseUrl = process.env.NEXT_PUBLIC_BASE_API_URL
export default async function getAllOrganisasi() {
try {
const { data } = await axios.get(`${baseUrl}/organisasi/allorganisasi`)
const payload = readPayloadToken(data.access_token, `${baseUrl}/organisasi/allorganisasi`)
const dataSend = payload?.dataRes
console.log('dataSend getAllOrganisasi ==> ', dataSend)
return dataSend
} catch (error) {
console.log(error)
}
}
package.json
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@cyntler/react-doc-viewer": "^1.14.1",
"@headlessui/react": "^1.7.18",
"@heroicons/react": "^2.1.1",
"@pdftron/webviewer": "^10.6.0",
"@preact/signals-react": "^2.0.1",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@tanstack/react-table": "^8.13.2",
"axios": "^1.6.5",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"date-fns": "^3.6.0",
"file-saver": "^2.0.5",
"jsonwebtoken": "^9.0.2",
"next": "^14.2.3",
"next-auth": "^4.24.5",
"pdf-lib": "^1.17.1",
"react": "^18",
"react-data-table-component": "^7.5.4",
"react-datepicker": "^4.25.0",
"react-day-picker": "^8.10.0",
"react-dom": "^18",
"react-icons": "^5.2.1",
"react-loader-spinner": "^6.1.6",
"react-select": "^5.8.0",
"sonner": "^1.3.1",
"swr": "^2.2.5",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7",
"zustand": "^4.4.7"
},
"devDependencies": {
"@preact/signals-react-transform": "^0.3.1",
"@types/jsonwebtoken": "^9.0.5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.0.4",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
this is the result from my browser console