Sign in with Apple ID => Ionic Support?

Ionic Framework ionic-v3
1

I have several Ionic 3 apps that I’m starting to get worried about. As you know, Apple is saying April 2020 will be the deadline to support “Sign in with Apple ID”. Is there a solution in-place?

I can’t seem to find much documentation on it. Thank you in advance.

2 Likes
2

I have the same concern, please help.

3

Yes there is… firebase has this. https://firebase.googleblog.com/2019/11/sign-in-with-apple-auth.html

1 Like
4

You can use this plugin:
https://www.npmjs.com/package/cordova-plugin-sign-in-with-apple

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))
}
)

5

Thanks Jay0, I’ll try it out.

6

Is this plugin working?

7

I have my app rejected by Apple because it has Google and Facebook logins and does not have Apple login. Tried this plugin but I am stuck with an error highlighting SignInWithApple on the function cordova.plugins.SignInWithApple.signin( ) saying “Property ‘SignInWithApple’ does not exist on type ‘CordovaPlugins’” I have declared cordova: any on the top of the page. Please assist. :frowning:

8

There is a similar topic created 9 hours before yours:

And there is an answer with the following plugin:

It seems most of us need some free and really working solution

9

Managed to get my Apple login to work. Here is what I have to do;

Added this line under the declarations;
import { GooglePlus } from ‘@ionic-native/google-plus’;

import { Facebook } from ‘@ionic-native/facebook’;

declare var cordova: any; //Add this line right below the imports

Then here is the function

doAppleLogin() {
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))
}
)
}

Please note: Test on simulator or ios device.

Thanks

Dave

2 Likes
10

Glad to help. :smiley:

11

Has anyone had success with passing the result to Firebase for authentication?
The only method they currently offer is a popup or native with a nonce passed to the credential as far as I can tell…

Any guidance would be appreciated.

2 Likes
12

you can use the coding here:

1 Like
13 
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { AuthNativeService } from 'src/app/services/auth.native.service';
import { Router } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore';
import { NavController, ToastController, Platform } from '@ionic/angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { Facebook } from '@ionic-native/facebook/ngx';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import * as firebase from 'firebase/app';
declare var SignInWithApple: any;
////////

async appleLogin() {
const appleUser = await SignInWithApple.request({
    requestedScopes: [ SignInWithApple.Scope.Email, SignInWithApple.Scope.FullName ],
  })
  var appleProvider = new firebase.auth.OAuthProvider('apple.com')
  await this.afAuth.auth.signInWithCredential(appleProvider.credential(appleUser.identityToken)).then(res => console.log(res, 'risposta auth'))
  this.router.navigate(["/tabs/home"]);
  }
  catch(error) { console.log("ERROR: " +error) };
}

That’s what worked for me. Hope it helps!

14

it’s working for me :smiley:

15

There is a nice tutorial in Medium that is working for me

16
17

it’s working but i want to call my login data service under success

cordova.plugins.SignInWithApple.signin(
        { requestedScopes: [0, 1] },
        function(succ){
          console.log('succ');
          console.log(succ);
          this.DService.AuthUser(succ).then((res :any) => { /* this is not working under this function */
            console.log('Result');
            console.log(res);
          });
      });

it’s giving me following error

ERROR: Unhandled Promise rejection: null is not an object (evaluating ‘this.DService’) ; Zone: ; Task: Promise.then ; Value: TypeError: null is not an object (evaluating ‘this.DService’)

can any one help on this?

18

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.

19

this code for ionic 4 we need it on ionic 3

20

this is worked for me atleast i get some token_id

{"email":"","authorizationCode":"xxxxxxxxxxxxx.nuqy.xxxxxxxxxx","state":"","identityToken":"xxxxxxxxxxxxx.eyJpc3MiOiJodHRwczovL2FwcGxlaWQuYXBwbGUuY29tIiwiYXVkIjoiYmUuZXRlbm9ubGluZS5ldGVub25saW5lLmFwcCIsImV4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANfaGFzaCI6ImRwdnROVFpDUHRRaXpCSk9NaE1DOEEiLCJlbWFpbCI6IjI2ZmY2cjZwNHpAcHJpdmF0ZXJlbGF5LmFwcGxlaWQuY29tIiwiZW1haWxfdmVyaWZpZWQiOiJ0cnVlIiwiaXNfcHJpdmF0ZV9lbWFpbCI6InRydWUiLCJhdXRoX3RpbWUiOjE2MDM1NDAxNzYsIm5vbmNlX3N1cHBvcnRlZCI6dHJ1ZX0.xxxxxxx-xxxxxxxxx-h7QRB6qj3GCi9bvKT_IG8BjVZD655jvcAdViaFn99o7qQZbl1YWIzaMkOjSqf1S8SrH6FnsQGiUuWb1_EDEFDET4robCGXjr0OH9zvb9s_KItUgRpN_6f3bMh8TOzL3biDn_UesBKe_XcLZV5xTRtm5ftpO94sEdNi6SIsrMiNV2RTBzhCLweqUsAlru5NDW-ZZZZZZZZZZZZZZZZZZZZZZZZZZZZ","fullName":{"nickname":"","phoneticRepresentation":{},"middleName":"","familyName":"","namePrefix":"","givenName":"","nameSuffix":""},"user":"XXXXXXXXXXXXXXXXX.1624"}

but what about getting information in backend ny authorization code ? i’m stuck searching 3 days

i followed this guid to generate client and secret id for my app identfier

now when i try to get more information in backend by authorization code i’m getting error invalid_grant
https://appleid.apple.com/auth/token
client_id
client_secret
code
grant_type authorization_code

any help is welcome
thanks by advance