feat: add oauth support to react native signer

account-kit/rn-signer/example/metro.config.js

@@ -1,8 +1,5 @@
 const path = require("path");
 const { getDefaultConfig } = require("@react-native/metro-config");
-const { getConfig } = require("react-native-builder-bob/metro-config");
-const pkg = require("../package.json");
-
 const rnSignerRoot = path.resolve(__dirname, "..");
 const projectRoot = __dirname;
 // handles the hoisted modules

account-kit/rn-signer/example/package.json

@@ -21,6 +21,7 @@
     "react-native": "0.76.5",
     "react-native-config": "1.5.3",
     "react-native-gesture-handler": "2.21.2",
+    "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-mmkv": "3.1.0",
     "react-native-safe-area-context": "4.14.0",
     "react-native-screens": "4.2.0",

account-kit/rn-signer/example/src/App.tsx

@@ -6,6 +6,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import OtpAuthScreen from "./screens/otp-auth";
 import MagicLinkAuthScreen from "./screens/magic-link-auth";
+import OauthScreen from "./screens/oauth";
 
 const linking = {
   enabled: "auto" as const /* Automatically generate paths for all screens */,
@@ -31,6 +32,14 @@ const RootStack = createBottomTabNavigator({
         tabBarIcon: () => <Text>🔑</Text>,
       },
     },
+    OAuth: {
+      screen: OauthScreen,
+      linking: { path: "oauth" },
+      options: {
+        tabBarLabel: "Oauth",
+        tabBarIcon: () => <Text>🔐</Text>,
+      },
+    },
   },
 });
 

account-kit/rn-signer/example/src/screens/magic-link-auth.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable import/extensions */
-import { RNAlchemySigner } from "@account-kit/react-native-signer";
 import type { User } from "@account-kit/signer";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   Linking,
   StyleSheet,
@@ -10,13 +9,10 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import Config from "react-native-config";
 
-export default function MagicLinkAuthScreen() {
-  const signer = RNAlchemySigner({
-    client: { connection: { apiKey: Config.API_KEY! } },
-  });
+import signer from "../signer";
 
+export default function MagicLinkAuthScreen() {
   const [email, setEmail] = useState<string>("");
   const [user, setUser] = useState<User | null>(null);
 
@@ -30,7 +26,7 @@ export default function MagicLinkAuthScreen() {
       .catch(console.error);
   };
 
-  const handleIncomingURL = (event: { url: string }) => {
+  const handleIncomingURL = useCallback((event: { url: string }) => {
     const regex = /[?&]([^=#]+)=([^&#]*)/g;
 
     let params: Record<string, string> = {};
@@ -49,7 +45,7 @@ export default function MagicLinkAuthScreen() {
     handleUserAuth({
       bundle: params.bundle ?? "",
     });
-  };
+  }, []);
 
   useEffect(() => {
     // get the user if already logged in
@@ -61,7 +57,7 @@ export default function MagicLinkAuthScreen() {
     const subscription = Linking.addEventListener("url", handleIncomingURL);
 
     return () => subscription.remove();
-  }, []);
+  }, [handleIncomingURL]);
 
   return (
     <View style={styles.container}>

account-kit/rn-signer/example/src/screens/oauth.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable import/extensions */
+import type { User } from "@account-kit/signer";
+import { useEffect, useState } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+
+import signer from "../signer";
+
+export default function OAuthScreen() {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    // get the user if already logged in
+    signer.getAuthDetails().then(setUser);
+    signer.preparePopupOauth();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      {!user ? (
+        <>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => {
+              signer
+                .authenticate({
+                  type: "oauth",
+                  mode: "redirect",
+                  authProviderId: "google",
+                  redirectUrl: "rn-signer-demo://oauth",
+                })
+                .then((user) => {
+                  // Get user details after a successful authentication
+                  setUser(user);
+                })
+                .catch(console.error);
+            }}
+          >
+            <Text style={styles.buttonText}>Sign in with OAuth</Text>
+          </TouchableOpacity>
+        </>
+      ) : (
+        <>
+          <Text style={styles.userText}>
+            Currently logged in as: {user.email}
+          </Text>
+          <Text style={styles.userText}>OrgId: {user.orgId}</Text>
+          <Text style={styles.userText}>Address: {user.address}</Text>
+
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => signer.disconnect().then(() => setUser(null))}
+          >
+            <Text style={styles.buttonText}>Sign out</Text>
+          </TouchableOpacity>
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#FFFFF",
+    paddingHorizontal: 20,
+  },
+  textInput: {
+    width: "100%",
+    height: 40,
+    borderColor: "gray",
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    backgroundColor: "rgba(0,0,0,0.05)",
+    marginTop: 20,
+    marginBottom: 10,
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+  button: {
+    width: 200,
+    padding: 10,
+    height: 50,
+    backgroundColor: "rgb(147, 197, 253)",
+    borderRadius: 5,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 20,
+  },
+  buttonText: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  userText: {
+    marginBottom: 10,
+    fontSize: 18,
+  },
+});

account-kit/rn-signer/example/src/screens/otp-auth.tsx

@@ -9,12 +9,7 @@ import {
   TouchableOpacity,
 } from "react-native";
 
-import Config from "react-native-config";
-import { RNAlchemySigner } from "@account-kit/react-native-signer";
-
-const signer = RNAlchemySigner({
-  client: { connection: { apiKey: Config.API_KEY! } },
-});
+import signer from "../signer";
 
 export default function OTPAuthScreen() {
   const [email, setEmail] = useState<string>("");

account-kit/rn-signer/example/src/signer.ts

@@ -0,0 +1,10 @@
+import { RNAlchemySigner } from "@account-kit/react-native-signer";
+import Config from "react-native-config";
+
+const signer = RNAlchemySigner({
+  client: {
+    connection: { apiKey: Config.API_KEY! },
+  },
+});
+
+export default signer;

account-kit/rn-signer/package.json

@@ -79,6 +79,7 @@
     "react": "18.3.1",
     "react-native": "0.76.5",
     "react-native-builder-bob": "^0.30.3",
+    "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-mmkv": "^3.1.0",
     "release-it": "^15.0.0",
     "turbo": "^1.10.7",
@@ -93,6 +94,7 @@
     "react-native": "*",
     "react-native-config": "1.5.3",
     "react-native-gesture-handler": "2.21.2",
+    "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-mmkv": "^3.1.0"
   },
   "jest": {