hey guys, we are a little lost implementing auth f...
# support-questions
e
hey guys, we are a little lost implementing auth for our capacitor apps (different domains)... What's the usecase for the cookieHandler?
Copy code
js
  supertokens.init({
    ...frontendConfig().appInfo,
    cookieHandler: capacitorCookieHandler,
  })
We are following this guide now, since our implementation didn't work as expected (due to lax cookies & safari webkit issue): https://supertokens.com/docs/thirdpartyemailpassword/advanced-customizations/examples/localstorage/about
r
hey @EdwinN1337
e
hey, misunderstood a concept sry 😉
r
Why didn't the cookie handler method work?
e
Safari blocks cookies from third party. and our api is one a different domain ... I've been reading the guide of using localStorage instead of cookies, that points to that specific problem.
r
Yea. Can you make the API on the same domain, but have a different sub domain?
Or at least route it through an API that's on the same domain or different sub domain?
that would be the best solution for this issue
using localstorage can be done, but it's quite messy
e
Capacitor apps are served on
http://localhost
and
capacitor://localhost
(ios/android) no option to change that 😦
r
So is the native app being an issue or the webapp part?
e
native
webapps = fine, its served on subdomain
r
but in the native app, is it using a webview? Or something else?
e
it's using webview
r
So the URL that is loaded in the webview is not the subdomain URL?
So as per my understanding, capacitor enables the JS you write to communicate with the native swift / obj-c code. So it should not be using webview at all, and so safari's "bug" should not matter at all
most likely i am wrong here.. cause i have never used capacitor, but just for my understanding
e
What exactly is the cookieHandler doing? parsing the cookie from the response, set is to storage and use it in the fetch interceptor?
r
yes. Parsing of the raw set-cookie string, storing it somewhere, and then later on providing it back when needed (during request interception)
e
right, got it
Okey, well I forgot to put sameSite: none 😉
will try
sameSite: none
+ cookieHandler now on iOs device
r
right.. but safari has a bug that ignores it. Lol
e
yeah, it's a huge problem from what i read on forums
r
yeaa.. they don't even wanna fix it.. not sure why
r
I think you can try it using the customCookie handler for iOS. maybe there it will work
and if not, then yea.. localstorage method
e
then I have to build 2 api's (one for the webapps and one for capacitor) and share the handlers
r
uhmm. Not necessarily. You could build your own middleware which checks if the request contains the headers passed from iOS, and then set them as cookies before calling our verifySession function. And then use this custom middleware in all your APIs instead of using our verifySession middleware
e
will do that!
I'll update the example app to make it more clean and clear. It's slightly broken at the moment cause of version changes in our SDKs
e
to bad 😦 401 on safari, rest 200
r
oh flip.
and the URL on which the app is loaded is capacitor://localhost?
e
correct
hitting our
https://shop-git-staging.lokalist.vercel.app/api/auth
paths
r
hmm
Let me see about some easy solutions. Will get back
e
Sure thanks!
😄
r
Is there anyway to proxy the request through something like
capacitor://localhost/api/*
or something?
or maybe run a proxy server in the app itself which listens on that path
e
r
right, but the scheme would still be capacitor:// right?
e
right, also if changing that will cause set of different bugs 😭
r
yea.. probably
e
proxy is not possible i guess? its pure client side / js html css
r
well, let me cleanup the with-localhost app real quick so you can use that as a reference
e
super, thanks for the support
r
we intended to clean it up anyway in the coming 2-3 weeks.. but this is a motivation to do it now.. hehe
e
you got a usecase now 😄 glad
r
yeaa
i was hoping that this would never be required by anyone.. but well
e
there is a native
http
plugin where cors restrictions don't apply https://ionicframework.com/docs/native/http/#installation
not sure if that would solve anything, will dive into it
r
WOOOH
never been so happy to see a 200
r
oh awesome! hahah
how did you get it to work?
e
ah, there is an option in capacitor to edit hostname so now it's
capacitor://lokalist.nl
instead of
capacitor://localhost
Copy code
js
  server: {
    hostname: `${DOMAIN}` ,
  },
r
right! did that cause any other issues though?
and also, you can go back to using sameSite lax
e
problem is, we cant use web api's that requires secure context
r
yea. as the docs says
e
yea right, but we don't use it 😛
r
well then! fair enough
e
yeah, thanks anyways! let's move to prod finally (4 apps hehe) 👍
r
maybe you can consider making an example app that uses capacitor, and submit a PR.. clearly it's not very straightforward.
e
I will do that!
r
thanks!
hey! I have cleaned up the example app and it works now: https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-localstorage In case you are interested.
e
Super thanks! will check it
Havent got the perfect solution yet..., iOS everything works perfect but now android stopped working since it doesn't support custom scheme on webview 😦
r
huh.. so android needs to load on http://?