Apple announced a Sign in with Apple service at its WWDC developer conference in June 2019. If you're familiar with social login with Google or Facebook, it's very similar. Most of these identity services use OAuth and OpenID Connect (OIDC), and Apple's implementation is similar.

Today I'd like to show you how to develop a mobile application with Ionic, add OIDC authentication, retrieve the user's information, and add social login (aka federated identity) with Apple and Google. I'll even show you how to test it in a phone simulator, as well as on your device.

Prerequisites:

To begin, you'll need to install the Ionic CLI.

npm i -g @ionic/cli@6.11.0

Then, use ionic start to create a new Angular app with tabs. You might notice this command also specifies Capacitor. Using Capacitor is the recommended way to run Ionic apps on mobile devices from 2020 onward.

ionic start ionic-social tabs --type angular --capacitor
cd ionic-social

Run ionic serve and make sure you can see the app in your browser.

The easiest way to add OIDC authentication to an Ionic app is with OktaDev Schematics. Before I show you how to do that, you'll need to create an Okta developer account and register your app to get a client ID. Head on over to developer.okta.com/signup if you'd like to do this in your browser.

If you prefer the command line, install the Okta CLI. Run okta register to sign up for a new account.

Log in to your Okta Developer account or use okta apps create. If you use your browser, go to Applications > Add Application.

On the Create New Application page, select Native. Name your app Ionic Social, and configure it as follows:

• Login redirect URIs:
  • http://localhost:8100/callback
  • com.okta.dev-133337:/callback (where dev-133337.okta.com is your Okta Org URL)
• Logout redirect URIs:
  • http://localhost:8100/logout
  • com.okta.dev-133337:/logout
• Grant type allowed:
  • [x] Authorization Code
  • [x] Refresh Token
• Click Done

If you're using the command line, you'll have to use your browser to adjust the redirect URIs. Your app's settings should look similar to the screenshot below.

Run the following command to add a sign-in feature to your Ionic + Capacitor app.

ng add @oktadev/schematics@2.2.0 --platform=capacitor

Running this command will prompt you for an issuer and client ID. If you used your browser to create an app, the client ID is displayed on your screen. You can find the issuer in your Okta dashboard at API > Authorization Servers. It usually looks something like https://dev-133337.okta.com/oauth2/default.

If you used the CLI, you should have this information in your terminal. You can run okta apps to see your apps and okta apps config --app=<appName> to get your app's info.

This process will install several dependencies and a plethora of files to handle OIDC authentication.

✅️ Added 'ionic-appauth' into dependencies
✅️ Added '@ionic-native/secure-storage' into dependencies
✅️ Added 'cordova-plugin-secure-storage-echo' into dependencies
✅️ Added 'cordova-plugin-advanced-http' into dependencies
✅️ Added 'cordova-plugin-safariviewcontroller' into dependencies
✅️ Added '@ionic-native/http' into dependencies