bug: Apple sign-in does not return "displayName" with a fresh user

[tylerclark]

Plugin(s)

• Analytics
• App
• App Check
• Authentication
• Crashlytics
• Cloud Firestore
• Cloud Messaging
• Performance
• Remote Config

Did you test the latest version?

• I use the latest version

Platform(s)

• Android
• iOS
• Web

Current behavior

Note: I know you only get the displayName of the user the FIRST time you authenticate with Apple. I went to https://appleid.apple.com/account/manage and removed my app from the list under "Sign in with Apple" and also removed my user from Firebase Auth/Firestore.

When I try to run this method...

  const result = await FirebaseAuthentication.signInWithApple({
    skipNativeAuth: true,
  });
  const provider = new OAuthProvider('apple.com');
  const credential = provider.credential({
    idToken: result.credential?.idToken,
    rawNonce: result.credential?.nonce,
  });
  await signInWithCredential(auth, credential);

...I do not get the displayName back. Strangely, when I change this line...

 const result = await FirebaseAuthentication.signInWithApple();

...I get the displayName field and it's stored nicely in firebase but the authentication fails on what I'm guessing is the web layer because I get the error {"code":"auth/missing-or-invalid-nonce","customData":{"appName":"[DEFAULT]"},"name":"FirebaseError"} and the UI doesn't show them logged in.

I can 10000% reproduce this and also show you payloads from the response I get back from Apple. Unless there is something I'm missing I am doing everything as instructed.

Expected behavior

The displayName is returned the first time you attempt to login

Reproduction

https://github.com/tylerclark/sampleApp

Steps to reproduce

1. Sign in with Apple
2. Look for your displayName in the return payload

Other information

• Web works fine
• Android works fine
• Only iOS has issue

Capacitor doctor

Latest Dependencies:

  @capacitor/cli: 5.5.1
  @capacitor/core: 5.5.1
  @capacitor/android: 5.5.1
  @capacitor/ios: 5.5.1

Installed Dependencies:

  @capacitor/cli: 5.0.4
  @capacitor/core: 5.0.4
  @capacitor/android: 5.0.4
  @capacitor/ios: 5.0.4

[success] iOS looking great! 👌

Before submitting

• I understand that incomplete issues (e.g. without reproduction) are closed.

[tylerclark]

Like this comment on a similar issue I have a workaround that involves using the capacitor-community/apple-sign-in plugin to get givenName and familyName and just put it together.

  const { response } = await SignInWithApple.authorize({
    clientId: 'com.sample.app',
    redirectURI: 'https://sample.com/__/auth/handler',
    scopes: 'email name',
  });
  const provider = new OAuthProvider('apple.com');
  const credential = provider.credential({
    idToken: response.identityToken,
  });
  await signInWithCredential(auth, credential);
  const displayName = `${response.givenName} ${response.familyName}`;
  await updateProfile(result.user, { displayName });
  const userDocRef = doc(db, 'users', result.user.uid);
  await updateDoc(userDocRef, { name: displayName });

[robingenz]

If you use skipNativeAuth, then you will not be logged in with the Firebase SDK on the native layer. Therefore the display name is not automatically passed to Firebase. But the plugin still returns the display name:

import { FirebaseAuthentication } from '@capacitor-firebase/authentication';

const signInWithApple = async () => {
  const result = await FirebaseAuthentication.signInWithApple();
  console.log(result.user.displayName);
};

Then you can set it manually in Firebase via updateProfile(...).

[tylerclark]

@robingenz I might be confused on some things. I thought the point of this capacitor plugin was to allow for native looking dialogs to appear for authentication? I am not sure the benefit of native beyond that for my Ionic Vue app as I don't do anything else native. However, getting the name and email of the user is extremely important. If I have to append their name with a DB update and/or updateProfile(...) that's totally fine.

However, I will show you tomorrow on our call that the plugin does not return the display name unfortunately. I've been saving all the JSON outputs in various states. But I'm hoping it's user error!

[robingenz]

@tylerclark Good news! I tried again with skipNativeAuth and was able to reproduce the issue and fix it. I have released a new dev version:

npm i @capacitor-firebase/[email protected]

Feel free to give it a try. Please note that you still need to call updateProfile(...) to set the display name permanently.

[tylerclark]

@robingenz I've tested on iOS and verify it works. This is my code now:

const response: any = await FirebaseAuthentication.signInWithApple({
  skipNativeAuth: true,
});
const provider = new OAuthProvider('apple.com');
provider.addScope('email');
provider.addScope('name');
const credential = provider.credential({
  idToken: response.credential?.idToken,
  rawNonce: response.credential?.nonce,
});
const result = await signInWithCredential(auth, credential);

// Fix for Firestore user document and profile displayName aka updateProfile(...)
const displayName = response.user?.displayName;
if (displayName) httpsCallable(functions, 'updateUserCall')({ name: displayName });

[robingenz]

Great, thanks for testing! In this case I will merge the PR.