RTK Query prevent disk cache for Auth - authentication

I am using RTK Query for a project
as you see in the image, the auth endpoint in served from the disk cache,
because of it when i logout and comeback to a protected page it is accessible
What need to be done to fix this ?

Related

where to handle authorization for a seperate backend and frontend?

I have a sveltekit client and a seperated backend (spring-boot) and I am unsure how to manage the session and where authorization should happen.
When you route to any protected page the backend authorize the client by looking for a cookie but this means that there is a split second, during the request, where the user is on a loading page before getting a response from the server.
I would like that this happens serverside so you don't get that flash of the page loading, which is possible if I do the authorization serverside in svelte but then I am making two trips to two different servers each time im rendering a protected page? Is that approach reasonable?

Server-side route guard middleware using the store (persisting the store in Nuxt SSR)

I'm trying to implement authentication in a Nuxt app using the Vuex store, and I hit a snag. Here's how I do it:
A middleware acting as route guard reads the value of an isAuthenticated in context.store to decide whether or not to redirect to login page. Upon completing login, the login page component mutates the store turning isAuthenticated to true before redirecting the user to their intended page.
Problem is, by the time user has completed login and is being redirected, the middleware still reads isAuthenticated as false. I'm guessing since the middleware is an SSR one its store isn't synced with the client's yet.
Looks like I need to do any (combination) of the following:
Sync the client's and server's store somehow.
Persist Vuex on SSR using a plugin or by writing my own persistence plugin.
Ditch Vuex as authentication mechanism entirely and come up with something else.
How do I work around this?

Does Nuxt Auth Module use serverMiddleware or client one?

I want to understand whether nuxt-auth uses serverMiddleware and if not how can i implement one. I want to make my admin panel really secured, I have my backend secured however even if someone manages to overcome auth middleware on the frontend, which won't be that difficult(if auth Module uses client-side middlewares), I don't want nuxt to provide him/her with the layout and all pages even though I know that he/she is not going to be able to do anything because my routes on the backed require token verification and account data. If you can, please provide some info on the subject. Thanks!!!
So in short you cannot use the middleware provided by the #nuxtjs/auth plugin as a serverMiddleware, you can only use it as a normal middleware.
But that doesn't mean that it's insecure, normal middlewares actually executes both on server and client side before the page is rendered, so if you want to execute a middleware that will throw a 404 if the user isn't logged in you can do this in a normal middleware too, the serverMiddleware's capabilities are actually limited, you can't access nor the store or any client side information, because you only get (req,res, next) as parameters, and since Authentication is stored in store and cookies you can't make it work in Node.js only. This is a good example of what you can use serverMiddleware for: https://jackwhiting.co.uk/posts/handling-redirects-in-nuxtjs-through-middlware/
If you console.log something in normal middleware you should be able to see it both in your developer console and bash where npm run dev is running, this would mean that first the server executes it and then the client side too.

Handle authentication in a Service Worker for a React App

I have a React app rendering client-side, in which I handle authentication the following way:
Upon loading, the app fires an AJAX request to the backend, basically asking whether the user's session is valid ;
It updates the app's state with the server's response ;
It renders the "/" route accordingly (the homepage if the session is invalid, a dashboard if it is valid).
(Maybe there are better solutions for handling this in front-end applications, I'm all ears if you have ideas)
This works pretty well, but introducing Service Workers into the mix and trying to turn the app into an offline-first progressive web app seems... complicated.
On the one hand, if I don't cache the "Am I logged in ?" request and the app is offline, the app will always render the homepage.
On the other hand, if I do cache the AJAX request, the users will eventually be shown an empty dashboard because their sessions will have expired and the server will be throwing 403s.
Is there a way to handle this effectively?
I solved my problem by taking a different approach: I now persist the state in localStorage.
This way, when the user arrives on the app, he is presented with stale data from his last visit. Meanwhile, a "Am I logged in?" request is fired in the background.
If it is succesful and returns true, the other AJAX requests get fired and fill the app with fresh data ;
If it is successful and returns false, the state is updated accordingly and the user redirected to the homepage ;
If the request is unsuccessful (i.e. the app is offline) the app keeps showing stale data from last session in the dashboard. We don't know if the user's session is still valid, but we can't retreive any data so it does not matter.
One way of doing it is adding a /verifyToken (assuming you are using some kind of token to validate the session) in your back-end api to check if the token is valid.
So you cache your session token. If the app is offline it shows the dashboard.
If the app is online, you fire a request to /verifyToken to check is the session is still valid. If it is then you continue to dashboard. If it isn't you redirect them back to homepage (or the sign in page).
Edit:
When your app is online, you can technically fire a request to any authorized route and check if the response was 403 (in case you can't modify the backend). If it is then you can send them back to sign in page.

How to add simple passport or basic auth to hapi

I need some help, trying to create a simple application which will
display a public login page and upon authentication only will redirect to index.html page..
I thought this should be pretty straight forward, have done a first step, but adding the Auth/ Passport plugin and redirects are not working..
Below is the example
https://github.com/makrand-bkar/hapi-simple-auth-tutorial
Any help very much appreciated, kind of stalled here
Mak
What you're looking for is the hapi auth tutorial: http://hapijs.com/tutorials/auth
I forked your github repo to see what you were doing, but it looks like right now you have no auth related code preset in there. Essentially what you need to do is this:
Create a registration view that stores users in a database system like Postgres or MongoDB.
Hash user passwords.
Get setup with CSRF to prevent cross-site forgery requests.
Build a login view that checks the database for the user / password hash to validate credentials.
Use a session system (like with cookies) to persist user state.
Build helper stuff to load users from cookies.
Write helper stuff to check for users before allowing access to protected pages.
Now, this is obviously quite annoying to write all this yourself.
Luckily, hapi has some plugins which help with this sort of thing, namely: https://github.com/Mkoopajr/hapi-session-mongo
Hope that helps!