https://supertokens.com/ logo
Join Discord
Powered by
Hey guys, what is the reason that Apple has a redi...
# support-questions-legacy
r
Hey guys, what is the reason that Apple has a redirect to 
/api/auth/callback/apple
and the others to 
/auth/callback/google
for example? (notice the 
/api
)
r
Cause apple does a post request which needs to be handled by the API, whereas others do a GET request which can be handled by the frontend.
r
do you have an example of how one would handle this?
for typescript
r
Are you using our pre built ui or custom?
The backend SDK already exposes an api which handles this.
r
custom
Ah weird, it doesnt take it somehow
it does work when I use the example Supertokens config though, but when I use my own, it goes to 
/api/auth/callback/apple
instead of going into my signup proces It works when using:
Copy code
Apple({
                    clientId: "4398792-io.supertokens.example.service",
                    clientSecret: {
                        keyId: "7M48Y4RYDL",
                        privateKey:
                            "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
                        teamId: "YWQCXGJRJL",
                    },
                }),
And it also works when I use my own, except for the fact that it directly goes to 
/api/auth/callback/apple
This is the frontend config:
Copy code
export const appInfo = {
  appName: 'Appname',
  apiDomain: FRONTEND_URL,
  websiteDomain: FRONTEND_URL
,
  apiBasePath: '/api/auth',
  websiteBasePath: '/auth',
}
r
Well, you can configure apple to hit another endpoint and then handle that by yourself.
r
I mean, it does work when I use the supertokens config you provided, yet when I use my own, it does not. Is there some special thing I need to add in the Apple developer environment?
r
What path does the apple redirect to? And then what happens after?
r
it keeps going to the API endpoint and looks like it doesnt exist
its like the route is 
not found
like it wasnt created by the backendconfig with 
ThirdPartyEmailPassword
but when using your configuration, it does work. Which is strange
r
Hmmm. That’s odd
Can you manually call that api via postman (post request with an empty body). Do you get back a 404?
r
lemme see
Internal server error (500)
Also when using the supertokens config. Is that the desired response?
r
Right. So the api does exist. So I’m not sure why it’s saying route not found. That’s odd
Can I see chrome’s network tab for this?
I mean the set of api requests that are being made when doing apple login
r
yes
I am sorry, it does work normally when using the supertokens config.
so there must be an issue in our config
r
Maybe
r
let me put back our config and show you the network tab
what else could it be? I mean, when I use a different 
clientId
, it doesn't enter the Apple page. When I use a different 
privateKey
, the backend crashes immediately. Same for 
keyId
. So I think the keys are correct
this is the clientId
this is the key, and above there is the secret key ID
and the 
privateKey
we downloaded from there
then we get here
then here
A 200 when posting the req
full headers
and then
this is the full network tab and flow
Is this all you needed @rp_st ?
r
What about the network calls after you navigate away from apple?
r
morning from the Netherlands, going to simulate this now 🙌
So yeah, it ends there actually, at the 'authorize' call. I actually have a working link for you to try it, if you click on 'inloggen met Apple' if you could: https://shop-git-staging-lokalist.vercel.app/mijnaccount/inloggen
r
hmm. So i am trying it out. It's really strange.
if i do a normal POST request with an empty body to 
https://shop-git-staging-lokalist.vercel.app/api/auth/callback/apple
, it returns a 500 error (as expected). But if i add the right params, the function does not reply
If there any way to know if the server call is hitting the API at all? Like if you enable debug logging on the backend server and then make the below call, then what does it print out?
Copy code
curl 'https://shop-git-staging-lokalist.vercel.app/api/auth/callback/apple' \
  -H 'authority: shop-git-staging-lokalist.vercel.app' \
  -H 'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9' \
  -H 'accept-language: en-GB,en-US;q=0.9,en;q=0.8' \
  -H 'cache-control: no-cache' \
  -H 'content-type: application/x-www-form-urlencoded' \
  -H 'origin: https://appleid.apple.com' \
  -H 'pragma: no-cache' \
  -H 'referer: https://appleid.apple.com/' \
  -H 'sec-ch-ua: ".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: document' \
  -H 'sec-fetch-mode: navigate' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-user: ?1' \
  -H 'upgrade-insecure-requests: 1' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36' \
  --data-raw 'code=c536112a81f1c4b839e6ccee6d9c9649e.0.rvxt.dotvVGV2WoiTL9rK2fc70w&user=%7B%22email%22%3A%22rcf6phxbgp%40privaterelay.appleid.com%22%7D' \
  --compressed
