:feat add passport react context and hooks

examples/passport/identity-with-nextjs/src/app/logout/page.tsx

@@ -12,6 +12,15 @@ export default function Logout() {
         >
           Return to examples
         </a>
+        <b> OR </b>
+        <a
+          className="underline"
+          href="/use-context"
+        >
+          Return to examples using
+          {' '}
+          <pre>passport.PassportProvider</pre>
+        </a>
       </div>
     </div>
   );

examples/passport/identity-with-nextjs/src/app/use-context/layout.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { PassportProvider } from '@/context/passport2';
+import { ReactNode } from 'react';
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <PassportProvider>{children}</PassportProvider>
+  );
+}

examples/passport/identity-with-nextjs/src/app/use-context/page.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { passport } from '@imtbl/sdk';
+
+export default function Page() {
+  const {
+    login, loginWithEthersjs, loginWithoutWallet, logout,
+  } = passport.usePassport();
+  const { idToken } = passport.useIdToken();
+  const { accessToken } = passport.useAccessToken();
+  const { linkedAddresses } = passport.useLinkedAddresses();
+  const { userInfo } = passport.useUserInfo();
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen p-8">
+      <h1 className="text-3xl font-bold mb-8">Passport Identity Examples</h1>
+      <div className="grid grid-cols-1 gap-4 text-center">
+        <div>
+          <p className="mb-2">
+            <b>Access Token:</b>
+            {' '}
+            {accessToken}
+          </p>
+          <p className="mb-2">
+            <b>ID Token:</b>
+            {' '}
+            {idToken}
+          </p>
+          <p className="mb-2">
+            <b>Linked Addresses:</b>
+            {' '}
+            {linkedAddresses}
+          </p>
+          <p className="mb-2">
+            <b>User Info:</b>
+            {' '}
+            {JSON.stringify(userInfo, null, 2)}
+          </p>
+        </div>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={login}
+          type="button"
+        >
+          Login
+        </button>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={loginWithoutWallet}
+          type="button"
+        >
+          Login Without Wallet
+        </button>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={loginWithEthersjs}
+          type="button"
+        >
+          Login With EtherJS
+        </button>
+        <button
+          className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800"
+          onClick={logout}
+          type="button"
+        >
+          Logout
+        </button>
+      </div>
+    </div>
+  );
+}

examples/passport/identity-with-nextjs/src/context/passport2.tsx

@@ -0,0 +1,22 @@
+import { config, passport } from '@imtbl/sdk';
+import { ReactNode } from 'react';
+
+export function PassportProvider({ children }: { children: ReactNode }) {
+  return (
+    <passport.PassportProvider
+      config={{
+        baseConfig: {
+          environment: config.Environment.SANDBOX, // or config.Environment.SANDBOX
+          publishableKey: process.env.NEXT_PUBLIC_PUBLISHABLE_KEY || '<YOUR_PUBLISHABLE_KEY>', // replace with your publishable API key from Hub
+        },
+        clientId: process.env.NEXT_PUBLIC_CLIENT_ID || '<YOUR_CLIENT_ID>', // replace with your client ID from Hub
+        redirectUri: 'http://localhost:3000/redirect', // replace with one of your redirect URIs from Hub
+        logoutRedirectUri: 'http://localhost:3000/logout', // replace with one of your logout URIs from Hub
+        audience: 'platform_api',
+        scope: 'openid offline_access email transact',
+      }}
+    >
+      {children}
+    </passport.PassportProvider>
+  );
+}

package.json

@@ -106,4 +106,4 @@
       "tests/**"
     ]
   }
-}
+}

packages/passport/sdk/.eslintrc

