"Nuxt" receives data about the user, but does not pass through "auth" middleware - authentication

Nuxt Auth, Laravel Sanctum.
When the login button is pressed, all requests receive user data.
Locally it works fine. But when working on the server, it is not
possible to log in. As if stuck between two middleware)
Result of page refresh

Related

MSAL + SvelteKit route protection

I have an application with SvelteKit + MSAL, my authentication page works fine, and authenticate all users without error. My login button is on my main page (http://localhost:3000). The authentication with MSAL works fine, after the authentication, its redirected to the page (http://localhost:3000/home).
I logged out from all my accounts in my browser, and when I tried to access my home page, through http://localhost:3000/home, I could access it without any authentication. I though that could be some error with cache, then I went to another PC, and did the same test and I was able to reach my home page without authentication. I looked for route protection with MSAL, but I couldn't find anything related with MSAL.Not sure if I missed something or any settings on my MSAL.js. I am using MSAL-browser. I want the user to be authenticated in all my routes.
export async function protectedRoute() {
let name = msalInstance.getAccountByHomeId.length;
if (name == 0) {
goto("/");
}
}
This is the code I have tried to use but it didn't work, I was trying to get the lenght of my users logged in, and if it was zero to redirect to the login page. I tried to use the same logic to get the name but its not showing the name of the users on my MSAL instance.
Thanks

Is there a way for a SPA to check if there's a proxy and handling it properly?

We have developped a SPA SaaS and went to a soft production launch recently.
Everything was fine until one of our customers told us they had trouble using the app.
Once they open the app, the first request to our backend triggers their proxy credential prompt. Hopefully on the login request.
They have to enter their proxy credentials to let the request go. All subsequent requests are passing properly and they can use the app.
The problem is:
When they stop using the app, close the browser and then come back the day after, the persistent login tries to connect them to our backend, but the proxy credentials prompt is not triggered and the request fails. All subsquent requests fail also.
For it work again, they have to delete all app data in chrome (so the service worker is unregistered, the localstorage and cache are cleared). The next api call will trigger their proxy credentials prompt and they will be able to work again.
So is there any way for the app to know if the proxy is set or not ? Any way of triggering the proxy prompt if not set or whatever ?
I don't exactly know how those proxies work and we have zero access to the proxy settings.
It surely is something with the credentials expiration after some time but that's all we can figure out right now. Maybe we could monitor some params in the request headers ?
We are using VueJS with axios for the requests.
My guess is when user session credentials get expired, your UI is not handling redirection to login page. When the user login for the first time you should store that the user has logged in successfully in browser localstorage. If your server returns 401 error code, you can delete the flag and redirect the user to login page. You can achieve that using meta fields in router.
Check out this link on how to use meta fields https://router.vuejs.org/guide/advanced/meta.html

auth0 still auto-logs in seamlessly even after calling /logout url

Simple problem, I want to login and out of an app with various users to check different app functionality. App is using Auth0 for user management.
I am calling the /v2/logout url as a part of my flow.
But somehow, after logging out, when I login again the seamless SSO behavior runs and I'm immediately logged in again with no prompts -- it's as if the logout URL was never called.
Only way to get a login prompt again, is to clear my browser cache. Is there an auth0 cookie somewhere I need to delete as well? Or am I missing something? I'm reading the seamless SSO docs but don't see anything beyond calling /v2/logout.
Calling the Auth0 /v2/logout API endpoint will log the user out of Auth0 and optionally the IdP (if you specify federated parameter). It will not log out the user from your Application so you will need to implement that in your application.
Here in the Javascript SPA example, in the setSession() we are storing the Access token(along with its expiry) and the ID token in localStorage. In the logout() function we are then removing these entries. This is logging out from the Application user session. You can optionally redirect to /v2/logout to clear the Auth0 and IdP session as well in this function. That way, when you are checking if user is authenticated, the isAuthenticated() returns false and we force the user log in again.
So turns out, the issue is around redirecting the user as opposed to calling the logout url directly. I was using a separate ajax api call to the logout url. However when I use window.location.replace(logoutUrl), the logout actually happens.
From the auth0 docs:
To force a logout, redirect the user to the following URL:
https://YOUR_AUTH0_DOMAIN/v2/logout
Redirecting the user to this URL clears all single sign-on cookies set by Auth0 for the user.
So a separate call doesn't work -- have to redirect. Which I suppose makes sense -- a separate ajax call doesn't have the user session context.

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 can I use HandleErrorAttribute to execute action retry logic?

I want to extend HandleErrorAttribute to globally handle a custom error type in my project. This what I was envisioning
Page user makes a request to pull a report from the site
The site (mvc project) needs to talk to a web api using an auth token
The api returns 401 with a body that contains an app code indicated it was because the token has expired
The site sees this and throws a TokenRefreshException
The site handles this globally by retrieving the refresh token from the session and using it to update the user's tokens, save it back to the session and then reattempt the action.
If it isn't able to refresh the token, it kills the session and redirects the user to the login page.
Is this possible and how do I implement this logic without creating an infinite loop (I'm not sure how to keep count)?