Sign In With Apple - Ionic 3

Viewed 1462

Am trying to implement sign in with apple on my ionic 3 project using the following plugin and wrapper

ionic cordova plugin add cordova-plugin-sign-in-with-apple
npm i --save @ionic-native/sign-in-with-apple

Implementation as described on the plugin docs


import { SignInWithApple, AppleSignInResponse, AppleSignInErrorResponse, ASAuthorizationAppleIDRequest } from '@ionic-native/sign-in-with-apple/ngx';


  constructor(private signInWithApple: SignInWithApple) { }


    this.signInWithApple.signin({
      requestedScopes: [
        ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName,
        ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail
      ]
    })
    .then((res: AppleSignInResponse) => {
      // https://developer.apple.com/documentation/signinwithapplerestapi/verifying_a_user
      alert('Send token to apple for verification: ' + res.identityToken);
      console.log(res);
    })
    .catch((error: AppleSignInErrorResponse) => {
      alert(error.code + ' ' + error.localizedDescription);
      console.error(error);
    });

The following error is thrown during cordova ios build process

typescript: node_modules/@ionic-native/sign-in-with-apple/ngx/index.d.ts, line: 6 
        Initializers are not allowed in ambient contexts. 

   L5:  export declare class ASAuthorizationAppleIDRequest {
   L6:      static readonly ASAuthorizationScopeFullName = 0;
   L7:      static readonly ASAuthorizationScopeEmail = 1;

Any help would be appreciated, thanks

tsc -v 
Version 3.8.3
4 Answers

this work for me:

  1. install:

ionic cordova plugin add https://github.com/twogate/cordova-plugin-sign-in-with-apple.git

  1. declare var in your component

declare var cordova:any; // global

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

I hope this solution can help someone.

IMPORTANT --> Test in device

I tried your solution and faced the same issues with me.

my implementation for login with Apple ID works well with me ionic 3.

ionic cordova plugin add cordova-plugin-sign-in-with-apple

//before @component add declare var cordova: any;

        async loginWithAppleID() {
        await cordova.plugins.SignInWithApple.signin(
          {requestedScopes: [0, 1]},
          (succ) => {
            //get email and full name from Apple ID
            console.log(succ)
            let userData = {
              name: succ.fullName.givenName + ' ' + succ.fullName.familyName,
              email: succ.email,
            };
    // this.AuthApi;
          },
          (err) => {
            console.error(err)
            console.log(JSON.stringify(err))
          }
        )
      }

I was getting the same error.

The error comes from the small changes in this commit.

Using the version before that commit solved the problem for me. If you're ok with reverting to a previous version, try this:

npm install @ionic-native/sign-in-with-apple@5.16.0

After that ionic build should succeed. Good luck!

Got this error while trying to implement apple sign in for my Ionic3 app. Adding sign-in-with-apple@5.16.0 did not address the issue. Tried below option and ionic build was successful.

Add skipLibCheck so that it will skip type checking of all declaration files (*.d.ts) on compilation.

Example:

{
  "compilerOptions": {
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "typeRoots": ["node_modules/@types"],
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl":  "./src",
    "paths": {
      "@environment": ["config/config.prod"]
    }
  },
  "include": [
...
...
Related