Hey, does Supertokens work with Capacitor ( https://capacitorjs.com/ ) ?
v
Hey, does Supertokens work with Capacitor ( https://capacitorjs.com/ ) ?
r
hey @ville9257 yes it can work. But requires a few customisations. We have an example app with electron if that helps: https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-thirdpartypasswordless-electron
Also, if you search discord for capacitor, or on here: https://community.supertokens.com/, then you can find a bunch of threads about it
v
Thank you, I'll check it out! 🙂
r
we managed to fix everything except login with apple 😉
r
hey @robschilder what issue are you having with apple?
r
It's working on the web, but on iOS it doesn't. Maybe It's because of this sentence:
Copy code
For example, in case of Apple login, Apple gives you different client IDs for iOS login vs web & Android login (same client ID for web and Android).
It's a bit unclear of what I need to do
I see that in the Electron app you used
Copy code
authorisationRedirect: {
                        params: {
                            redirect_uri: `${apiDomain}/auth/callback/apple`,
                        },
                    },
I will now try to add this and see if it then works on iOS
r
hey @nkshah2 and @sattvikc can probably help here.
r
So to get it clear, I think I need a 'sign in with Apple provisioning profile' as well right? Because Supertokens will use native login with iOS as well, as it asks for my face ID
n
So SuperTokens sort of takes over after the native login side of things is done. I’m guessing you’re using some library to trigger the apple login process, that’s probably where the Face ID flow is coming from
But yes for ios you need to add Sign In with Apple as a feature for your app on the apple dashboard
Without that apple login will always fail on ios devices
If you are managing your provision profiles manually you will also have to redownload them after enabling apple sign in
r
In Capacitor it's a webview, so I use
Copy code
ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
    providerId: thirdPartyId,
    authorisationURL,
  })
where the authorisationURL is a link to my
${my_domain}/api/auth/redirect?provider="apple"
on mobile. This then triggers the Apple login accordingly, by asking for the face ID. However, once that's succesful, the backend of Supertokens doesn't know it has to go to my app I guess
Do you have any advice on this @nkshah2 ?
n
What’s the final url after the apple process is complete?
Does it keep you on the apple site or does it redirect?
If the entire flow is on the webview then you shouldn’t need a separate client I’d for ios, the web one should work
r
thats what I thought
Copy code
https://appleid.apple.com/auth/authorize?scope=email&response_mode=form_post&response_type=code&client_id=apple.client.gigplan.mobile.app&redirect_uri=https%A%F%Fclient.gigplan.app%Fapi%Fauth%Fcallback%Fapple&state=62a25ab25df7c66a10118
n
Right, so in your backend which recipes have you initialised?
Because apple will make a post call to your backend
Deleting the message because it had secrets
But that seems right
r
thanks
Yeah because it works on the web with this
and google also works, because I redirect it to my API route and it redirects back
Also on Android, it does redirect
n
Can you verify that apple hits your servers? Because if it does then the backend should try to redirect to your frontend
r
ah Android does but iOS doesnt
n
Right but can you check if the post call is made to your server or not?
It will help rule it out
r
the post call is not made
n
Hmm, does your app listen to any url changes in the webview?
r
yes
n
Can you check if something there is taking over?
Also it might be easier to debug this on call, we can set something up for tomorrow
r
sure! that would be nice. I thought I could figure it out today but its complicated.
n
Alright, I’ll message here tomorrow and we can get on call then
r
Yeah! great
n
Hey im available for a call, let me know when you are available and ill send you a link
r
Oh I didnt see this message!
I am also available @nkshah2
r
@nkshah2 is not available now. He will be available tomrrow.
r
ah..
n
Let’s do same time tomorrow?
r
06:30 CET?
I could try yes
n
Are you working out of CET?
r
(GMT+1)
n
Anytime between 11am to 2pm CET works
Or anytime before 2pm CET really
r
It's now 12:40 here in GMT +1
I usually work from 09:00 till 17:00 in GMT +1, so any time then as well
But I really want to talk to you so I could wake up in the night as well 🤣
n
Yep I’m in GMT + 5:30 so after you start work anytime before 2pm your time works for me
Just not available today
r
Thats good
Enjoy your day off 🙂
or your day busy with other stuff! haha
See you tomorrow then!
n
See you then
r
https://we.tl/t-BEXFJ8oP62 - here is a video where you can see the issue. I realised my issue was not only with Apple, but since updating to
supertokens-web-js
and using the functions provided by Supertokens, actually my Google login also stopped working on Capacitor. The desktop login is good, but the Google response misses the state, as seen here:
Copy code
/auth/callback/google?state=63890d5d2442ef25a2290&code=4%2F0AWgavdcGRdl9KGP0JqXB9qUKjAR0KqoWFmvMkNsEtBxaETLsGcXEwJmLmqBd9yIDG-p-wg&scope=email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+openid&authuser=0&prompt=consent  



