Copyright © nextbeat All Rights Reserved JavaScript で作成したモバイルアプリケーションから Auth0 の iOS / Android SDK を利用する Capacitor プラグインのご紹介 Auth0 by Okta Tech Meetup, 2023-11-16. 株式会社ネクストビート　溝上 友貴 The Capacitor plugin for using the Auth0 iOS and Android SDKs from mobile applications created in JavaScript

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 2 2020年　　　　　株式会社ネクストビート　新卒入社 2020年〜2022年　KIDSNAシッター、保育士バンク！コネクトの開発 2022年〜2023年　KIDSNAシッター　テックリード 2023年　　　　 　KIDSNAプラットフォームのID基盤担当 (ID platform) 　★今月11月、KIDSNA ID の Auth0 化をリリース 自己紹介 株式会社ネクストビート　プリンシパル 溝上 友貴 (Tomoki Mizogami) ★Auth0 implementation of KIDSNA ID released this November

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 3 子育てに関わるすべての人に多様な選択肢を提供するプラットフォーム ● KIDSNA プラットフォームで共通利用する KIDSNA ID の基盤に Auth0 を導入している 事例紹介: KIDSNA プラットフォーム KIDSNA platform is a service and action platform that provides diverse options for everyone involved in child rearing.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 4 保育施設経営者に向けたプラットフォームである保育士バンク！でも保護者向けのアプリを提供している ● 保育士バンク！コネクト　保護者アプリにおいても、KIDSNA ID を導入している 事例紹介: KIDSNA プラットフォーム KIDSNA platform is a service and action platform that provides diverse options for everyone involved in child rearing. 保護者向けアプリを提供 (KIDSNA ID)

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 5 以下の制約に基づいて認証基盤の開発を行なった ● 複数言語 (Scala / NestJS, Svelte / Angular), 複数プラットフォーム (Web / iOS / Android) の共通基盤 ○ Java SDK を利用する Scala アプリケーションで共通サービスを作成 ● 元々 Passwordless で作られていたので、Auth0 の Passwordless Connection に移行 事例紹介: KIDSNA プラットフォーム ID Scala, Angular (iOS, Android) Scala, Angular (Web) NestJS, SvelteKit (Web) Scala, auth0-java (共通サービス) Created an authentication service written in Scala using Java SDK for common use across multiple languages, frameworks (Scala / NestJS, Svelte / Angular) and platforms (Web / iOS / Android). And we introduced Passwordless Connection.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 6 ● Capacitor について ● Ionic & Capacitor アプリケーション用の SDK について ● Ionic & Capacitor アプリケーション用 SDK (Capacitor プラグイン) の作成 ● Capacitor プラグインを利用した認証機能の導入 ● まとめ アジェンダ Overview ● About Capacitor ● About Auth0 SDKs for Ionic and Capacitor applications ● Creating a capacitor plugin for Ionic and Capacitor applications to use Auth0 iOS and Android SDKs ● Introducing the capacitor plugin into your application

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 7 ● Capacitor は、Web アプリをネイティブアプリとして起動、開発するためのライブラリである ○ iOS、Android の WebView 上で Web アプリを実行する仕組み ○ Capacitor プラグインを用いて、iOS、Android 特有の機能を呼び出すことができる ● 弊社の以下のアプリも Capacitor で開発している ○ 保育士バンク！ (Svelte x Ionic & Capacitor) ○ 保育士バンク！コネクト (Angular x Ionic & Capacitor) ○ KIDSNA シッター (Angular x Ionic & Capacitor) Capacitor について Capacitor is a library for launching and developing web apps as native apps, and can invoke iOS- and Android-specific features using Capacitor plugins. Capacitor plugins can be used to invoke iOS- and Android-specific functions. We are also operating native applications using Capacitor.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 8 ● Auth0 には、Capacitor アプリケーション向けの SDK がいくつか用意されている Ionic & Capacitor アプリケーション用の SDK について Auth0 SDKs for native/mobile application https://auth0.com/docs/quickstart/native

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 9 About Auth0 SDKs for Ionic and Capacitor applications Using Auth0 SDK, a JavaScript framework, authorization URLs are displayed and callbacks are parsed using a combination of Capacitor plugins. ● JavaScript フレームワークの Auth0 SDK を利用し、認可 URL の表示、コールバックのパースに Capacitor プラグイ ンを組み合わせる形で実現している ○ Angular & React & Vue の SDK ■ 認可 URL の取得、コールバック URI の検証、ID Token の発行など ○ Browser プラグインで認可 URL を表示する ■ iOS: SFSafariViewController (端末ブラウザとセッションを 共有しない) ■ Android: ChromeCustomTabs ((端末ブラウザとセッションを 共有する) Ionic & Capacitor アプリケーション用の SDK について https://auth0.com/docs/quickstart/native/ionic-angular/interactive

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 10 Ionic & Capacitor アプリケーション用の SDK について https://auth0.com/docs/quickstart/native/ionic-angular/interactive ● JavaScript フレームワークの Auth0 SDK を利用し、認可 URL の表示、コールバックのパースに Capacitor プラグイ ンを組み合わせる形で実現している ○ App プラグイン ■ CustomURLScheme が開かれた場合にコールバック URI から code, state, error を解析する

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 11 Ionic & Capacitor アプリケーション用の SDK について 感じたこと ● Capacitor の良さはネイティブの機能を JavaScript から利用できることである ● せっかく Capacitor 使っているのに、ネイティブ (iOS, Android) の SDK 使えないの勿体ない ● Browser プラグインだと SSO ができない & ASWebAuthenticationSession の Capacitor プラグインがない ○ ネイティブの SDK であれば SSO できる😃 ○ Capacitor プラグインでネイティブ SDK を呼び出せば、JavaScript フレームワークに依存しなくて良い 😃 Auth0.swift と Auth0.Android を JavaScript から利用する Capacitor プラグインを作成しよう One of benefits of using Capacitor is that native functionality can be used from JavaScript. It is a waste not to be able to use native (iOS, Android) SDKs even though we are using Capacitor. - If you use native SDK, you can use SSO 😃. - Capacitor plugin can call native SDKs, no need to depend on JavaScript framework 😃. I would like to create a Capacitor plugin to call Auth0.swift and Auth0.Android from JavaScript.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 12 ● Capacitor について ● Ionic & Capacitor アプリケーション用の SDK について ● Ionic & Capacitor アプリケーション用 SDK (Capacitor プラグイン) の作成 ● Capacitor プラグインを利用した認証機能の導入 ● まとめ アジェンダ Overview ● About Capacitor ● About Auth0 SDKs for Ionic and Capacitor applications ● Creating a capacitor plugin for Ionic and Capacitor applications to use Auth0 iOS and Android SDKs ● Introducing the capacitor plugin into our application

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 13 Auth0.swift、Auth0.Android を JavaScript から呼び出す Capacitor プラグインを作成していく Auth0.swift、Auth0.Android は以下の機能を持つ ● Web Auth: Web ベース認証 ○ ログイン、ログアウト ● Credentials Manager: 認証情報の管理 ○ アクセストークン、リフレッシュトークンなどの保持、更新、削除 ● Authentication API Client: Auth0 Authentication API のクライアント (今回は対象外) ● Management API Client (Users): Auth0 Management API のクライアント (今回は対象外) Auth0.swift、Auth0.Android の概要 Create a Capacitor plugin that calls Auth0.swift and Auth0.Android from JavaScript. Auth0.swift and Auth0.Android have the following features. [1] Web Auth: Web-based authentication (login, logout) [2] Credentials Manager: Authentication information management (access token retention, refresh token) [3] Authentication API Client: Auth0 Authentication API client (not included here) [4] Management API Client (Users): Auth0 Management API client (not included here)

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 14 capacitor-auth0: GitHub / npm 以下の要件を満たす Capacitor プラグインを作成した ● Web Auth ○ Auth0 SDK の WebAuth 機能を利用可能である ● Credentials Manager ○ WebAuth でログイン後、Credentials を保持する ○ アプリを再度開いた場合、保持した Credentials からユーザー情報にアクセスする ○ ログアウト後、Credentials を削除する Capacitor プラグインの作成 I have created a Capacitor plugin that meets the following requirements. [1] Web Auth: The WebAuth functionality of the Auth0 SDK is available. [2] Credentials Manager: Retain credentials after login with WebAuth. When the application is reopened, the user information is accessed from the credentials stored in the credentials manager.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 15 プラグインの作成はとても簡単で、コマンドを1つ呼び出すだけである Capacitor プラグインの作成 To create a capacitor plugin, run “npm init @capacitor/plugin@latest”

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 16 Capacitor プラグインは JavaScript オブジェクトとして Capacitor アプリから利用される インタフェースは src/definitions.ts に配置される ● load ○ Auth0 SDK の設定を初期化し、認証情報を読み込む ● WebAuth ○ login: ログインを実行する ○ logout: ログアウトを実行する ● Credentials Manager ○ isAuthenticated: 現在の認証状態を取得する ○ getUserInfo: Credentials を更新し、最新のユーザー情報を取得する Capacitor プラグインの作成 - インタフェース設計 A Capacitor plugin is used by Capacitor applications as a single JavaScript object. The interface is placed in src/definitions.ts.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 17 ライブラリ追加 ● Auth0.swift を Podfile, podspec に追加する Capacitor プラグインの作成 - プラグイン実装 (iOS) Plugin implementation (iOS): Add dependencies to a capacitor plugin.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 18 WebAuth の実装 ● login ○ Auth0.webAuth().start() を利用する ○ Credentials を保存する Capacitor プラグインの作成 - プラグイン実装 (iOS) Plugin implementation (iOS): WebAuth login

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 19 WebAuth の実装 ● logout ○ Auth0.webAuth().clearSession() を利用する ○ Credentials を削除する Capacitor プラグインの作成 - プラグイン実装 (iOS) Plugin implementation (iOS): WebAuth logout

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 20 Credentials Manager の実装 ● isAuthenticated ○ 認証済みかどうか ○ CredentialsManager.canRenew() を利用する ○ refresh_token を利用しない場合は hasValid() を利用する必要がある Capacitor プラグインの作成 - プラグイン実装 (iOS) Plugin implementation (iOS): Check whether a user is authenticated.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 21 Credentials Manager の実装 ● load / getUserInfo ○ アプリを再起動したときに認証情報を取得する ○ CredentialsManager.renew() を利用する Capacitor プラグインの作成 - プラグイン実装 (iOS) Plugin implementation (iOS): Renew credentials and get a current authenticated user.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 22 プラグインメソッドを登録する ● Auth0Plugin.xxx() と呼び出せるように紐付け処理が必要である ○ Auth0Plugin.m Capacitor プラグインの作成 - プラグイン実装 (iOS) Plugin implementation (iOS): Register plugin methods to a capacitor plugin.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 23 iOS とほぼ同様であるため、コードの紹介は省略する: GitHub ● ライブラリ追加 ○ Auth0.Android を build.gradle に追加する ● load ○ Auth0, SecureCredentialsManager 初期化 ● login ○ WebAuthProvider.login(auth0) を利用する ● logout ○ WebAuthProvider.logout(auth0) を利用する ● isAuthenticated ○ SecureCredentialsManager.hasValidCredentials() を利用する ● getUserInfo ○ SecureCredentialsManager.getCredentials() を利用する Capacitor プラグインの作成 - プラグイン実装 (Android) Plugin implementation (Android): Since the code is almost the same as that of iOS, introduction of the code is omitted.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 24 作成した Capacitor プラグインを利用し、認証機能を導入する手順 ● [1] Auth0 クライアントを作成する ● [2] capacitor-auth0 プラグインをインストールする ● [3] Android: Auth0 クライアントの設定を追加する ● [4] iOS: CustomURLScheme と、Auth0 クライアントの設定を追加する ● [5] Web: CapacitorAuth0.load() で Auth0 プラグインを初期化する How to use the Capacitor plugin created to implement the authentication functionality [1] Create an Auth0 client. [2] Install the capacitor-auth0 plugin. [3] Android: Add Auth0 client settings. [4] iOS: Add CustomURLScheme and Auth0 client settings. [5] Web: Initialize Auth0 plugin with CapacitorAuth0.load() method. Capacitor プラグインを利用した認証機能の導入

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 25 [1] Auth0 クライアントを作成する ● Auth0 Dashboard または terraform から作成する ○ Native アプリケーション (PKCE 利用) ○ コールバック URI (ログイン、ログアウト) に以下を設定する ■ iOS用: {YOUR_BUNDLE_IDENTIFIER}://{yourDomain}/ios/{YOUR_BUNDLE_IDENTIFIER}/callback ■ Android用: demo://{yourDomain}/android/{YOUR_APP_PACKAGE_NAME}/callback ○ 例 ■ com.github.taretmch.SampleApp://taretmch-dev.jp.auth0.com/ios/com.github.taretmch.SampleApp/callback ■ demo://taretmch-dev.jp.auth0.com/android/com.github.taretmch/callback [1] Create an Auth0 client Create an Auth0 client. The app type should be Native and callback URIs (login and logout) should be in the above format. Capacitor プラグインを利用した認証機能の導入

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 26 Capacitor プラグインを利用した認証機能の導入 [2] capacitor-auth0 プラグインをインストールする ● @taretmch/capacitor-auth0 ● Web アプリ build 後、iOS、Android アプリに Auth0 SDK をインストールする # Install plugin $ npm install @taretmch/capacitor-auth0 # Build web app $ npm run build # Copy web app asset to iOS and Android apps $ npx cap sync [2] Install the capacitor-auth0 plugin.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 27 [3] Android: プラグイン用の設定を追加する ● Auth0.Android 用の設定 ○ strings.xml に [1] で作成したクライアントのドメインとクライアント ID を設定する ○ build.gradle に manifestPlaceholders を追加する Capacitor プラグインを利用した認証機能の導入 {AUTH0_DOMAIN} {AUTH0_CLIENT_ID} android { ... defaultConfig { ... manifestPlaceholders = [ auth0Domain: "@string/com_auth0_domain", auth0Scheme: "demo" ] } } [3] Android: Add Auth0 client settings to res/values/strings.xml and android/app/build.gradle.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 28 [4] iOS: CustomURLScheme と、Auth0 クライアントの設定を追加する ● Auth0.swift 用の設定 ○ Info.plist に CustomURLScheme の設定を追加する ○ Auth0.plist を作成し、Auth0 クライアント情報を追加する Capacitor プラグインを利用した認証機能の導入 CFBundleURLTypes CFBundleURLSchemes ${PRODUCT_BUNDLE_IDENTIFIER} ClientId {AUTH0_CLIENT_ID} Domain {AUTH0_DOMAIN} [4] iOS: Add CustomURLScheme and Auth0 client settings to Info.plist and Auth0.plist.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 29 [5] Web: Auth0.load() で Auth0 プラグインを初期化する ● Auth0.load() メソッドを呼び出すとプラグインが初期化され、認証情報を取得できる Capacitor プラグインを利用した認証機能の導入 // Initialize plugin and load user from credentials manager Auth0.load().then(user => { // Handle user initialization ... }); [5] Web: Initialize Auth0 plugin with CapacitorAuth0.load() method.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 30 isAuthenticated() - 認証状態の取得 login() - WebAuth でのログインを実行する logout() - WebAuth でのログアウトを実行する getUserInfo - アクセストークンを更新し、現在のユーザー情報を取得する // true or false Auth0.isAuthenticated() Capacitor プラグインを利用した認証機能の導入 // Promise Auth0.login() // Promise Auth0.logout() // Promise Auth0.getUserInfo() Web: Examples of some method calls for authentication.

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 31 まとめ ● Auth0 には Native/Mobile アプリ、Ionic & Capacitor アプリ用の SDK がいくつか用意されている ● Auth0 のサイトでは、JavaScript SDK をメインに利用する方法が紹介されている ● iOS、Android の SDK を JavaScript から利用する Capacitor プラグインを作成した ○ iOS、Android の SDK で得られる体験を Capacitor アプリで利用できるようにした ○ JavaScript フレームワークによらず iOS、Android に Auth0 を導入できるようにした ○ GitHub ○ npm (まだ beta バージョン) ● 今後の展望 ○ アクセストークン、リフレッシュトークンの管理機能を追加したい ○ IDToken から取得するユーザー情報を増やしたい ○ リポジトリ管理を capacitor-community に移動してみたい [Summary] The Auth0 site shows how to use the JavaScript SDK mainly for Ionic & Capacitor apps. This time, we created a Capacitor plugin to use the iOS and Android SDKs from JavaScript. This allows Capacitor apps to use the experience provided by the iOS and Android SDKs. Also, Auth0 can be introduced to iOS and Android without JavaScript framework. [Future Prospects] We would like to add management functions for access tokens and refresh tokens. We would also like to increase the amount of user information obtained from IDToken. We would also like to move repository management to capacitor-community team.