How to Add Social Login to Ionic Apps with Apple and Google

How to Add Social Login to Ionic Apps with Apple and Google

This tutorial shows how to add social login to Ionic apps with Apple and Google. Learn how to develop a mobile application with Ionic, add OIDC authentication, retrieve the user's information, and add social login with Apple and Google. I'll even show you how to test it in a phone simulator, as well as on your device.

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:

Create an Ionic App

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

npm i -g @ionic/[email protected]

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:
  • Authorization Code
  • 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Best Mobile App Development Services

Skenix is a most trusted Mobile App Development Company in India & USA with Expert Mobile App Developers that deliver top-notch Mobile App Development Services.

Top 10 Mobile App Development Companies in India

The mobile application scenario has been continually changing over the years. In recent years India has become a center for mobile app development companies. The increase of smartphones has instantly increased the requirements for these apps. Every year new technological trends occur due to contin

Hire Mobile App Developers in USA

AppClues Infotech is the best mobile app development company in New York that offers custom mobile app development & design services for Android and iOS.

Top Mobile App Developers & Leading App Development Companies in UK

Profusely examined top Mobile App Development companies in UK with ratings & reviews to help find the best Mobile App Development solution providers.