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.

Table of Contents

• Create an Ionic App
• Add Authentication with OpenID Connect
• Configure Sign in with Apple
• What about Okta’s Angular SDK and Sign-In Widget?
• Create a Custom Domain and TLS Certificate with Cloudflare
• Add Social Login with Google
• Run Your Ionic App in iOS Simulator
• Deploy Ionic App to iOS Phone
• Learn More about Ionic and Social Login

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:

• Node 12+
• A sense of adventure

Create an Ionic App

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.

Add Authentication with OpenID Connect

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 --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
🔍 Installing packages...
CREATE src/app/auth/auth-guard.service.ts (988 bytes)
CREATE src/app/auth/auth-http.service.ts (826 bytes)
CREATE src/app/auth/auth.module.ts (760 bytes)
CREATE src/app/auth/auth.service.ts (2316 bytes)
CREATE src/app/auth/ng-http.service.ts (1347 bytes)
CREATE src/app/auth/user-info.model.ts (188 bytes)
CREATE src/app/auth/auth-callback/auth-callback.module.ts (574 bytes)
CREATE src/app/auth/auth-callback/auth-callback.page.ts (1018 bytes)
CREATE src/app/auth/end-session/end-session.module.ts (564 bytes)
CREATE src/app/auth/end-session/end-session.page.ts (479 bytes)
CREATE src/app/auth/factories/browser.factory.ts (290 bytes)
CREATE src/app/auth/factories/http.factory.ts (379 bytes)
CREATE src/app/auth/factories/index.ts (102 bytes)
CREATE src/app/auth/factories/storage.factory.ts (318 bytes)
CREATE src/app/login/login.module.ts (538 bytes)
CREATE src/app/login/login.page.html (187 bytes)
CREATE src/app/login/login.page.scss (0 bytes)
CREATE src/app/login/login.page.spec.ts (936 bytes)
CREATE src/app/login/login.page.ts (750 bytes)
UPDATE src/app/app.module.ts (899 bytes)
UPDATE package.json (1929 bytes)
UPDATE src/app/app-routing.module.ts (660 bytes)
UPDATE src/app/app.component.spec.ts (1308 bytes)
UPDATE src/app/app.component.ts (674 bytes)
UPDATE src/app/tab1/tab1.page.html (2237 bytes)
UPDATE src/app/tab1/tab1.page.spec.ts (928 bytes)
UPDATE src/app/tab1/tab1.page.ts (1216 bytes)
✔ Packages installed successfully.

You can see all the files that OktaDev Schematic adds in its GitHub project.

#ionic #google #apple #web-development #mobile-apps