#yes correct! but also my fetch is pretty

1 messages · Page 1 of 1 (latest)

serene flame
#

Here @timid kite

timid kite
#

hey hey

serene flame
#

Is it a app or page router?

timid kite
#

yes you are right, this access token jwt will be passed to everycall to the backend which is nestjs server

#

app 13.5.6

serene flame
#

Cool

timid kite
#

i can share some screenshots if needed

#

thats the main structure

serene flame
#

What's the dashboard or homepage is here?

timid kite
#

and i have created this index.ts to fit more auth calls like update password / register etc no next-auth related. but still auth somehow

#

in page.tsx right above robots.ts is Home:

export default function Home() {
  return (
    <main className='flex min-h-screen flex-col items-center justify-between p-24'></main>
  );
}
serene flame
#

So in your layout
const { data: session } = useSession()
and log the session and check what response you're getting

timid kite
serene flame
#

That's your accesstoken

timid kite
#

correct, is set after i login to my nestjs backend

serene flame
#

You may can create a middleware and save it and pass for everycall

#

or

#

Use the Zustand and store it in a store and use the tanstack query and pass for the everycall

timid kite
#

what is your suggestion, someone told me like is not good idea to use it in middleware cuz could slow down because middlewares are executed over every request

serene flame
#

Yeah same for me

timid kite
#

and so far this it the only middleware that i have

image.png
serene flame
#

For my application I used the zustand

timid kite
#

but zustand and tansack are client stuff?

#

that mean each component that will execute request need to be marked as client even the ones that executes GET

serene flame
#

Nope

#

The main parent component will be the server and the child can be the cliennt

#

For an example

#

If you have the products

#

the page will be the server

#

and the component you can make it as the client and do the stuff

#

liek fetching the data, useeffect and states

timid kite
#

but how come that i'm not able to read next-auth in such kind of service

image.png
timid kite
serene flame
#

Yes but here you need to pass the token for every call

#

and I don't recommend fetching the session token for every component

timid kite
#

so you are suggesting uing middleware?

serene flame
#

It's better to store it and use it

timid kite
#

hmm

#

do you have any example repo

serene flame
#

That's my server componen

image.png
timid kite
#

and is it possible to read in this updatePasswordApi even if i need to do it for each call feels like better trade of than store it in another place and then use it from there in a client component?

serene flame
#

That's my client

image.png
timid kite
#

it makes sense for container to be client, you have user interaction

serene flame
#

Yep

timid kite
#

but lets say such is missing and you need to convert it to client just to consume from the store

serene flame
#

But your parent is server

timid kite
#

but it doesn't really matter cuz parrent have 2 divs? like 95% of the screen is still client?

#

hmm

serene flame
#

Then you need to stick with the server component and need to find a way through the middlewares

timid kite
#

looks like very weird, how next do not have scenario for such standard case 😄

#

i mean if middleware is applied will be executed to each request and need to be very limited, apart from that is hard to chain middlewares as far as i understood

#

and if i want to read it in a service i'm not really able to do it?

serene flame
#

You can follow my strategy bro

timid kite
#

hmm will try to find some approach to do it

#

i feel like should be possible to store the jwt in next auth and then use it in services directly because otherwise become kinda redundant

serene flame
#

Okay

timid kite
#

if i found something i'll share it with you

#

so you can clean up a little bit this container and leave just the small pieces as a leafs to the client components

serene flame
#

Sure, thanks

timid kite
#

hey bro you can use getSession() in the service, that way you can remove everything from the client component and no need to create middleware:


export const updatePasswordApi = async (data: {
  oldPassword: string;
  newPassword: string;
}) => {
  const session = await getSession();

  const response = await fetch(baseUrl, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${session?.user.accessToken}a`
    }
  });

  if (!response.ok) {
    throw new Error(API_ERRORS.UPDATE_PASSWORD);
  }

  return response.json();
};

yes you need to repeat this on every request, but it's the same if is passed from the component and here is more isolated and applicable