How to Implement Apple Sign In with Ionic 5

Table of Contents

If you have ionic new or existing app implemented with 3rd party or social login on iOS like Facebook Login, Google Sign-In, Sign in with Twitter, Sign In with LinkedIn, Login with Amazon, or WeChat Login in your application, you should also offer the possibility for your users to login with Apple (As of April 2020, which is a new feature introduced with iOS 13), or Apple will reject your application.

The flow of this authentication process is mostly the same as with any other OAuth provider, which means it should be familiar.

So in this tutorial show step by step guide to implement Apple sign in with ionic 5

Apple App Configuration

We need to first set up Apple ID on apple developer account, you need an Apple App ID – either create a new or use your already existing ID.

Ionic Blank Instance

Create new project for sign in with apple using following command

ionic start Ionic5AppleSignIn blank --type angular

Added native plugin for sign in with apple

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

Now setup in project open app.module.ts and import and added in providers SignInWithApple

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouteReuseStrategy } from "@angular/router";

import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
import { StatusBar } from "@ionic-native/status-bar/ngx";
// IMPORT APPLE SIGN IN
import { SignInWithApple } from "@ionic-native/sign-in-with-apple/ngx";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    SignInWithApple,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Let's added button in login html page

<ion-header>
  <ion-toolbar>
    <ion-title>
      Apple Sign In Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <ion-button (click)="AppleSignIn()" color="light" expand="full" class="apple-login">
    <ion-icon expand="full" name="logo-apple" slot="start"></ion-icon>
    Sign in with Apple
  </ion-button>

</ion-content>

Added AppleSignIn function in login ts file

import { Component, OnInit } from "@angular/core";
import {
  SignInWithApple,
  ASAuthorizationAppleIDRequest,
  AppleSignInResponse,
  AppleSignInErrorResponse
} from "@ionic-native/sign-in-with-apple/ngx";
import { Platform } from "@ionic/angular";

@Component({
  selector: "app-login",
  templateUrl: "./login.component.html",
  styleUrls: ["./login.component.scss"]
})
export class LoginComponent implements OnInit {
  constructor(private signInWithApple: SignInWithApple) {}

  ngOnInit() {}

  AppleSignIn() {
    this.signInWithApple
      .signin({
        requestedScopes: [
          ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName,
          ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail
        ]
      })
      .then((res: AppleSignInResponse) => {
        console.log("Apple login success:- " + res);
      })
      .catch((error: AppleSignInErrorResponse) => {
        console.error(error);
      });
  }
}

Let's try to run

ionic cordova build ios

Embark on a journey of seamless app development – hire our Ionic experts and watch your ideas come to life effortlessly!

Xcode setup and Run app

Open Xcode, project we need navigate to Signing & Capabilities -> Add Capability, and from the list select Sign In with Apple.

Run on simulator

Finally see console log for result, In this result you get identityToken to use login.

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.