/auth/callback/google?code=4/0AWgavdexWlI_EGbaqeNgWrR6QAMd4vmCZbeaKbB78YT8wzQ5ktT99P0ZhnrDlpKbVG6fDg
https://github.com/RobSchilderr/capacitor-supertokens-nextjs-turborepo Ok I spend all day working on an example using Capacitor + Supertokens + Next.js + Turborepo! Only thing is that the social logins are not working yet on the iOS and Android apps. Hopefully tomorrow we will fix the social logins @sattvikc, so that in the future we can always look to this example if the question pops up again. Gonna sleep now and cya then 🙂 end goal: have one React codebase for iOS, Android, Web with authentication powered by Supertokens.
n
Hey, so I tried out the example app (took some messing around but great job btw!). A couple notes: - You use 3001 as the port in code but the next app seems to start on 3000 by default - You use localhost for the iOS app apiDomain but this wont work, localhost would make the device attempt connecting with an internal server which doesnt exist. Using the IP address of my machine solved this For both Google and Apple, after logging in it tries to redirect to the frontend correctly. Didnt get the entire flow to work because im not super familiar with the setup but the redirection did happen. One interesting thing for Apple was that the entire flow took place in Safari outside of the app so when redirection did happen it never launched the app for me. We can still get on call today to work through some of the details
r
Yes great let’s talk about it and let me check it out first. Would you be available in an hour? So 11:00 in GMT+1?
@nkshah2 would you be ready soon?
n
Hi yep, give me about 10-15 minutes and ill send you a link
r
perfect!
Did you send the link somewhere already?
n
@robschilder DMed you the link
r
For people interested in an update to this: login/registering is working. The only thing in the example which is lacking is social login for now. Hopefully by monday we have an update.
Hey guys did anyone check how we could get the social logins to work yet?
n
Hey @robschilder , I couldnt properly test it because the redirection back to the app from Safari wasnt working and I was not too familiar with the setup. If that works now in the example I can take another look at it
r
Hey I could update the example to make this work. Will do it!
n
That would be great
r
The issue is that I'd need to link this open-source repo to an actual Apple app URL to fix redirect. Im not sure if its possible, without security issues, but will try
r
You could try using our dev credentials instead. They work with any redirect
r
Hey @nkshah2 I fixed the redirect to the app, I will send you some more information in a DM
I had to buy a domain for this on Vercel ($20) and connect it to an official developer team in Apple, but now we have our universal link working.
Now it's a matter of fixing the issue on the Supertokens side
r
What’s the issue on supertoken’s side?
r
I send it in a dm to nkshah
Sent
Im out now afk
r
Okay
n
Yep ill take a look this week
r
If you need any assistance, I'll be watching this chat!
n
Hey @robschilder I took a look at the app and found the issue for why social login was not working. When redirecting to the app only the
code
was being added as a query param in the redirect api, there are other query params that are required to complete the flow. Since I was making changes to test this out and to verify that it works I went ahead and made a pull request to make it easier: https://github.com/RobSchilderr/capacitor-supertokens-nextjs-turborepo/pull/1 Ive verified that Google login works fine with the changes but did not get a chance to test Apple login, let me know if you need help with that after merging this one
r
Hey @nkshah2 thanks for the reply! I'll check it out this weekend
I checked it out, some updates: - The repo got 12 stars now - The repo has been officially recommended by the Capacitor team in their Discord to consider as a replacement for their Single Sign-on feature (paid) - Capacitor has 340.000 weekly downloads - The repo has been starred by Max Lynch, co-founder of Ionic and CapacitorJs What's left to do to get this repo as a better functioning example? - Fix social Apple login on iOS/Android
I think I do need help with the Apple login, I have no clue what the issue could be. Could you maybe try it?
n
Yeah I can take another look at it
r
hey @nkshah2 any idea when you would take a look? There is some customers waiting for me on the Apple login, don't wanna rush but then I can make a better planning around it
n
Either later today or sometime tomorrow
r
it didnt work in the end today right? 🥲
n
@robschilder Dmed you
r
Update: we are still trying to fix the Apple login on iOS / Android. Its not that easy apparently
m
@robschilder beside the third party login, is your repo working for simple email/password login? I am also trying to implement Supertokens on Capacitor (but with Quasar, NestJ), it works on web, android but strangely not on ios
r
yes it does work
make sure to check if
capacitor.config
is similar, if you set
Copy code
//for localhost, we need to set sameSite to strict, due to no https
        cookieSameSite: !IS_IN_PRODUCTION_ENVIRONMENT ? 'strict' : 'none',
in the backendconfig
also helps to add
Copy code
<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsLocalNetworking</key>
        <true/>
    </dict>
