Help with Apple Sign In via @auth/sveltekit needed

[maxkozlowski]

Hello everyone,

I'm starting this discussion in hopes of finding guidance or a working example for integrating Apple Sign In with @auth/sveltekit. Despite following available tutorials and digging through the documentation, I've hit a roadblock that I can't seem to get past on my own.

I've successfully implemented the authentication flow to the point where the user is redirected to Apple's login page. However, after authentication, the user is sent back to my application with a CallbackRouteError, and this is where I'm stuck. Here’s a snippet from my hooks file for context:

export const handle = SvelteKitAuth({
  providers: [
    EmailProvider({
      server: {
        host: SMTP_HOST,
        port: Number(SMTP_PORT),
        auth: {
          user: SMTP_USER,
          pass: SMTP_PASSWORD,
        },
      },
      from: EMAIL_FROM,
      sendVerificationRequest: async ({ identifier, url, provider }) => {
        await sendVerificationRequest({ identifier, url, provider });
      },
    }),
    GoogleProvider({ clientId: GOOGLE_CLIENT_ID, clientSecret: GOOGLE_CLIENT_SECRET, allowDangerousEmailAccountLinking: true }),
    FacebookProvider({ clientId: FACEBOOK_CLIENT_ID, clientSecret: FACEBOOK_CLIENT_SECRET, allowDangerousEmailAccountLinking: true }),
    AppleProvider({ clientId: APPLE_CLIENT_ID, clientSecret: APPLE_CLIENT_SECRET }),
  ],
  adapter: UpstashRedisAdapter(redis),
});

I have checked my implementation against the documentation and scoured the internet for solutions, but nothing seems to work. I imagine there may be more people struggling with this.

If anyone has successfully implemented Apple Sign In with SvelteKit or has insights into what might be going wrong, your guidance would be immensely appreciated.

Thank you in advance for your help.

[leo3linbeck]

I've been using Authjs with Sveltekit, and have encountered the same issue with Apple (no problem with Google, Github, Auth0, or Facebook).

The error you describe is one of several I've encountered, and they all seem to come down to this:

Apple uses POSTs to communicate during parts of the OAuth flow, and so key information (like the 'state' parameter that is used to prevent certain kinds of attacks) is in the body of the callback request.

Authjs specifically expects the state to be a query parameter in the callback, so it chokes when it is verifying the response because there is no state query parameter. I think this is a bug with Authjs; it should determine whether the callback request is a GET (in which case it should look for a query parameter) or a POST (in which case it should look in the request body).

Here's where the check occurs (@auth/core/lib/actions/callback/oauth/checks.js):

/**
 * When the authorization flow contains a state, we check if it's a redirect proxy
 * and if so, we return the random state and the original redirect URL.
 */
export function handleState(query, provider, isOnRedirectProxy) {
    let randomState;
    let proxyRedirect;
    if (provider.redirectProxyUrl && !query?.state) {
        throw new InvalidCheck("Missing state in query, but required for redirect proxy");
    }
    const state = decodeState(query?.state);
    randomState = state?.random;
    if (isOnRedirectProxy) {
        if (!state?.origin)
            return { randomState };
        proxyRedirect = `${state.origin}?${new URLSearchParams(query)}`;
    }
    return { randomState, proxyRedirect };
}

Now this happens on redirect for me, which may not be a use case for you (it didn't look like you were redirecting your auth flow, but I'm not sure). Moreover, I could be wrong because all of this is at the limits of my knowledge of OAuth, and it could be that Authjs is doing it right but Apple is doing something non-standard (which, frankly, should be my base assumption for any Apple or Microsoft product ;-).

Hope this helps, and I wish I had better news...

Cheers,
L3

[leo3linbeck]

One more thing: I'm not sure what you're using as your APPLE_CLIENT_SECRET, but that can also trip you up as Apple expects this secret to be a JWT. I auto-generate this using jose, which I describe here:

#9420

Lemme know if you figure out how to get the Apple sign in to work for you.

Cheers,
L3

[garshythoel]

I have the same issue happening on my end - moreover the example Apple auth doesn't work on the next-auth-example app -> leads to https://next-auth-example.vercel.app/auth/error?error=Configuration

[danielpl10]

@leo3linbeck your description of the apple provider issue seems accurate, and is incredible how has been broken forever, even if apple is doing something none standard this library should be prepared for that. But anyways, 9 month after, do you have any workarround to get apple provider working?