I am using the js-cookie package to store and handle cookies in my react app. The cookie is set when the user first logs in and is visible in the Applications tab in the browser. I created a service that adds new products to the database, the cookie stores the jwt token which is then passed to the backend for verification before the user does anything. the Cookies.get() method always returns undefined within this service.
Here the code for the service
import axios from 'axios'
import Cookies from "js-cookie";
import { ProductTypes } from '../domain/entities/Product';
import { addProductResponse, getProductResponse } from '../domain/responses/productResponse';
const token = Cookies.get("authToken");
const instance = axios.create({
baseURL: 'http://localhost:8000/',
headers: {
"Content-type": "application/json",
"Authorization":`Bearer ${token}`
},
});
export const addProduct = async(formValues:ProductTypes):Promise<addProductResponse>=>{
console.log("token from react",token);
return await instance.post(`/products/create-product`,formValues).then(
(response:addProductResponse) => response)
}
This is how it is being set
const setToken = (authToken: string) => {
Cookies.set("authToken", authToken, {
expires: new Date(Date.now() + 15 * 60 * 1000),
secure: true,
});
};
Can someone kindly point out to me what i may doing wrong?
PS: It is a Typescript application
Actually, you are adding secure: true parameter in Cookies.set function and calling baseURL: 'http://localhost:8000/' without HTTPS protocol, that's the reason. So, you just need to set secure: false
The Secure attribute limits the scope of the cookie to "secure" channels (where "secure" is defined by the user agent). When a cookie has the Secure attribute, the user agent will include the cookie in an HTTP request only if the request is transmitted over a secure channel (typically HTTP over Transport Layer Security (TLS) [RFC2818]).
Related
Front-End: [Axios]
const formSubmit = async (e) => {
e.preventDefault()
const formData = new FormData(e.target)
const email = formData.get('email')
const password = formData.get('password')
try {
const res = await axios.post('http://172.16.2.19:3001/api/v1/auth/login', {
email,
password,
})
console.log(res.data) // its okay, I can login if email & password are correct.
} catch (error) {
console.log(error)
}
}
Back-End [Nodejs ExpressJs]:
Inside App.js:
const cors = require('cors')
app.use(cors({ credentials: true }))
Inside Login.js (/auth/login endpoint):
// ... code, then... if email & password are correct:
// 3600000ms = 1hour
res.cookie('jwt', token, { httpOnly: true, expires: new Date(Date.now() + 3600000 })
res.status(200).json({
status: 'success'
token,
data: userDoc,
})
Then, when I login in my browser:
I can login successfully, but no cookies will be created, see:
The front-end http service (react app) is running on http://172.16.2.19:3000
The back-end http service (expressjs) is running on http://172.16.2.19:3001
The axios requests I'm sending from the front-end are requesting: http://172.16.2.19:3001
So what's the problem?
The problem that no cookies are getting created in the browser is preventing me from continuing to design the front-end application, because if I wanted to request anything from my API, I have to be authenticated, all the routes on the API I made are protected, so if I wanted to request anything from the API, I will have to send my jwt token along with the request.
edit **:
here's the response from the /auth/login endpoint after successfully logging in:
I am using brave browser, the latest version.
I tried this on firefox, it has the same behavior.
GUYS GUYS GUYS I found it!!!! after 3 hours of researching, let me save your time:
For anyone having the same problem, all you have to do is
change your backend code from:
const cors = require('cors')
app.use(cors({ credentials: true }))
to
app.use(cors({ credentials: true, origin: true }))
and make sure you're using withCredentials: true on the front-end with every request (the login POST method and all the other requests that requires authentication)
why?
setting origin property to true is going to reflect the request origin, the origin property can be a string if you wanted to specify a particular domain, ex: http://localhost:3000. But if you have more than one client, setting this to true is a wise choise.
and for those of you wondering about mobile devices in case of specifying a string for the origin field with one particular domain. This problem of cors only happens in browsers, any other client doesn't use that CORS policy.
I would check by passing {withCredentials: true} as the third argument to the axios method to allow the browser to set the cookie via the request.
I don't think it is correct to use the backend to save cookies, as cookies is a browser feature separate from the database. I might be wrong though. When the post is successful, res will return a token. You save this token in the browser's local storage.
const formSubmit = async (e) => {
e.preventDefault()
const formData = new FormData(e.target)
const email = formData.get('email')
const password = formData.get('password')
try {
const res = await axios.post('http://172.16.2.19:3001/api/v1/auth/login', {
email,
password,
})
//browsers local storage
localStorage.setItem('access_token',res.data.access);
localStorage.setItem('refresh_token',res.data.refresh);
console.log(res.data) // its okay, I can login if email & password are correct.
}
You will then have to create an authorization header as such
headers:{
Authorization: localStorage.getItem('access_token')
? 'JWT '+localStorage.getItem('access_token')
: null
}
I currently have a application with Laravel + Sanctum + Vue SPA + Apollo GraphQL.
I'm trying to make a session expire just like in a normal Laravel application but i can't achieve this.
First I make a request to trigger the csrf-cookie of Sanctum on frontend:
await fetch(`${process.env.VUE_APP_API_HTTP}/api/csrf-cookie`, {
credentials: 'include'
})
It generates 2 cookies on browser:
XSRF-COOKIE and laravel_session
On login I use apollo and store the auth-token after make a login request:
const data = await apolloClient.mutate({
mutation: Login,
variables: credentials
})
const token = data.data.login.token
await onLogin(apolloClient, token)
export async function onLogin (apolloClient, token) {
if (typeof localStorage !== 'undefined' && token) {
localStorage.setItem(AUTH_TOKEN_NAME, token)
}
....
So i pass the token and cookie to apolloClient link prop, but i'm not sure if it is needed to pass the XSRF-TOKEN.
const authLink = setContext(async (_, { headers }) => {
const token = localStorage.getItem(AUTH_TOKEN_NAME)
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : '',
'XSRF-TOKEN': Cookie.get('XSRF-TOKEN'),
}
}
})
Here is the problem: The login session never expires, even with the cookie laravel_session, i already tried to pass laravel_session as a header on my link connection but it doesn't seems to work.
My Laravel session.php is set 'expire_on_close' => true to be sure i can test it i close the browser and re-open, also i'm sure the cookie is set to expire on close because it says on browser cookies info.
Any idea how can i make the laravel session work on a SPA?
If you are using cookies to manage the session, your .env file should look like this:
SESSION_DRIVER=cookie
You can also define the session lifetime below
SESSION_LIFETIME=120
Suggestion: set lifetime to 1 minute, do a login and wait to see if it expires. Let me know!
I have an accessToken in my redux store. I am creating a axios client like this:
import axios from 'axios';
import store from '../redux/store';
const apiClient = axios.create({
baseURL: 'http://localhost:5002/api/',
headers: {
Authorization:`Bearer ${store.getState().auth.accessToken}` // ???
}
});
apiClient.defaults.headers.common['Authorization'] = `Bearer ${store.getState().auth.accessToken}`; // ???
export default apiClient;
I want every request that is sent by the apiClient to contain the current value of the accessToken from the redux store (at the time the request is sent). And with the lines that are marked with ???, I'm not sure whether the Authorization header is only set once when the apiClient is created, or whether the value of the header also changes when the accessToken in the store has been updated.
Later I want to make a request like this:
apiClient.get<User[]>('Users/Friends');
And I want the request to include the accessToken that is in the store at the time the request is sent not at the time the client is created. Is there a way to achieve this while the creation of the client or do I always have to put the Authorization header config with the current accessToken in every request?
Now I added this code:
const apiClient = axios.create({
baseURL: 'http://192.168.178.188:5002/api/'
});
apiClient.interceptors.request.use(config => {
config.headers['Authorization'] = `Bearer ${store.getState().auth.accessToken}`
return config;
});
Is this the most elegant solution?
So here's my problem. I have a dasboard page and i have programs page. The problem is on the programs page where i have SSR, because on dashboard page i call my saga on client-side and everything works like it should work.
Client side: The client sends the httpOnly cookie to my backend server and data is fetched from my backend for the use.
Server side: However for some reason when i call the same saga inside getServerSideProps of course {withCredentials: true} it doesn't send the token to my backend for some reason. Inside the req object i get from getServerSideProps inside req.headers.cookie i see the cookie, but it doesn't send it. So what's the solution to manually add it when calling it form getServerSideProps or?
The code:
export const getServerSideProps = wrapper.getServerSideProps(
async ({ store, req }) => {
store.dispatch(fetchprogramsRequest(req.url));
const cookies = cookie.parse(req.headers.cookie);
console.log('COOKIES', cookies); // HERE you can see the cookies
// end the saga
store.dispatch(END);
await store.sagaTask.toPromise();
}
);
The axios inside the saga:
const res = yield axios.get(url, { withCredentials: true });
This is called in both cases (client-side: works, server-side: doesn't)
I believe the cookie is stored on the client side (browser).
May be this can work, as long as you can make the cookie reach the saga.
// The axios inside the saga:
const res = yield axios.get(url, {
headers: {
Cookie: "cookie1=value; cookie2=value; cookie3=value;"
});
Another option, if you are using an access token is sending it like using an authorization header.
const res = await axios.get(url, {
headers: { Authorization: `Bearer ${token}` },
});
I'm setting up a Vue app with Koa as the backend. I've implemented a simple login system, using koa-session for sessions. This is all fine when I access the server directly (actually navigating to my server port and performing a request), but when I use fetch to access the data from my front end port, it does not recall each fetch as the same session and creates a new session each time. This is problematic because it doesn't detect the user as being logged in. What ends up happening is that a new session key is created each time I access the API, even without refreshing the page.
Here is my Koa-session config file:
import Koa from "koa";
import session from "koa-session";
import { getCookie } from "../actions/getCookie";
import { setCookie } from "../actions/setCookie";
import { destroyCookie } from "../actions/destroyCookie";
export const config: Readonly<Partial<session.opts>> = {
store: {
get: getCookie,
set: setCookie,
destroy: destroyCookie
},
key: "api:sess",
maxAge: 86400000,
httpOnly: true,
renew: true,
signed: false
};
export const useSession = (app: Koa) => session(config, app);```
Turns out it was with my fetch. I had credentials: "same-origin" instead of credentials: "include" and it messed everything up.