I am doing a project in react right now. I want to figure out a way where i could logout the user out by removing all of the session cookies in my react app.
But i do not know a solution for it. Is it possible to remove all of the cookies at the same time?
This is not related to React in any way, just JavaScript.
You can delete all cookies by executing:
document.cookie = '';
BUT this only works for cookies available on the client side (so not ones that are HttpOnly). It's very uncommon that session cookies from an authentication server are accessible client side, for security reasons.
In this case: you can't directly, but you need to implement a request to a logout endpoint (if any).
Related
Let's imagine a client opens your nuxt.js website on the index page. From there, they authenticate (you used #nuxtjs/auth-next for that purpose). Then they move to a secure page that only authenticated users can see. This secure page is a .vue file in your "pages" folder with middleware: ["auth"].
Now, how is this page really secure ?
I mean, couldn't a malicious user temper with the page and access it without being authenticated anyway ? Because the "security" in this scenario is only implemented on the client side right ? [Edit]
Your application being an SPA at the end, if you want to bypass a middleware with it's security checkup, you could disable the JS on the page. But then, since no content is generated directly, you won't see anything because it's not here (as a static file).
If your app is isomorphic (basically has a ssr: true), the auth module will still disable the access to those pages (you can double check).
At the end, the critical info is received when:
you do have a valid JWT token (after some login)
you submit an HTTP query to the backend
the backend acknowledges it and the token is valid
the backend gives you the sensitive info via an HTTP response
At the end, your client side code doesn't need to be secure. If somebody somehow hacks your client side state and reaches the sensitive page, he will still not have a valid JWT token since the verification still happens on the backend.
The one that can be generated only when sending the proper credentials to the backend and having the backend validating those.
Now, how is this page really secure ?
The protected content is served from a request if a valid access token has been provided by the client.
The protected content is provided at runtime.
Because the "security" in this scenario is only implemented on the client side right ?
The security is not only implemented on the client side.
The premise is: The access token has been obtained securely through an authentication flow with an auth-server.
I recommend to read more about auth flows if this sounds unclear.
Auth0 has some good documentation on different flows.
https://auth0.com/docs/authorization/flows
Then, what is the best way to show a complex page to authenticated users only ?
The content is provided at run-time. Server-side or client-side.
There are some setup guides here for Nuxt.
Here is the first (Auth0) I found from the list.
https://auth.nuxtjs.org/providers/auth0
I don't know how updated those guides are, but the auth service providers tend to have updated guides themselves.
There is a sensitive page in my website, so I want to authenticate visitors before they opening a link like: www.examples.com/builder.
I know if I use cookie based authentication everything will be simple, as the browser will send the credential message in cookies automatically. But in my situation, I have to use token based authentication. Browser don't send token if there is no pre-load script.
So my question is how to achieve token based authentication when someone open a sensitive page directly.
As far as I can understand,
you're looking for a way to avoid double roundtrips to send authentication headers to your web-service.
If I am correct, then this would only be possible via service worker which is a not widely supported feature. https://developers.google.com/web/fundamentals/primers/service-workers/
If, depending on your requirements, you can't go for service workers, then, the only left option is to use cookies.
I normally have a secondary authentication flow which uses cookies allowing a web service to authenticate a user on its first get request (the one made by the browser).
There are also some spa framework which implement routing resolvers but this will require a double roundtrip (1. load javascript, 2. send the token).
So, I am starting to build a fully universal/isomorphic React/Redux project. Login state is maintained via JWTs.
The client accesses the JWT via localStorage, but I also want to set an httpOnly cookie that contains the JWT, so that the server can see it and render pages appropriately.
What's the best way to set and access httpOnly cookies with Redux actions? It's relatively easy with express, but I want to wrap these things inside redux actions and share a common store between the server/client, so I am at a bit of a loss.
I did see redux-effects-cookie, has anyone used this?
Currently, my authentication flow is as follows:
User fills in a login form in the client browser app (AngularJS, to be precise), username and password are stored into the browser's memory (plain Javascript variables).
When accessing protected API resources, the request is authenticated with HTTP Basic Auth over SSL using the credentials stored in memory.
The problem is, when the user refreshes the page, her credentials are wiped out and she needs to sign in again. Am I missing something obvious here?
Few solutions I've found so far:
Store username and password into a cookie: this seems obviously insecure, even when using secure cookies and/or encryption.
Use session cookies: this seems to be against the RESTful principle of statelessness.
(I guess OAuth has the same problem with securely storing access tokens in the client?)
Session cookies are totally fine here. Once installed you dont care of them, browser will send them with each request via headers.
Inspired by this answer, I ended up doing something like this (link opens a rather large picture).
In short, client stores Access Token in a javascript variable, but Refresh Tokens are stored in a server-side session (on the server hosting our client app, not on the API server).
I want to logout my web App in browser when click the logout button.And want to implement it just with js code.So,there's no logout servlet. That means,i need to delete the sessionid which is used now and stored in browser memory,but how can I do the same?
All your session cookies should be httpOnly for security reasons. This would ensure the cookies are not accessible in javascript and would reduce the risk in case of XSS attach. Which also means that the cookie cannot be just cleared at client side.
When the user clicks logout, you may be interested in clearing the server side resources. At least for that you should be hitting the server.
With the above being said. I would recommend you make an AJAX call to your servlet and which can clear your cookie as well as free up server side resources allocated for that session.
If you are still not convinced and have to clear the cookie using javascript please refer to SO question delete cookies using javascript