I'm currently working on trying to SSR a page with NextJS and change the links on a component based on the presence of a http-only cookie. I've got it working to find the cookie and pass a prop based on that cookie, but the data is not rehydrating after either addition or removal of that cookie. More specifically:
If you initially land on the page with cookie present it creates the page correctly. If you then remove the cookie and reload the data still acts like the cookie is present.
Vice versa
here is what i'm using to pass the prop:
return {
props: {
seo: { seo: seo },
navData: navItems,
footerData: footerItems.data.navItem || [],
footerCallout: footerCallout.data.footerCallout,
hero: content.heroSection,
customer: ctx.req.cookies.token ? true : false,
customer_id: ctx.req.cookies.token || '',
},
}
I'm also using a useEffect and useState to try and trigger rehydration:
const [isCustomer, setIsCustomer] = useState(customer)
useEffect(() => {
console.log(`customer is ${customer}`)
setIsCustomer(customer)
}, [customer])
One other bit of info, i'm deploying with Netlify, and when i locally use netlify dev and spin up a server everything works. The second it gets deployed on netlify is when i get the above behavior.
I'm not sure what exactly is going on, and it may just be a lack of understanding of Next and SSR. Any help would be greatly appreciated. i've been beating my head against the wall on this for a while.
Related
I am using 'hapi-bell' for OAuth intergration with via Azure IDaaS
& 'hap-auth-cookie' for cookie session management.
I have to set 2 cookies because of the size constraint.
since 'hapi-auth-cookie allows' to set only one cookie
server.auth.strategy(known, 'cookie', {
password: sessionCookiePassword,
redirectTo: `/${oauthRedirectPath}`,
isSecure: sessionIsSecure,
isSameSite: 'Lax',
clearInvalid: true,
appendNext: true,
isHttpOnly: false,
ttl: sessionSeconds * 1000
})
request.cookieAuth.set(cookie1);
So I have set the other cookie as below
server.state('cookie2', {
isSecure: sessionIsSecure,
isSameSite: 'Strict',
clearInvalid: true,
isHttpOnly: false,
ttl: sessionSeconds * 1000,
strictHeader: false
});
return reply.redirect(nextPath).state('cookie2', Cookie2);
Issue:
on random occurance cookie2 is not being set to less than 2% of the user
I couldn't recreate this issue locally
Tried:
1.Redirected from another origin
window.location.assign("https://appurl")
window.location.assign("https://appurl/resource")
2.Embed the app url https://appurl in another webpage, click & navigate.
Could anyone help me to understand why this problem occurs ?
Is it possible to skip logging in to twitter by setting cookies?
I tried to copy an paste what I got from "document.cookie" in web console but that gave me the error Invalid parameters name: string value expected
await page.setCookie({
personalization_id: "v1_VDBAhQo+RMCSceKUBXfs3w==",
guest_id: "v1%3A150575165219105300",
ct0: "d9343a3b062832b6ec23a84747e518b3",
_gat: "1m",
ads_prefs: "HBERAAA=",
remember_checked_on: 1,
twid: "u=908918507005456384",
lang: "en",
tip_nightmode: true,
_ga: "GA1.2.1275876041.1505751657",
_gid: "GA1.2.1311587009.1505751657"
})
The correct syntax for setCookie is not what you used, it's:
setCookie(cookie1, cookie2, ...)
where cookie is an object containing name and value keys, like
setCookie({name: 'lang', value: 'en'})
Remember to set the cookies before loading Twitter, or to reload the page after setting them, and everything should work.
async function addCookies(cookies_str, page, domain){
let cookies = cookies_str.split(';').map(pair=>{
let name = pair.trim().slice(0,pair.trim().indexOf('='))
let value = pair.trim().slice(pair.trim().indexOf('=')+1)
return {name,value,domain}
});
await Promise.all(cookies.map((pair)=>{
return page.setCookie(pair);
}))
}
this is my way to add cookies, cookies_str was copied from browser;
I am trying to set a cookie on an HTML page
func testCookie(c *gin.Context) {
c.SetCookie("test1", "testvalue", 10, "/", "", true, true)
c.HTML(200, "dashboard", gin.H{
"title": "Dashboard",
}
}
This should have set the cookie on the HTML page but it doesn't.
My server is running to serve https requests. I am not sure why I am not able to set cookies here. I am using google-chrome and ideally I should have been able to see the cookie there.
The issue is with your maxAge input. Your current code instructs the browser to delete your cookie in 10 seconds.
Gin is wrapping http.SetCookie and creating a http.Cookie for you. To better understand what is happening you should read through those two links.
MaxAge=0 means no 'Max-Age' attribute specified.
MaxAge<0 means delete cookie now, equivalently 'Max-Age: 0'
MaxAge>0 means Max-Age attribute present and given in seconds
I am trying to create a way for my users to have a "remember me" option when they log in. However as it stands, no matter what I try, when I view the cookie in my browser, it just shows Expires: At end of session. So once I close my browser and come back to my page, I am logged out.
In my settings.py I have set
SESSION_EXPIRE_AT_BROWSER_CLOSE = False
SESSION_COOKIE_AGE = 10000000
Which I assume are what I need to do...
On the front-end (which is in AngularJS) I have the following for the cookie storage:
$http.post('http://localhost:8000/auth/login/', {email: this.login['arguments'][0]['email'], password: this.login['arguments'][0]['password']})
.success(function(response){
if (response.token){
$cookieStore.put('djangotoken', response.token);
$http.defaults.headers.common['Authorization'] = 'Token ' + response.token;
}
})
.error(function(data, status, headers, config){
$cookieStore.remove('djangotoken');
});
If someone could show me how to get my cookies to just stay for the designated age I set that would be greatly appreciated!
You're setting the cookie directly from Angular, so it has nothing to do with the Django session cookie age. You need to pass the expiration time when you set the cookie.
Unfortunately, the built-in Angular cookieStore api is unnecessarily restrictive and does not support this. It looks like a good alternative is angular-cookie.
I have both a Django app and a Angular JS app hosted at different end-points. Obviously in order for XHR requests to work I need to set the csrf token within Angular, which is easy enough to do when Angular is served by Django, but not so much when independent.
Here is my code so far:
angular.module('App', [
'ngCookies',
])
.run(['$rootScope', '$http', '$cookies',
function($rootScope, $http, $cookies){
// Set the CSRF header token to match Django
$http.defaults.headers.post['X-CSRFToken'] = $cookies['csrftoken'];
// Bootstrap
$http.get('http://127.0.0.1:8000/test/').success(function(resp){
console.log($cookies['csrftoken']);
});
}
])
It seems that $cookies['csrftoken'] is always undefined, and I assume I have to retrieve this somehow but can't find any resources as to how this process works.
Can anyone point me in the right direction?
Cookies are only accessible on the same origin, so accessing from another domain won't share the CSRF Token through cookies, you're going to have to find another way to introduce the cookie (such as with Django's template tag).
Second, your example looks likes its trying to read a Cookie from the $http.get() call. The $cookie service collects Cookies from when the document is loaded (stored document.cookie) and the resulting cookies are not accessible from Ajax/XHR calls cross-domain.
You can use this:
app = angular.module("App", []);
app.run(function($http) {
$http.defaults.headers.post['X-CSRFToken'] = $.cookie('csrftoken');
});
where $.cookie comes from jQuery Cookie plugin.