@@ -6,6 +6,7 @@
     "tsconfigRootDir": "."
   },
   "rules": {
+    "react/react-in-jsx-scope": ["off"],
     "@typescript-eslint/naming-convention": [
       "error",
       {

packages/passport/sdk/src/index.ts

@@ -24,3 +24,13 @@ export {
   DeviceConnectResponse,
   DeviceTokenResponse,
 } from './types';
+
+export {
+  PassportProvider,
+  useAccessToken,
+  useIdToken,
+  useLinkedAddresses,
+  usePassport,
+  useUserInfo,
+  useAccounts,
+} from './react/PassportContext';

packages/passport/sdk/src/react/PassportContext.tsx

@@ -0,0 +1,242 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import React, {
+  createContext, useContext, useEffect, useMemo,
+  useState,
+} from 'react';
+import { Web3Provider } from '@ethersproject/providers';
+import { Passport } from '../Passport';
+import { PassportModuleConfiguration, UserProfile } from '../types';
+
+type PassportContextType = {
+  passportInstance: Passport;
+  isLoggedIn: boolean;
+  login: () => Promise<string[]>;
+  logout: () => Promise<void>;
+  loginWithoutWallet: () => Promise<UserProfile | null>;
+  loginWithEthersjs: () => Promise<{ accounts: string[], provider: Web3Provider | null }>;
+  isLoading: boolean;
+  error: Error | null;
+  accounts: string[];
+};
+
+const PassportContext = createContext<PassportContextType>({
+  passportInstance: {} as Passport,
+  isLoggedIn: false,
+  login: () => { throw new Error('login must be used within a PassportProvider'); },
+  logout: () => { throw new Error('logout must be used within a PassportProvider'); },
+  loginWithoutWallet: () => { throw new Error('loginWithoutWallet must be used within a PassportProvider'); },
+  loginWithEthersjs: () => { throw new Error('loginWithEthersjs must be used within a PassportProvider'); },
+  isLoading: false,
+  error: null,
+  accounts: [],
+});
+
+type PassportProviderProps = {
+  config: PassportModuleConfiguration;
+  children: React.ReactNode;
+};
+
+export function PassportProvider({ children, config }: PassportProviderProps) {
+  const [isLoggedIn, setLoggedIn] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [accounts, setAccounts] = useState<string[]>([]);
+  const [error, setError] = useState<Error | null>(null);
+  const passportInstance = new Passport(config);
+  const v = useMemo(() => ({
+    passportInstance,
+    isLoggedIn,
+    isLoading,
+    accounts,
+    error,
+    login: async () => {
+      try {
+        setError(null);
+        setIsLoading(true);
+        const provider = passportInstance.connectEvm();
+        const acc = await provider.request({ method: 'eth_requestAccounts' });
+        setLoggedIn(true);
+        setAccounts(acc);
+        return accounts;
+      } catch (e: any) {
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+      return [];
+    },
+    logout: async () => {
+      try {
+        setError(null);
+        setIsLoading(true);
+        await passportInstance.logout();
+        setLoggedIn(false);
+        setAccounts([]);
+      } catch (e: any) {
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    loginWithoutWallet: async () => {
+      try {
+        setError(null);
+        setIsLoading(true);
+        const profile = await passportInstance.login();
+        setLoggedIn(true);
+        return profile;
+      } catch (e: any) {
+        setError(e);
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    loginWithEthersjs: async () => {
+      try {
+        setError(null);
+        setIsLoading(true);
+        // eslint-disable-next-line new-cap
+        const provider = new Web3Provider(passportInstance.connectEvm());
+        const acc = await provider.send('eth_requestAccounts', []);
+        setLoggedIn(true);
+        return { accounts: acc, provider };
+      } catch (e: any) {
+        setError(e);
+        return { accounts: [], provider: null };
+      } finally {
+        setIsLoading(false);
+      }
+    },
+  }), [config, isLoggedIn]);
+
+  return (
+    <PassportContext.Provider value={v}>
+      {children}
+    </PassportContext.Provider>
+  );
+}
+
+export function usePassport() {
+  const c = useContext(PassportContext);
+  if (!c) {
+    throw new Error('usePassport must be used within a PassportProvider');
+  }
+  return c;
+}
+
+export function useIdToken() {
+  const { passportInstance, isLoading, isLoggedIn } = usePassport();
+  const [idToken, setIdToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const getIdToken = () => {
+    if (isLoggedIn) {
+      setLoading(true);
+      passportInstance
+        .getIdToken()
+        .then((t) => setIdToken(t || null))
+        .catch((e) => setError(e))
+        .finally(() => setLoading(false));
+    } else {
+      setIdToken(null);
+    }
+
+    return () => {
+      setIdToken(null);
+    };
+  };
+  useEffect(getIdToken, [passportInstance, isLoggedIn]);
+  return {
+    idToken, isLoading: isLoading || loading, error, refetch: getIdToken,
+  };
+}
+
+export function useAccessToken() {
+  const { passportInstance, isLoading, isLoggedIn } = usePassport();
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const getAccessToken = () => {
+    if (isLoggedIn) {
+      setLoading(true);
+      passportInstance
+        .getAccessToken()
+        .then((t) => setAccessToken(t || null))
+        .catch((e) => setError(e))
+        .finally(() => setLoading(false));
+    } else {
+      setAccessToken(null);
+    }
+
+    return () => {
+      setAccessToken(null);
+    };
+  };
+  useEffect(getAccessToken, [passportInstance, isLoggedIn]);
+  return {
+    accessToken, isLoading: isLoading || loading, error, refetch: getAccessToken,
+  };
+}
+
+export function useLinkedAddresses() {
+  const { passportInstance, isLoading, isLoggedIn } = usePassport();
+  const [linkedAddresses, setLinkedAddresses] = useState<string[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const getLinkedAddresses = () => {
+    if (isLoggedIn) {
+      setLoading(true);
+      passportInstance
+        .getLinkedAddresses()
+        .then((t) => setLinkedAddresses(t || null))
+        .catch((e) => setError(e))
+        .finally(() => setLoading(false));
+    } else {
+      setLinkedAddresses(null);
+    }
+
+    return () => {
+      setLinkedAddresses(null);
+    };
+  };
+  useEffect(getLinkedAddresses, [passportInstance, isLoggedIn]);
+  return {
+    linkedAddresses, isLoading: isLoading || loading, error, refetch: getLinkedAddresses,
+  };
+}
+
+export function useUserInfo() {
+  const { passportInstance, isLoading, isLoggedIn } = usePassport();
+  const [userInfo, setUserInfo] = useState<Record<string, unknown> | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const getUserInfo = () => {
+    if (isLoggedIn) {
+      setLoading(true);
+      passportInstance
+        .getUserInfo()
+        .then((t) => setUserInfo(t || null))
+        .catch((e) => setError(e))
+        .finally(() => setLoading(false));
+    } else {
+      setUserInfo(null);
+    }
+
+    return () => {
+      setUserInfo(null);
+    };
+  };
+  useEffect(getUserInfo, [passportInstance, isLoggedIn]);
+  return {
+    userInfo, isLoading: isLoading || loading, error, refetch: getUserInfo,
+  };
+}
+
+export function useAccounts() {
+  const { accounts, isLoading, error } = usePassport();
+  return { accounts, isLoading, error };
+}