in
info.plist
for Apple for local testing
m
ok to simplify things I put the backend in the cloud even for testing. I should not need that right?
thanks for the tip anyway
r
no you can just use localhost
also, CORS very often is an issue, so check that too. I assume you know how to debug on Safari for iOS?
m
sure .. trying now ..
thanks to you Rob, I could make it run with a backend on localhost .. unfortunately I still have the same problem. 😦 See attached log After a successful sign in, it fails at the time of refresh ,,, Strangely I do not have that problem on Capacitor/Android with the same config It starts to be different at the "getIdRefreshToken: returning: MAY_EXIST. but how to interpret that !
r
hmm i dont have time to dive into it now
will check later!
m
Thanks Rob .. I definitely do not expect you to jump on it . Meanwhile I have tried to install your package .. it starts but the behavior is like the running version you kindly posted(https://www.next-capacitor-supertokens.app/), it does not seems to login or register 😦 .. Concerning my own problem, it probably does not come from MAY_EXIST as some other part indicate EXIST.. here is attached a longer log with several (failed ) api calls after a successful login!! I am clueless
r
My prod version has CORS issues, local everything except Apple login works
But if you’re saying that locally iOS isn’t working then I need to check this out
This weekend I will work on this @marchalb. Hopefully by then @nkshah2 has fixed Apple login. Then this example is finished
r
@nkshah2 is busy for the rest of this week. So he will only be able to see it sometime next week.
r
Then it will be sometime next week @marchalb
m
thanks you both .. well appreciated
r
Thanks @robschilder and @nkshah2
r
our example has been added to the official starter repo's of Capacitor! 🎉 With 300.000 weekly downloads this is something great 🙂 https://github.com/ionic-team/capacitor-starters
r
Oh wow!! That’s awesome. Thanks @robschilder!
r
Hey guys, it’s been more than a month since this issue was mentioned. I know we have slowly worked towards a solution, and we are very close, but could we maybe work together to finish this issue?
r
Hey @robschilder. Last I spoke to @nkshah2, he had fixed the issue.
Is it still not working? @nkshah2
r
He fixed it locally
r
Ohhh.
r
But there still seems some issue in production with redirect and I can not know if it’s on supertokens’ side again haha
Copy code
https://appleid.apple.com/auth/authorize?scope=email&response_mode=form_post&response_type=code&client_id=io.supertokens.example.service&state=819a1fd03245bb2c3d5af&redirect_uri=https%3A%2F%2Fsupertokens.io%2Fdev%2Foauth%2Fredirect-to-app
So what I see is that when I use the example and the Supertokens env variables, the redirect URI is this. When I use it in my own app with it turns into:
Copy code
https://appleid.apple.com/auth/authorize?scope=email&response_mode=form_post&response_type=code&client_id=apple.client.gigplan.mobile.app&redirect_uri=https%3A%2F%2Fclient.gigplan.app%2Fapi%2Fauth%2Fcallback%2Fapple&state=0f62e29cb642ea9d75d2e
I think this is where the issue is. Does this help you?
Tomorrow I’m available all day for debugging and available for call from 08:00 GMT +1 onwards
r
Hmm. I’m not sure why it wouldn’t work. But @nkshah2 can help out tomorrow
r
We managed to figure out the Apple login for iOS apps with Capacitor as well!! 🥳🥳🎉 @rp_st
r
awesome! thanks to @nkshah2 !
r
My sincere compliments for the helpfullness of @nkshah2 !
n
Happy to help!
r
there are some caveats for people that will read this in the future, I will try to update the Starter template this weekend and do a writeup of what we did and why we did it
It seems that everything is currently working properly, with comments added throughout the code and known caveats documented in the README file! 🥳 Check the repo: https://github.com/RobSchilderr/capacitor-supertokens-nextjs-turborepo Check the live example: https://www.next-capacitor-supertokens.app/ However, there are still some outstanding issues being worked on by the Supertokens team that are worth summarizing: 1. There is a security vulnerability when using the
Authorization
header instead of cookies, so caution should be exercised when using this method. (we use this now) 2. Apple login is not currently functional on mobile web, with more details available on the /temp route of the web. The Supertokens team is actively working on a solution that will allow information to be stored in the state sent to the provider, which can then be checked in the API layer to determine if it's mobile or web. Until this solution is in place, a workaround is being used that prevents iOS login from working on the web, and it should be removed from the UI until further notice. 3. Live reload is currently not functioning as expected on Capacitor when using Supertokens, and a solution is being sought to resolve this issue. To simulate this issue: uncomment the
Copy code
server: {
  //   url: 'http://YOUR_IP:3001',
  // },
from the capacitor.config. Besides this, I think we did some amazing work and we are close to creating the starter with`npx create-supertokens-app@latest` ! 🎊🎈 For this I think we need to remove some
console.logs
etc that are still in the code and maybe review the full code once more. I left them inside right now because we did not solve the caveats above here. (talking about 2 and 3)
r
@nkshah2
n
Yep! All in all it looks great, just one note is that we dont need to use Authorization headers for the web version of the template because cookies will work fine there. We should use headers for the app version because of the custom protocol that capacitor uses for iOS (and this might happen in the future for Android too). The Node SDK is built to be able to handle both simultaneously anyway
r
I added Authentication with JWT as an example to this repository and also updated the Supertokens node version to
14.1.3
for people to get the best security practices when working with mobile apps.
n
Awesome!
18 Views