Unable to Link Apple Account to Other Existing User Account

[RayBans2111]

Provider type

Apple

Environment

"react": "18.2.0",
"next": "12.2.5",
"next-auth": "^4.10.3"

I am running Node 18.13.0 on a Windows 11 machine. I am using Google Chrome as my development browser. Issue also happens in Microsoft Edge.

Reproduction URL

http://unavailable.com

Describe the issue

When going through the process of linking an Apple Account to an existing user account (that was created with Google or Microsoft), upon signing in through Apple's portal, an entirely new account is being created instead of being linked to the existing user account.

The next-auth cookies are not present when taking a look at the request headers for api/auth/callback/apple, and this is probably what is causing the issue.

Here is my snippet of NextAuth code for the providers:

export const AuthOptions : NextAuthOptions = {
  providers: [
    AppleProvider({
      clientId: process.env.APPLE_ID!,
      clientSecret: process.env.APPLE_SECRET!,
      authorization: {
        params: {
          scope: "name email",
          response_mode: "form_post",
        }
      }
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID!,
      clientSecret: process.env.GOOGLE_SECRET!,
    }),
    MicrosoftProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID!,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET!,
      tenantId: process.env.AZURE_AD_TENANT_ID!,
      profile: (profile) => {
          return {
            id: profile.sub,
            name: profile.name,
            email: profile.preferred_username
          }
       }
    })
  ],
}

Here is a small snippet of example buttons:

  <div>
    <a onClick={() => signIn('apple', { redirect: false })}>
      Sign in with Apple
    </a>

    <a onClick={() => signIn('google', { redirect: false })}>
      sign in with google
    </a>
  </div>

1. Snapshot of apple request headers after signing in (no nextauth cookies present)
   

2. Snapshot of google request headers after signing in (cookies present)
   

How to reproduce

1. Sign into NextAuth with a provider other than Apple. (Google/Microsoft).
2. Proceed to sign in with an Apple account whilst signed in with the account you made.
3. An entirely new user account should be created now instead of being linked to your existing user account.

Expected behavior

When clicking on the sign in with Apple button (while already signed in with your other provider account), I should be able to sign in with Apple, and return to my project with the account linked rather than NextAuth creating a new user account.

The cookies should also be visible/present in the api/auth/callback/apple request headers.

[balazsorban44]

We use the e-mail address to link accounts. If you use email proxies, Apple likely generates a new e-mail on each login, so we cannot link the accounts and a new user is created:

next-auth/packages/next-auth/src/providers/apple.ts

Lines 52 to 54 in 6ecf9cb

	* A String value representing the user's email address.
	* The email address is either the user's real email address or the proxy address,
	* depending on their status private email relay service.

Sidenote: unavailable.com is not a reproduction...

[RayBans2111]

This doesn't line up with my testing, I see the following (confirmed no proxies were used)

1. A user created with google, with email address x@x.x will link with a microsoft email address with y@y.y
2. A user created with google, with email address x@x.x will not link to apple x@x.x (confirmed no proxy)
3. A user created with apple x@x.x will link to google account x@x.x

In the nextauth source code, linking happens on userId:

if (user) {
        // If the user is already signed in and the OAuth account isn't already associated
        // with another user account then we can go ahead and link the accounts safely.
        await linkAccount({ ...account, userId: user.id })
        await events.linkAccount?.({ user, account })

        // As they are already signed in, we don't need to do anything after linking them
        return { session, user, isNewUser }
      }

@balazsorban44 can you elaborate more on this?

[RayBans2111]

Additionally, I'm not receiving a name when using the Apple provider. Is there a chance that I have something wrong with my configuration within Apple?

[balazsorban44]

Yes, there is a chance. Apple's OIDC is a bit messy from my experience...

We will need a reproduction in any case, the problem is I don't have an Apple dev account. To create one, I apparently need an Apple device, which I don't own, and they want my address which I don't want to give. 🤷 I also tried registering as an org (for Auth.js), but we don't have the legal stuff (not truly an organization), and would likely have to pay.

Apple just seems to not care about the developer experience.

This is a true headache, but you can reach out on Twitter and maybe I can have a look together with you for a bit. Just make sure you have a super-simple reproduction ready.

[RayBans2111]

Good day @balazsorban44!

I have created a reproduction repository that you and your team to look over. Here is the link for this: https://github.com/RayBans2111/nextauth-apple-bug-troubleshooting