How To Add Sign In With Apple In Ionic 3

Ionic Native
1

Hi,
Anybody knows how i can add “Sign In With Apple” in ionic 3 ios application as apple is rejecting apps having any third party login but not having “Sign In With Apple”.

2 Likes
2

Firebase has that option. https://firebase.googleblog.com/2019/11/sign-in-with-apple-auth.html

1 Like
3

You can use this plugin:

Usage:
declare var cordova: any;

cordova.plugins.SignInWithApple.signin(
null,
(appleLoginResponse: any) => {
console.log( appleLoginResponse )
this.signInFirebaseApple( appleLoginResponse )
},
(err: any) => {
console.error(err)
console.log(JSON.stringify(err))
}
)

3 Likes
4

Thanks, that workaround works well for now :tada: . I hope the Apple review will be good this time. :sweat_smile:

1 Like
5

Hi,

Please, could you help me, after install plugin, SignInWithApple not recognize.

Many Thanks

6

Show error like this, Property ‘SignInWithApple’ does not exist on type ‘CordovaPlugins’.

1 Like
7

Is it possible to force user to share his email address?

cordova.plugins.SignInWithApple.signin(
      { requestedScopes: [0, 1] },
      function(succ) {
        console.log(succ)
        alert(JSON.stringify(succ))
      },
      function(err){
        console.error(err)
        console.log(JSON.stringify(err))
      }
    )

I setted requested scopes to 0,1. 1 is email address but email is for me mandatory. User can optionally share the email during authentication process

Thanks
L

8

@lsantaniello I think this not possible. Please refer to the plugins documentation: https://www.npmjs.com/package/cordova-plugin-sign-in-with-apple. Also check Apple’s officlal documentation about Apple Login: https://www.npmjs.com/package/cordova-plugin-sign-in-with-apple

1 Like
9

Works ! tks :slight_smile:

1 Like
10

There is a wrapper available for Apple Signin at https://www.npmjs.com/package/@ionic-native/sign-in-with-apple

$ ionic cordova plugin add cordova-plugin-sign-in-with-apple
$ npm install @ionic-native/sign-in-with-apple

if (this.platform.is('ios')) {

        const appleCredential: AppleSignInResponse = await SignInWithApple.signin({
          requestedScopes: [
            ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName,
            ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail
          ]
        });

         // If you're using firebase authentication
        /* const credential = new firebase.auth.OAuthProvider('apple.com').credential(
          appleCredential.identityToken
        );
        this.afAuth.auth.signInWithCredential(credential)
          .then((res) => {
            console.log('Login successful', res);
          })
          .catch((error) => {
            console.log(error);
          }); */
    
    }
2 Likes
11

I just created a medium article explaning how! :slight_smile: feel free to have a look

1 Like
12

Hello,

Hii…I am using ionic 3.19.0 and want to install @ionic-native/sign-in-with-apple@4 but it is saying no version found for that.

I have also used this but getting error like cordova.plugins not found.Please guide me.

13

my implementation for login with Apple ID works well with me ionic 3 using the fat function to call API out of scope succ function stackoverflow solution.

14

I’m facing the same problem before. But then after a lot of researches, I found that exactly sign in apple do not have wrapper with version 5.15 and below. Here is the link;

And if I still running with version 5.16 (because some people advice to use the lowest version), another error come out just like the image below

image

Thus, I found that ionic 3 is not compatible with wrapper below than version 5/the plugin is only for ionic 4 and above. Here is the link;

So then, I solved this by only using the cordova plugin directly. Without using wrapper. You can try refer to this;

Just add the cordova plugin, and copy paste the usage inside your function. In my case, it worked perfectly without window infront. Just directly to the cordova.plugin and so on. But please make sure, run this on device. In my case in emulator also not work. Good luck.