Anyone used react router? How will client side know that

Adi
Ok now if this object is sent after login is succe...

me usually do this first user will login and the the response will be back with set cookie header then token from response will be saved in my browser cookie and save user object in global state then user object will be available untill page refresh then in react or vue I will write a middleware that first on page load will requests to server just for getting logged in user data again (just for security reason I wont keep user data in cookie or localstorage) and then if data successfully got back then save it again in global state if not redirect to login . (cookie is httponly and dont forget to refresh jwt token) simply explained the whole jwt auth :)

0

23.05.2021

Adi Автор вопроса

Masoud
me usually do this first user will login and the...

Yes i am using http only cookie but when login is success user redirected to profile page and at this point user object is stored in redux state. Now user navigates to protected page user object is passed to auth route using useAuth hook. Now if session is expired then how to remove user object I mean set it to null/undefined? In react router docs I could not find where did they added this check for user object

0

23.05.2021

Adi Автор вопроса

Masoud
me usually do this first user will login and the...

Here auth.user is used in our case when login is success that user object will be stored in auth.user is that right? https://reactrouter.com/web/example/auth-workflow If above is right then I cannot see how auth.user is set to null if session is expired?? If logout button is clicked then user object is set to null but what about session expiry case?

0

23.05.2021

Adi Автор вопроса

Adi
Here auth.user is used in our case when login is s...

Anyone?

0

23.05.2021

Adi
Yes i am using http only cookie but when login is ...

on server you (should) have auth middlware and in that you check every request and when session is expired you will return for example 403 error and when that error receives on browser the you can set user object to null and redirect to login page

0

23.05.2021

Adi Автор вопроса

Masoud
on server you (should) have auth middlware and in ...

Oh ok got it. One more question user object should be stored in redux state and not local state is that right?

0

23.05.2021

Adi
Oh ok got it. One more question user object should...

yeah , global state

0

23.05.2021

Adi Автор вопроса

Masoud
on server you (should) have auth middlware and in ...

but there is one problem here. Lets say there are 2 protected routes i.e contact us and about page on these 2 pages API call is not made to server all the data is hardcoded on both the pages. In such cases if user just keeps switching between both these 2 pages then how will your solution work?

0

23.05.2021

Adi
but there is one problem here. Lets say there are ...

What ? Once user token is invalidate and your user try to navigate to another protected route he will redirected always

0

23.05.2021

Adi Автор вопроса

Isaac .
What ? Once user token is invalidate and your user...

So you mean to say on frontend I have to check if session is valid or invalid??

0

23.05.2021

Adi
So you mean to say on frontend I have to check if ...

I am frontend developer . I can say that you need to do this in the fronted to protect your routed .

0

23.05.2021

Isaac .
I am frontend developer . I can say that you need ...

Also you should do this in the backend, protect your endpoints

0

23.05.2021

Adi Автор вопроса

Isaac .
I am frontend developer . I can say that you need ...

where will you add that logic in case of react router ?? link: https://reactrouter.com/web/example/auth-workflow

0

23.05.2021

Adi Автор вопроса

Isaac .
I am frontend developer . I can say that you need ...

you mean backend all should have auth middleware and on frontend also I have do something for auth?? Backend part is clear to me. I am not getting client side routing

0

23.05.2021

Adi
where will you add that logic in case of react rou...

Well , the snippet is very clear

0

23.05.2021

Adi
you mean backend all should have auth middleware a...

I can't say nothing about backend 😂

0

23.05.2021

Adi Автор вопроса

Isaac .
I can't say nothing about backend 😂

So only frontend how to validate session? I am using http only cookie which cannot be accessed by client side JS

0

23.05.2021

Adi
but there is one problem here. Lets say there are ...

These pages don't require login, so I don't see the problem

0

23.05.2021

Adi Автор вопроса

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
These pages don't require login, so I don't see th...

Ok but as Masoud mentioned return from auth middleware from backend if session expired then set user object state on frontend to null and logout user is that correct implementation?

0

23.05.2021

Adi
Ok but as Masoud mentioned return from auth middle...

Whether you care about user object on the client is up to you, but once the backend sends a 401 error, you can safely log the user out

0

23.05.2021

Adi Автор вопроса

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
Whether you care about user object on the client i...

So without user object also auth on frontend is possible??

0

23.05.2021

Adi
So without user object also auth on frontend is po...

Weren't you using httpOnly cookies?

0

23.05.2021

Adi Автор вопроса

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
Weren't you using httpOnly cookies?

Yes httponly cookie

0

23.05.2021

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
That means auth is a backend problem

Adi
Yes httponly cookie

That means auth is a backend problem

0

23.05.2021

Adi Автор вопроса

But react router docs maintain some user object thats why I asked so got confused

0

23.05.2021

Adi
But react router docs maintain some user object th...

Doesn't apply to you

0

23.05.2021

Adi
but there is one problem here. Lets say there are ...

calling api is in middleware and middleware will called before entering every route 😕

0

23.05.2021

Adi Автор вопроса

Masoud
calling api is in middleware and middleware will c...

yes that is on backend but on frontend routes lets say I am navigating to protectedRoute which does not make an API call in that case what will you do?

0

23.05.2021

Adi
yes that is on backend but on frontend routes lets...

NOOOO I mean the routes middleware in react 😐😑

0

23.05.2021

Adi Автор вопроса

Masoud
NOOOO I mean the routes middleware in react 😐😑

if I am not calling API and route is protected how will you handle it?

0

23.05.2021

Adi
if I am not calling API and route is protected how...

2 modes will happen : 1- you load page directly go to for example contact us in this case you should get user data from api 2- you already got data from other routes in this case you have data abd does not need to call api

0

23.05.2021

Masoud · Accepted Answer