Introduce WebView in Capacitor SDK

example/capacitor/src/pages/Home.tsx

@@ -45,14 +45,17 @@ import authgearCapacitor, {
   BiometricAccessConstraintIOS,
   BiometricLAPolicy,
   BiometricAccessConstraintAndroid,
+  WebKitWebViewUIImplementation,
 } from "@authgear/capacitor";
 import {
   readClientID,
   readEndpoint,
   readIsSSOEnabled,
+  readUseWebKitWebView,
   writeClientID,
   writeEndpoint,
   writeIsSSOEnabled,
+  writeUseWebKitWebView,
 } from "../storage";
 
 import "./Home.css";
@@ -103,6 +106,9 @@ function AuthgearDemo() {
   const [isSSOEnabled, setIsSSOEnabled] = useState(() => {
     return readIsSSOEnabled();
   });
+  const [useWebKitWebView, setUseWebKitWebView] = useState<boolean>(() => {
+    return readUseWebKitWebView();
+  });
   const [biometricEnabled, setBiometricEnabled] = useState<boolean>(false);
 
   const [sessionState, setSessionState] = useState<SessionState | null>(() => {
@@ -188,6 +194,7 @@ function AuthgearDemo() {
       writeClientID(clientID);
       writeEndpoint(endpoint);
       writeIsSSOEnabled(isSSOEnabled);
+      writeUseWebKitWebView(useWebKitWebView);
 
       if (isPlatformWeb()) {
         await authgearWeb.configure({
@@ -203,6 +210,13 @@ function AuthgearDemo() {
           tokenStorage: useTransientTokenStorage
             ? new TransientTokenStorage()
             : new PersistentTokenStorage(),
+          uiImplementation: useWebKitWebView
+            ? new WebKitWebViewUIImplementation({
+                ios: {
+                  modalPresentationStyle: "fullScreen",
+                },
+              })
+            : undefined,
           isSSOEnabled,
         });
       }
@@ -216,6 +230,7 @@ function AuthgearDemo() {
     clientID,
     endpoint,
     isSSOEnabled,
+    useWebKitWebView,
     useTransientTokenStorage,
     postConfigure,
     showError,
@@ -494,6 +509,13 @@ function AuthgearDemo() {
     []
   );
 
+  const onChangeUseWebKitWebView = useCallback(
+    (e: IonToggleCustomEvent<ToggleChangeEventDetail<unknown>>) => {
+      setUseWebKitWebView(e.detail.checked);
+    },
+    []
+  );
+
   const onClickConfigure = useCallback(
     (e: MouseEvent<HTMLIonButtonElement>) => {
       e.preventDefault();
@@ -659,6 +681,13 @@ function AuthgearDemo() {
         >
           Is SSO Enabled
         </IonToggle>
+        <IonToggle
+          className="toggle"
+          checked={useWebKitWebView}
+          onIonChange={onChangeUseWebKitWebView}
+        >
+          Use WebKit WebView
+        </IonToggle>
         <div className="information">
           <IonLabel>Session State</IonLabel>
           <IonNote>{sessionState}</IonNote>

example/capacitor/src/storage.ts

@@ -16,6 +16,14 @@ export function readIsSSOEnabled(): boolean {
   return false;
 }
 
+export function readUseWebKitWebView(): boolean {
+  const str = window.localStorage.getItem("authgear.useWebKitWebView");
+  if (str === "true") {
+    return true;
+  }
+  return false;
+}
+
 export function writeClientID(clientID: string) {
   window.localStorage.setItem("authgear.clientID", clientID);
 }
@@ -27,3 +35,10 @@ export function writeEndpoint(endpoint: string) {
 export function writeIsSSOEnabled(isSSOEnabled: boolean) {
   window.localStorage.setItem("authgear.isSSOEnabled", String(isSSOEnabled));
 }
+
+export function writeUseWebKitWebView(useWebKitWebView: boolean) {
+  window.localStorage.setItem(
+    "authgear.useWebKitWebView",
+    String(useWebKitWebView)
+  );
+}

example/reactnative/src/screens/MainScreen.tsx

@@ -32,7 +32,7 @@ import authgear, {
   BiometricLAPolicy,
   BiometricAccessConstraintAndroid,
   SessionState,
-  PlatformWebView,
+  WebKitWebViewUIImplementation,
 } from '@authgear/react-native';
 import RadioGroup, {RadioGroupItemProps} from '../RadioGroup';
 
@@ -362,8 +362,8 @@ const HomeScreen: React.FC = () => {
         tokenStorage: useTransientTokenStorage
           ? new TransientTokenStorage()
           : new PersistentTokenStorage(),
-        webView: useWebKitWebView
-          ? new PlatformWebView({
+        uiImplementation: useWebKitWebView
+          ? new WebKitWebViewUIImplementation({
               ios: {
                 modalPresentationStyle: 'fullScreen',
               },

packages/authgear-capacitor/android/src/main/AndroidManifest.xml

@@ -16,6 +16,11 @@
             android:launchMode="singleTask"
             android:theme="@style/AuthgearTheme"
             android:configChanges="orientation|screenSize"/>
+        <activity android:name=".WebKitWebViewActivity"
+            android:exported="false"
+            android:launchMode="singleTask"
+            android:theme="@style/AuthgearTheme"
+            android:configChanges="orientation|screenSize"/>
     </application>
 
     <!-- Android 11 requires the app to define which external apps are visiable -->

packages/authgear-capacitor/android/src/main/java/com/authgear/capacitor/AuthgearPlugin.java

@@ -3,6 +3,7 @@
 import android.app.Activity;
 import android.content.Context;
 import android.content.Intent;
+import android.graphics.Color;
 import android.net.Uri;
 
 import androidx.activity.result.ActivityResult;
@@ -154,6 +155,37 @@ private void handleOpenAuthorizeURL(PluginCall call, ActivityResult activityResu
         }
     }
 
+    @PluginMethod
+    public void openAuthorizeURLWithWebView(PluginCall call) {
+        Uri url = Uri.parse(call.getString("url"));
+        Uri redirectURI = Uri.parse(call.getString("redirectURI"));
+        Integer actionBarBackgroundColor = this.readColorInt(call, "actionBarBackgroundColor");
+        Integer actionBarButtonTintColor = this.readColorInt(call, "actionBarButtonTintColor");
+        WebKitWebViewActivity.Options webViewOptions = new WebKitWebViewActivity.Options();
+        webViewOptions.url = url;
+        webViewOptions.redirectURI = redirectURI;
+        webViewOptions.actionBarBackgroundColor = actionBarBackgroundColor;
+        webViewOptions.actionBarButtonTintColor = actionBarButtonTintColor;
+
+        Context ctx = this.getContext();
+        Intent intent = WebKitWebViewActivity.createIntent(ctx, webViewOptions);
+        this.startActivityForResult(call, intent, "handleOpenAuthorizeURLWithWebView");
+    }
+
+    @ActivityCallback
+    private void handleOpenAuthorizeURLWithWebView(PluginCall call, ActivityResult activityResult) {
+        int resultCode= activityResult.getResultCode();
+        if (resultCode == Activity.RESULT_CANCELED) {
+            this.rejectWithCancel(call);
+        }
+        if (resultCode == Activity.RESULT_OK) {
+            String redirectURI = activityResult.getData().getData().toString();
+            JSObject ret = new JSObject();
+            ret.put("redirectURI", redirectURI);
+            call.resolve(ret);
+        }
+    }
+
     @PluginMethod
     public void openURL(PluginCall call) {
         String urlString = call.getString("url");
@@ -398,6 +430,19 @@ private String errorCodeToString(int errorCode) {
         }
     }
 
+    private Integer readColorInt(PluginCall call, String key) {
+        if (call.hasOption(key)) {
+            String s = call.getString(key);
+            long l = Long.parseLong(s, 16);
+            int a = (int) ((l >> 24) & 0xff);
+            int r = (int) ((l >> 16) & 0xff);
+            int g = (int) ((l >> 8) &0xff);
+            int b = (int) (l & 0xff);
+            return Color.argb(a, r, g, b);
+        }
+        return null;
+    }
+
     private void reject(PluginCall call, Exception e) {
         call.reject(e.getMessage(), e.getClass().getName(), e);
     }