r
let me try
Is there an opportunity for a short call @rp_st? I have already struggled before on turning on debug logs in my serverless repository. Never managed to do so and my colleagues are on holiday.
would be really appreciated
r
yea
sure
r
this is the last thing we need to finish to put supertokens fully in the app store
(apple ofc)
r
r
thanks!
so when I set up a local tunnel and then curl it locally with the backend env turned on, this is the response i get from the localhost:
Copy code
<!DOCTYPE html><html lang="nl"><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><script>(function setScript(initialValue) {
  var mql = window.matchMedia("(prefers-color-scheme: dark)");
  var systemPreference = mql.matches ? "dark" : "light";
  var persistedPreference = systemPreference;

... more html
so basically its showing the document, is that what is supposed to happen with that curl?
r
thats weird.. im not sure where this html comes from
can you send the whole html?
r
Copy code
try {
    persistedPreference = localStorage.getItem("chakra-ui-color-mode");
  } catch (error) {
    console.log("Chakra UI: localStorage is not available. Color mode persistence might not work as expected");
  }

  var colorMode;

  if (persistedPreference) {
    colorMode = persistedPreference;
  } else if (initialValue === "system") {
    colorMode = systemPreference;
  } else {
    colorMode = initialValue != null ? initialValue : systemPreference;
  }

  if (colorMode) {
    /**
     * Keep in sync with `root.set() {@file ./color-mode.utils.ts}
     */
    document.documentElement.style.setProperty("--chakra-ui-color-mode", colorMode);
    document.documentElement.setAttribute("data-theme", colorMode);
  }
Copy code
})('light')</script><link rel="preconnect" href="https://www.googletagmanager.com"/><link rel="preconnect" href="https://www.google-analytics.com"/><link rel="preconnect" href="https://res.cloudinary.com"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true"/><link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Raleway:wght@400;600&display=swap" rel="stylesheet"/><meta name="google" content="notranslate"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1659345220456"></script><script src="/_next/static/chunks/webpack.js?ts=1659345220456" defer=""></script><script src="/_next/static/chu
Copy code
nks/main.js?ts=1659345220456" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1659345220456" defer=""></script><script src="/_next/static/chunks/pages/_error.js?ts=1659345220456" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1659345220456" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1659345220456" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next" data-reactroot=""></div><script src="/_next/static/chunks/react-refresh.js?ts=1659345220456"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":500,"hasGetInitialPropsRun":true}},"page":"/_error","query":{"__NEXT_PAGE":"/api/auth/callback/apple"},"buildId":"development","isFallback":false,"err":{"name":"Error","source":"server","message":"[object Object]","stack":"Error: [object Object]\n    at Object.getProperError (/Users/robschilder/Documents/Projects/De Lokalist/monorepo/apps/shop-web/node_modules/next/dist/lib/is-error.js:25:12)\n    at DevServer.run (/Users/robschilder/Documents/Projects/De Lokalist/monorepo/apps/shop-web/node_modules/next/dist/server/dev/next-dev-server.js:536:39)\n    at async DevServer.handleRequest (/Users/robschilder/Documents/Projects/De Lokalist/monorepo/apps/shop-web/node_modules/next/dist/server/base-server.js:317:20)"},"gip":true,"scriptLoader":[]}</script><noscript><iframe title="gtm" src="https://www.googletagmanager.com/ns.html?id=undefined" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript></body></html>
r
huh.. im not sure where this comes from. Which API cal you calling?
r
these are also API logs
calling 
/api/auth/callback/apple
nvm those were unrelated
this is what you want to see i guess:
but this is locally through a tunnel, so not sure if Apple is going to work then anyway
not sure how i'd get this output in Vercel
r
thanks. This is helpful.
r
great 🙂
r
@kakashi_44
k
Hey @robschilder , what version of 
supertokens-node
are you using?
r
"^9.2.1"
Do know that it does work properly when using the supertokens example config you provide. But not with our own Apple config. @kakashi_44
r
the supertokens example config does not require a call to your API - thats why it works properly.
There seems to be some error in the SDK related to parsing form data
in vercel env
r
Ah that explains
k
It's strange cause the API has nothing to do with the config passed. Even if Apple provider is not initiated and the API is called, it should return success
r
hmm have you guys tried it with a brand new project on Vercel yet?
to find out whether it is related to our project / Vercel / NextJS / the sdk
r
if the config are dev keys, the API is not called..
r
ah yeah and you don't have the keys you're saying
how could we help?
r
Can we get on a call now?
r
yes
r
hey @robschilder we have released a new version of the node SDK -> 11.0.2. Please see if that works.
r
will let you know in a bit@rp_st
cheers for the quick solution!!
You all are heroes! it works 🙂
r
great! :))
6 Views
PreviousNext
Powered by