https://supertokens.com/ logo
Join Discord
Powered by
apple sign in native flow
# support-questions
d
I have another Apple issue. This time it's using the "native" flow, meaning on iPhone it shows an interactive FaceID prompt. I think Apple calls it 'popup'. Web works. The requests appear to be the same. I'm getting the following error: 
Auth state verification failed. The auth provider responded with an invalid state
In my /api/auth/...path.js file the body comes in as empty. Is there any middle ware firing before this that I should look at?
Copy code
export default async function superTokens(req, res) {
    console.log("API req.query: ", req.query)
    console.log("API req.url: ", req.url)
    console.log("API req.body: ", req.body)

    // NOTE: We need CORS only if we are querying the APIs from a different origin
    await NextCors(req, res, {
        methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
        origin: websiteDomain,
        credentials: true,
        allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()]
    })

    await superTokensNextWrapper(
        async (next) => {
            // This is needed for production deployments with Vercel
            res.setHeader("Cache-Control", "no-cache, no-store, max-age=0, must-revalidate")
            await middleware()(req, res, next)
        },
        req,
        res
    )
    if (!res.writableEnded) {
        res.status(404).send("Not found")
    }
}
r
hey @Davido
for native flow, you need to call the signinup API directly from the mobile app as stated in our docs
d
Sorry, I don’t mean “native” but web-based with the iOS “pop up”. Does that still apply here? I can’t find the docs but will take another look.
r
Right. Perhaps @nkshah2 can help here.
n
Hi @Davido , Just want to make sure I understand correctly. You are using face id on the web to log users into your app and thats failing with the SuperTokens web SDK?
So the thing is that the thirdparty functions exposed by the supertokens web SDK assumes that you use the redirection flow where the social login provider redirects back to your app (in which case it will provide 
state
etc in the URL as query params). But with native flows such as popup you will need to call the SuperTokens APIs manually
For this kind of a flow I would refer to the docs for mobile applications. The flow explained for them will be really close to what you want
d
@nkshah2 correct. I’m calling getAuthorisationURLWithQueryParamsAndSetState on button click. It’ll redirect via Web in most browsers but iOS or Safari will trigger the popup flow. Both versions redirect back to /api/auth/callback/apple but the popup version has no state or code. I don’t know why. My suspicion is there’s a middleware invalidating it before it gets to the method above but haven’t found it yet.
r
what does the popup version send to /api/auth/callback/apple?
perhaps @sattvikc can help here.
d
I put it in the second message. I think it was outside the thread. Let me find it.
AFAIK it looks like it’s sending the right info to the backend
r
What happens after it calls the api on the backend? There seems to be some redirection happening (308 status code). Where is that from?
s
hey @Davido we could go through your setup on a call to see what's going on. please use this link to book a comfortable time - https://calendly.com/sattvik-supertokens/30min
d
Sorry I’ve been away for a couple of days. I’ll find some time with this link. The redirect is from next.js and has been a little bit of a pain. I’ll disable it to make sure it’s not the issue. I didn’t consider this since it looks like a good redirect and works with the other flow.
so I figured out the issue. You were correct that it was an issue with the redirect (I have the trailingSlash: true setting in my next.config.js file). Apple/Safari sends a Content-Length: 0 header on the redirect when in "popup" mode (but not on a normal web auth flow). The solution I found was to update my provider to the following:
Copy code
export function AppleWithTrailingSlash(config) {
    const appleProvider = ThirdPartyEmailPassword.Apple(config)

    return {
        ...appleProvider,
        get: function (redirectURI, authCodeResponse, userContext) {
            const getResponse = appleProvider.get(redirectURI, authCodeResponse, userContext)

            return {
                ...getResponse,
                getRedirectURI: function () {
                    return appInfo.apiDomain.getAsStringDangerous() + appInfo.apiBasePath.getAsStringDangerous() + "/callback/apple/"
                }
            }
        }
    }
}
PreviousNext
Powered by