I'm having trouble understanding how session cookies work. I have an Adonisjs Api and a React app.
In my login / Register components, I fetch the data with post request and credentials set to true. Everything work fine and the adonis-session cookie is set in the browser.
But, after that, I want to be redirected to the homepage and fetch users' posts but I get 401 unauthorized response.
Can someone help me understand what I need to do? How can I check if the user is logged in with this adonis-session token? Use the context API?
Related
I have a React site trying to get access token from my Laravel oAuth portal (using Passport). As I understand from the documentation, I create the state,code challenge and code verifier on my react app. I create a url with the required parameters and make a redirection to /oauth/authorize. The complete code for the redirection is window.location.replace('http://portal.test/oauth/authorize?' + paramsStr). http://portal.test is my oAuth portal (using Valet) and paramsStr contains all my parameters: client_id, redirect_uri, response_type, scope, state, code_verifier, code_challenge, code_challenge_method.
I am redirected to the portal as I should which redirects me to the login form. Once logged in, I have to approve the authorization request. After that step, I am supposed to be redirected to my React app to verify the state parameter and then make a POST request to my oAuth portal to request an access token. (again, from the documentation)
The url in my browser is still http://portal.test/login (the oAuth portal url) where it should be http://auth.localhost:3006 (the React app). I do have kind of a popup that opens, showing the content of the React app but I have a problem with my cookies. In the first step, after creating the state,code challenge and code verifier, I store those (using react-cookie). If I check the cookies right after, I can see them. If I go to another page of my React app, I can see them. If I manually go to another url (like google for example) and then go back to my React app, I can see them. So I know that setting the cookies does work. But in that weird popup I can't access the cookies.
I guess that a redirection issue and I can't access them because the url in the browser in not the url of my React app. How can I fix that ?
Relevant code for the login
const [cookies,setCookie,removeCookie] = useCookies([]);
setCookie('code_challenge',code_challenge);
setCookie('code_verifier',code_verifier);
setCookie('state',state);
console.log(cookies); // this shows the 3 values
window.location.replace('http://portal.test/oauth/authorize?' + paramsStr;
Page I am redirected to within React app
const [cookies,setCookie,removeCookie] = useCookies(["foo"]);
console.log(cookies); // empty
In the url to /oauth/authorize the parameter redirect_uri is http://auth.localhost:3006. In the DB in the oauth_clients table, the redirect value is the same.
Is there a way to use react-query to store global state for user, if user is logged in or not?
Right not currently I am only storing cookie as bearer token and refresh token
And I am forcing react query to hit an API endpoint that checks if user has valid bearer token
So right now its making unnecessary requests and getting failed error response if use is not logged in.
What can I do to store user info when user is logged in, so that I don't have to make unnecessary requests to /verify endpoint?
There are several options to do it. But most common are:
Keep auth data in localStorage and before API call check if the authToken is not expired.
Keep auth data in the cookie and do the same
This will help you to avoid unnecessary requests and you will be able to make requests even after page reload/closing the browser tab
I am working on my first React application which consumes a REST API. Certain information within the API isn't accessible unless authorized by logging in, and the API returns an HTTPOnly cookie as a response upon a successful POST request to the login endpoint; I'm using axios, to accomplish this. It's possible to view the cookie within the network tab of the browser and it also successfully logged to the console, but I'm unsure of how I can actually store the information returned from the API within my react app. The cookie vanishes from the browser when I leave the page after logging in. Is there a way I can implement this cookie into the React App's memory/state so it can be sent and used upon future requests in the application? I've scoured for a few days and seen various methods to access a returned JWT, but most of them include using LocalStorage which isn't secure or are from deprecated tutorials many years ago. After logging in, the JWT returned from the API will need to be sent back upon future requests, which will also be made using axios.
All help is much appreciated.
You can configure the expiry of the HttpOnly cookie. It sounds like your server is currently storing the JWTs in HttpOnly session cookies. If you are using Chrome, you can confirm this by looking at the "Expires / Max-Age" column in the Application tab. If it is a session cookie, the field will be unspecified, and the cookie disappears once you end your browsing session. If you set the expiry of the HttpOnly cookie to say a year, then the cookie persists across browsing sessions.
I have a website that runs on example.com. The website makes AJAX calls to my backend API which sits at api.example.com.
I employ a double-submit verification strategy for my authentication.
The backend has protected endpoints which check the JWT token with each request. The JWT token is stored in a httpOnly cookie. It also contains the CSRF token.
Alongside the JWT cookie I also send a CSRF cookie which is not httpOnly.
Each request that the client makes must contain the value of this cookie in a special header.
So far so good, but, I want to make sure that the client does everything in its power to prevent users from making pointless unauthenticated requests. So in my React app I have declared a few private routes which check if the user is logged in and if they are not, the user is redirected to the login page. The logged-in state is kept in the Redux store.
The issue is that on a full refresh the Redux store is reset. So as I see it, my options are:
Option 1) Check the existence of a CSRF cookie
The way I check if a user is authenticated is by checking if they have the CSRF cookie; I also do this during the store initialisation. If they do have the cookie, they are allowed to navigate to the protected page. All subsequent requests on this page are still verified on the backend for a JWT and CSRF token.
Option 2) Check against the backend each time
I can create a simple endpoint on the backend that is used to check if the user is logged in. So instead of just checking the cookie, the client can submit a request to this endpoint and verify that the token in the cookie is still valid.
Option 3) Persist the Redux store
I could implement a persisted store (there are some libraries that do this out there) so that the initial problem is automatically resolved, i.e.: the logged-in state is preserved upon full refresh. However, this yields a bunch of issues with caching and token expiration and it may not be worth the effort.
If a search engine robot tries to access one of my pages that needs to be logged in, does the Auth Component returns a 401 HTTP status or just do a redirect without "telling" the robot that it can't access that page?
You could use postman and do a simple test if you wish to. Anyway this is what I got when I tried to access a non authorized page