: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,99 @@
+'use client';
+
+import { passport } from '@imtbl/sdk';
+
+export default function Page() {
+  const {
+    login, loginWithEthersjs, loginWithoutWallet, logout, isLoading, isLoggedIn,
+  } = passport.usePassport();
+  const { idToken } = passport.useIdToken();
+  const { accessToken } = passport.useAccessToken();
+  const { linkedAddresses } = passport.useLinkedAddresses();
+  const { userInfo } = passport.useUserInfo();
+  const { accounts } = passport.useAccounts();
+  const { passportProvider } = passport.usePassportProvider();
+  const { web3Provider } = passport.useWeb3Provider();
+
+  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>Loading:</b>
+            {' '}
+            {isLoading ? 'true' : 'false'}
+          </p>
+          <p className="mb-2">
+            <b>Is Logged In:</b>
+            {' '}
+            {isLoggedIn ? 'true' : 'false'}
+          </p>
+          <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>
+          <p className="mb-2">
+            <b>Accounts:</b>
+            {' '}
+            {JSON.stringify(accounts, null, 2)}
+          </p>
+          <p className="mb-2">
+            <b>Passport Provider:</b>
+            {' '}
+            { passportProvider ? 'true' : 'false' }
+          </p>
+          <p className="mb-2">
+            <b>Web3 Provider:</b>
+            {' '}
+            { web3Provider ? 'true' : 'false' }
+          </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/app/use-context/snippets/jwt-tokens.tsx

@@ -0,0 +1,21 @@
+// #doc passport-react-jwt-tokens
+import { passport } from '@imtbl/sdk';
+
+export default function Page() {
+  const { login } = passport.usePassport();
+  const { idToken } = passport.useIdToken();
+  const { accessToken } = passport.useAccessToken();
+
+  return (
+    <>
+      Access Token:
+      {' '}
+      {accessToken}
+      ID Token:
+      {' '}
+      {idToken}
+      <button onClick={login}>Login</button>
+    </>
+  );
+}
+// #enddoc passport-react-jwt-tokens

examples/passport/identity-with-nextjs/src/app/use-context/snippets/login-without-wallet.tsx

@@ -0,0 +1,17 @@
+// #doc passport-react-login-without-wallet
+import { passport } from '@imtbl/sdk';
+
+export default function Page() {
+  const { loginWithoutWallet } = passport.usePassport();
+  const { userInfo } = passport.useUserInfo();
+
+  return (
+    <>
+      userInfo:
+      {' '}
+      {userInfo}
+      <button onClick={loginWithoutWallet}>Login Without Wallet</button>
+    </>
+  );
+}
+// #enddoc passport-react-login-without-wallet

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

@@ -0,0 +1,17 @@
+// #doc passport-react-login
+import { passport } from '@imtbl/sdk';
+
+export default function MyComponent() {
+  const { login, loginWithEthersjs } = passport.usePassport();
+  const { accounts } = passport.useAccounts();
+
+  return (
+    <>
+      accounts:
+      {' '}
+      {accounts}
+      <button onClick={login}>Login</button>
+    </>
+  );
+}
+// #enddoc passport-react-login

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

@@ -0,0 +1,11 @@
+// #doc passport-react-logout
+import { passport } from '@imtbl/sdk';
+
+export default function Page() {
+  const { logout } = passport.usePassport();
+
+  return (
+    <button onClick={logout}>Logout</button>
+  );
+}
+// #enddoc passport-react-logout

examples/passport/identity-with-nextjs/src/app/use-context/snippets/user-info.tsx

@@ -0,0 +1,14 @@
+// #doc passport-react-user-info
+import { passport } from '@imtbl/sdk';
+
+export default function Page() {
+  const { userInfo } = passport.useUserInfo();
+
+  return (
+    <>
+      userInfo:
+      {userInfo}
+    </>
+  );
+}
+// #enddoc passport-react-user-info

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

@@ -0,0 +1,24 @@
+// #doc passport-setup-react
+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>
+  );
+}
+// #enddoc passport-setup-react

packages/passport/sdk/.eslintrc.cjs

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

packages/passport/sdk/src/index.ts

@@ -25,3 +25,15 @@ export type {
   DeviceConnectResponse,
   DeviceTokenResponse,
 } from './types';
+
+export {
+  PassportProvider,
+  useAccessToken,
+  useIdToken,
+  useLinkedAddresses,
+  usePassport,
+  useUserInfo,
+  useAccounts,
+  usePassportProvider,
+  useWeb3Provider,
+} from './react/PassportContext';