Frappe as backend - Cannot set cookies

Scenario

I’m using Frappe as Headless CMS and using React as a frontend.

Frappe Backend will be locate on ‘https://v13.testing.apps
React Frontend will be locate on ‘https://fe.testing.apps

Problems

I can’t get frontend to register cookies on the domain with out specify the domain name on cookies such as this.

Set-Cookie: sid=0347dfc3cdbdbbfb7abfce3b4cff9a3a0ec7da3b2934bc891a98ed3e; Domain=.testing.apps; Expires=Fri, 02-Apr-2021 15:09:36 GMT; Secure; HttpOnly; Path=/; SameSite=Lax

Without Domain=.testing.apps cookies will be set to backend domain and it won’t presist after reload page

Cookies will be save to storage only after I’ve add Domain=.testing.apps to set cookie response.

Things I’ve tried to fixed this problem

  • Set allow_cors on frappe site config "allow_cors": "https://fe.testing.apps:3000"
  • Add withCredentials: true to axios call
  • Set both frontend and backend to use SSL (I don’t think this is related, it just some thing I’ve tried before ended up adding domain to set-cookies)

Question

Should we add domain config to set cookies function on frappe ?

So that we can set cookies to another domain.
Or am I just mis-config something?

Proposal

Some thing like this to set cookies function on frappe.

Function will get cookies domain from site_config.json so that we will be able to set cookies on another subdomain.

self.cookies[key] = {
	"value": value,
	"expires": expires,
	"secure": secure,
	"httponly": httponly,
	"samesite": samesite,
	"domain": get_domain_name_from_site_config(),
}

Limitation, domain name set in site config must be parent domain for both Frontend and Backend or else it’ll end up causing error for backend.

Or we could add a function to check if request comes form CORS domain, if it is return cookie with that domain.

How did you set the domain in each of the cookies?

You got any solution?

I just hard code domain value into the cookies.

So it’ll be something like this in frappe/frappe/auth.py file.

self.cookies[key] = {
	"value": value,
	"expires": expires,
	"secure": secure,
	"httponly": httponly,
	"samesite": samesite,
	"domain": "testing.apps",
}

But for production I’m not sure about this but I believed you can add domain header using nginx config.

1.React and any other frontend frame work if you are using frappe as a backend after login cookies will store in web browser. After that you have to use that cookies like example you have to set with-credentails as true in api. Browser will automatically attach that cookies
2.if you have cros issues use nginx to overcome

Please feel free post questions on this topic I can help you further

dont’t try to change any code on frappe core API

I am developing an angular app and considering frappe as back end.
Is it OK to use JWT instead of cookie If I am using frappe as back end?
Even if I am using JWT to authenticate users I have to store api_key and api_secret at the browser’s localstorage.Is it OK to store api_key and api_secret at the browser’s localStorage of browser?

No option to use JWT you have to use basic, frappe api_key and secret or sso auth.you can create keys on frappe

So Is it OK to store api_key and api_secret at localStorage?

Don’t do that api_secret mechanism you can use for server to server communication

why should not use api_key and secret_key for client side? Is there any specific reason?

Could you please what is the exact purpose of api_key and api_secret?

Have you checked GitHub - castlecraft/portal_spa from @revant_one?
Also regarding jwt and overall authentication, check also GitHub - castlecraft/castlecraft_auth as a reference.

Could you please help me to configure castlecraft?

Did anyone get this to work on the different domain? I have the same issue as the original post.
Thanks!

For developing SPAs using things like Vite do not use separate local domain, instead try to use separate port to avoid this problem altogether. A domain can’t set HttpOnly cookies for another domain that’s just not how cookies work.

Look at how all new Frappe UI based frappe apps are written for example.

1 Like