create-openfort 0.1.8 → 0.1.10

package/template/openfort-templates/firebase/src/integrations/firebase/errors.ts

@@ -1,4 +1,4 @@
-import { FirebaseError } from "firebase/app";
+import { FirebaseError } from 'firebase/app'
 
 /**
  * Firebase Auth error codes mapped to user-friendly messages
@@ -6,12 +6,15 @@ import { FirebaseError } from "firebase/app";
  */
 const AUTH_ERROR_MESSAGES: Record<string, string> = {
   // Operation errors
-  'auth/operation-not-allowed': 'This sign-in method is not enabled. Please contact support or enable it in Firebase Console.',
-  'auth/operation-not-supported-in-this-environment': 'This operation is not supported in this environment.',
+  'auth/operation-not-allowed':
+    'This sign-in method is not enabled. Please contact support or enable it in Firebase Console.',
+  'auth/operation-not-supported-in-this-environment':
+    'This operation is not supported in this environment.',
 
   // Popup errors
   'auth/popup-closed-by-user': 'Sign-in popup was closed. Please try again.',
-  'auth/popup-blocked': 'Sign-in popup was blocked by your browser. Please allow popups and try again.',
+  'auth/popup-blocked':
+    'Sign-in popup was blocked by your browser. Please allow popups and try again.',
   'auth/cancelled-popup-request': 'Sign-in was cancelled. Please try again.',
 
   // Email/Password errors
@@ -20,28 +23,34 @@ const AUTH_ERROR_MESSAGES: Record<string, string> = {
   'auth/user-not-found': 'No account found with this email.',
   'auth/wrong-password': 'Incorrect password.',
   'auth/email-already-in-use': 'An account with this email already exists.',
-  'auth/weak-password': 'Password is too weak. Please use a stronger password (at least 6 characters).',
-  'auth/invalid-credential': 'Invalid credentials. Please check your email and password.',
-  'auth/account-exists-with-different-credential': 'An account already exists with the same email but different sign-in credentials.',
+  'auth/weak-password':
+    'Password is too weak. Please use a stronger password (at least 6 characters).',
+  'auth/invalid-credential':
+    'Invalid credentials. Please check your email and password.',
+  'auth/account-exists-with-different-credential':
+    'An account already exists with the same email but different sign-in credentials.',
 
   // Network errors
-  'auth/network-request-failed': 'Network error. Please check your connection and try again.',
+  'auth/network-request-failed':
+    'Network error. Please check your connection and try again.',
   'auth/timeout': 'Request timed out. Please try again.',
 
   // Rate limiting
   'auth/too-many-requests': 'Too many failed attempts. Please try again later.',
 
   // Token errors
-  'auth/invalid-api-key': 'Invalid API key. Please check your Firebase configuration.',
+  'auth/invalid-api-key':
+    'Invalid API key. Please check your Firebase configuration.',
   'auth/app-deleted': 'Firebase app was deleted.',
   'auth/expired-action-code': 'This action code has expired.',
   'auth/invalid-action-code': 'Invalid action code.',
 
   // Other common errors
-  'auth/unauthorized-domain': 'This domain is not authorized for OAuth operations.',
+  'auth/unauthorized-domain':
+    'This domain is not authorized for OAuth operations.',
   'auth/missing-email': 'Email address is required.',
   'auth/internal-error': 'An internal error occurred. Please try again.',
-};
+}
 
 /**
  * Converts a Firebase error to a user-friendly error message
@@ -51,22 +60,22 @@ const AUTH_ERROR_MESSAGES: Record<string, string> = {
 export function getFirebaseErrorMessage(error: unknown): string {
   // Check if it's a Firebase error
   if (error instanceof FirebaseError) {
-    const message = AUTH_ERROR_MESSAGES[error.code];
+    const message = AUTH_ERROR_MESSAGES[error.code]
     if (message) {
-      return message;
+      return message
     }
 
     // If we don't have a specific message, return the Firebase error message
-    return error.message || 'An error occurred during authentication.';
+    return error.message || 'An error occurred during authentication.'
   }
 
   // Handle generic Error objects
   if (error instanceof Error) {
-    return error.message;
+    return error.message
   }
 
   // Fallback for unknown error types
-  return 'An unexpected error occurred. Please try again.';
+  return 'An unexpected error occurred. Please try again.'
 }
 
 /**
@@ -77,7 +86,7 @@ const DEVELOPER_SOLUTIONS: Record<string, string[]> = {
     '1. Go to Firebase Console: https://console.firebase.google.com/',
     '2. Select your project',
     '3. Navigate to Authentication > Sign-in method',
-    '4. Enable the authentication provider you\'re trying to use (Google, Email/Password, etc.)',
+    "4. Enable the authentication provider you're trying to use (Google, Email/Password, etc.)",
     '5. For Google Sign-in: Add a support email and save',
     '6. Refresh your application and try again',
   ],
@@ -88,8 +97,8 @@ const DEVELOPER_SOLUTIONS: Record<string, string[]> = {
   ],
   'auth/unauthorized-domain': [
     '1. Go to Firebase Console > Authentication > Settings',
-    '2. Add your domain to \"Authorized domains\"',
-    '3. For local development, ensure \"localhost\" is added',
+    '2. Add your domain to "Authorized domains"',
+    '3. For local development, ensure "localhost" is added',
     '4. Save changes and try again',
   ],
   'auth/invalid-api-key': [
@@ -104,7 +113,7 @@ const DEVELOPER_SOLUTIONS: Record<string, string[]> = {
     '3. Check for CORS issues in browser console',
     '4. Ensure your API key and project configuration are correct',
   ],
-};
+}
 
 /**
  * Logs a Firebase error with actionable developer guidance
@@ -113,36 +122,47 @@ const DEVELOPER_SOLUTIONS: Record<string, string[]> = {
  */
 export function logFirebaseError(error: unknown, context?: string): void {
   if (!(error instanceof FirebaseError)) {
-    console.error(context ? `${context}:` : 'Error:', error);
-    return;
+    console.error(context ? `${context}:` : 'Error:', error)
+    return
   }
 
-  const errorPrefix = context ? `🔥 Firebase Auth Error (${context})` : '🔥 Firebase Auth Error';
+  const errorPrefix = context
+    ? `🔥 Firebase Auth Error (${context})`
+    : '🔥 Firebase Auth Error'
 
-  console.group(`%c${errorPrefix}`, 'color: #ff6b6b; font-weight: bold; font-size: 14px;');
+  console.group(
+    `%c${errorPrefix}`,
+    'color: #ff6b6b; font-weight: bold; font-size: 14px;',
+  )
 
   // Log the error code and message
-  console.error(`%cError Code: ${error.code}`, 'color: #ff6b6b; font-weight: bold;');
-  console.error(`%cError Message: ${error.message}`, 'color: #ff6b6b;');
+  console.error(
+    `%cError Code: ${error.code}`,
+    'color: #ff6b6b; font-weight: bold;',
+  )
+  console.error(`%cError Message: ${error.message}`, 'color: #ff6b6b;')
 
   // Log user-friendly message
-  const userMessage = AUTH_ERROR_MESSAGES[error.code] || error.message;
-  console.info(`%cUser Message: ${userMessage}`, 'color: #ffd93d; font-style: italic;');
+  const userMessage = AUTH_ERROR_MESSAGES[error.code] || error.message
+  console.info(
+    `%cUser Message: ${userMessage}`,
+    'color: #ffd93d; font-style: italic;',
+  )
 
   // Log developer solutions if available
-  const solutions = DEVELOPER_SOLUTIONS[error.code];
+  const solutions = DEVELOPER_SOLUTIONS[error.code]
   if (solutions) {
-    console.group('%c💡 How to Fix This:', 'color: #6bcf7f; font-weight: bold;');
+    console.group('%c💡 How to Fix This:', 'color: #6bcf7f; font-weight: bold;')
     solutions.forEach((solution) => {
-      console.info(`%c${solution}`, 'color: #6bcf7f;');
-    });
-    console.groupEnd();
+      console.info(`%c${solution}`, 'color: #6bcf7f;')
+    })
+    console.groupEnd()
   }
 
   // Log full error object for debugging
-  console.group('%c📋 Full Error Details:', 'color: #a29bfe;');
-  console.log(error);
-  console.groupEnd();
+  console.group('%c📋 Full Error Details:', 'color: #a29bfe;')
+  console.log(error)
+  console.groupEnd()
 
-  console.groupEnd();
+  console.groupEnd()
 }

package/template/openfort-templates/firebase/src/integrations/firebase/index.ts

@@ -1,3 +1,3 @@
-export * from "./client";
-export * from "./errors";
-export { FirebaseAuthCard } from "./components/FirebaseAuthCard";
+export * from './client'
+export { FirebaseAuthCard } from './components/FirebaseAuthCard'
+export * from './errors'

package/template/openfort-templates/firebase/src/integrations/openfort/index.ts

@@ -1 +1 @@
-export { OpenfortProviders,  } from "./providers";
+export { OpenfortProviders } from './providers'

package/template/openfort-templates/firebase/src/integrations/openfort/providers.tsx

@@ -1,19 +1,23 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { createConfig, WagmiProvider } from "wagmi";
-import { getDefaultConfig, OpenfortProvider, ThirdPartyOAuthProvider } from "@openfort/react";
-import { beamTestnet, polygonAmoy, sepolia } from "viem/chains";
+import {
+  getDefaultConfig,
+  OpenfortProvider,
+  ThirdPartyOAuthProvider,
+} from '@openfort/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { beamTestnet, polygonAmoy, sepolia } from 'viem/chains'
+import { createConfig, WagmiProvider } from 'wagmi'
 
-import { auth } from "../firebase";
+import { auth } from '../firebase'
 
 const wagmiConfig = createConfig(
   getDefaultConfig({
-    appName: "Openfort React demo",
+    appName: 'Openfort React demo',
     chains: [beamTestnet, polygonAmoy, sepolia], // Supported chains
     walletConnectProjectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID, // WalletConnect Project ID
   }),
-);
+)
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient()
 
 export function OpenfortProviders({ children }: { children: React.ReactNode }) {
   return (
@@ -25,12 +29,20 @@ export function OpenfortProviders({ children }: { children: React.ReactNode }) {
           walletConfig={{
             shieldPublishableKey: import.meta.env.VITE_SHIELD_PUBLISHABLE_KEY!, // Get it from https://dashboard.openfort.io
             ethereumProviderPolicyId: import.meta.env.VITE_POLICY_ID, // Policy ID for sponsoring transactions
-            createEncryptedSessionEndpoint: import.meta.env.VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT, // Endpoint for encryption session
+            // If you want to use AUTOMATIC embedded wallet recovery, an encryption session is required.
+            // See: https://www.openfort.io/docs/products/embedded-wallet/react-native/quickstart/automatic
+            // For backend setup, check: https://github.com/openfort-xyz/openfort-backend-quickstart
+            createEncryptedSessionEndpoint: import.meta.env
+              .VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT,
             recoverWalletAutomaticallyAfterAuth: false, // Wallet creation handled manually after auth
           }}
           thirdPartyAuth={{
             getAccessToken: async () => {
-              return (await auth.currentUser?.getIdToken(/* forceRefresh */ false)) ?? null;
+              return (
+                (await auth.currentUser?.getIdToken(
+                  /* forceRefresh */ false,
+                )) ?? null
+              )
             },
             provider: ThirdPartyOAuthProvider.FIREBASE,
           }}
@@ -39,5 +51,5 @@ export function OpenfortProviders({ children }: { children: React.ReactNode }) {
         </OpenfortProvider>
       </QueryClientProvider>
     </WagmiProvider>
-  );
+  )
 }

package/template/openfort-templates/firebase/src/ui/openfort/blockchain/ActionsCard.tsx

@@ -1,12 +1,12 @@
-import { getAddress, parseAbi } from "viem";
-import { useAccount, useReadContract, useWriteContract } from "wagmi";
+import { getAddress, parseAbi } from 'viem'
+import { useAccount, useReadContract, useWriteContract } from 'wagmi'
 
-import { TruncateData } from "../../../components/ui/TruncateData";
+import { TruncateData } from '../../../components/ui/TruncateData'
 
-const ERC20_ADDRESS = "0xef147ed8bb07a2a0e7df4c1ac09e96dec459ffac";
+const ERC20_ADDRESS = '0xef147ed8bb07a2a0e7df4c1ac09e96dec459ffac'
 
 function MintContract() {
-  const { address } = useAccount();
+  const { address } = useAccount()
 
   const {
     data: balance,
@@ -16,84 +16,96 @@ function MintContract() {
     address: ERC20_ADDRESS,
     abi: [
       {
-        type: "function",
-        name: "balanceOf",
-        stateMutability: "view",
-        inputs: [{ name: "account", type: "address" }],
-        outputs: [{ type: "uint256" }],
+        type: 'function',
+        name: 'balanceOf',
+        stateMutability: 'view',
+        inputs: [{ name: 'account', type: 'address' }],
+        outputs: [{ type: 'uint256' }],
       },
     ],
-    functionName: "balanceOf",
+    functionName: 'balanceOf',
     args: [address!],
-  });
+  })
 
   const { data: tokenSymbol } = useReadContract({
     address: ERC20_ADDRESS,
     abi: [
       {
-        type: "function",
-        name: "symbol",
-        stateMutability: "view",
-        outputs: [{ type: "string" }],
+        type: 'function',
+        name: 'symbol',
+        stateMutability: 'view',
+        outputs: [{ type: 'string' }],
       },
     ],
-    functionName: "symbol",
-  });
+    functionName: 'symbol',
+  })
 
-  const { data: hash, isPending, writeContract, error } = useWriteContract({
+  const {
+    data: hash,
+    isPending,
+    writeContract,
+    error,
+  } = useWriteContract({
     mutation: {
       onSuccess: () => {
         setTimeout(() => {
-          refetch();
-        }, 100);
+          refetch()
+        }, 100)
       },
       onSettled: (data, settledError) => {
-        console.log("Settled", { data, error: settledError });
+        console.log('Settled', { data, error: settledError })
       },
     },
-  });
+  })
 
   async function submit({ amount }: { amount: string }) {
     writeContract({
       address: getAddress(ERC20_ADDRESS),
-      abi: parseAbi(["function mint(address to, uint256 amount)"]),
-      functionName: "mint",
+      abi: parseAbi(['function mint(address to, uint256 amount)']),
+      functionName: 'mint',
       args: [address!, BigInt(amount)],
-    });
+    })
   }
 
   return (
     <div>
       <h2>Mint contract</h2>
       <p className="mb-2 text-zinc-400 text-sm">
-        Current balance: {balance?.toString()} {(tokenSymbol as string) || ""}
+        Current balance: {balance?.toString()} {(tokenSymbol as string) || ''}
       </p>
       <form
         className="space-y-4"
         onSubmit={(event) => {
-          event.preventDefault();
-          const amount = (event.target as HTMLFormElement).amount.value;
-          submit({ amount });
+          event.preventDefault()
+          const amount = (event.target as HTMLFormElement).amount.value
+          submit({ amount })
         }}
       >
-        <input type="number" placeholder="Enter amount to mint" className="grow peer" name="amount" />
+        <input
+          type="number"
+          placeholder="Enter amount to mint"
+          className="grow peer"
+          name="amount"
+        />
         <button className="btn" disabled={isPending || !address}>
-          {isPending ? "Minting..." : "Mint Tokens"}
+          {isPending ? 'Minting...' : 'Mint Tokens'}
         </button>
       </form>
       <TruncateData data={hash} />
       <TruncateData data={error?.message} className="text-red-400" />
       <TruncateData data={balanceError?.message} className="text-red-400" />
     </div>
-  );
+  )
 }
 
 export function ActionsCard() {
   return (
     <div className="flex flex-col w-full">
       <h1>Actions</h1>
-      <span className="mb-4 text-zinc-400 text-sm">Interact with smart contracts on the blockchain.</span>
+      <span className="mb-4 text-zinc-400 text-sm">
+        Interact with smart contracts on the blockchain.
+      </span>
       <MintContract />
     </div>
-  );
+  )
 }

package/template/openfort-templates/firebase/src/ui/openfort/blockchain/SignCard.tsx

@@ -1,10 +1,10 @@
-import { useChainId, useSignMessage, useSignTypedData } from "wagmi";
+import { useChainId, useSignMessage, useSignTypedData } from 'wagmi'
 
-import { TruncateData } from "../../../components/ui/TruncateData";
+import { TruncateData } from '../../../components/ui/TruncateData'
 
 function SignTypedData() {
-  const { signTypedData, error, data } = useSignTypedData();
-  const chainId = useChainId();
+  const { signTypedData, error, data } = useSignTypedData()
+  const chainId = useChainId()
 
   return (
     <div>
@@ -12,38 +12,38 @@ function SignTypedData() {
 
       <form
         onSubmit={async (event) => {
-          event.preventDefault();
+          event.preventDefault()
           signTypedData({
             domain: {
-              name: "Ether Mail",
-              version: "1",
+              name: 'Ether Mail',
+              version: '1',
               chainId,
-              verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+              verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
             },
             types: {
               Person: [
-                { name: "name", type: "string" },
-                { name: "wallet", type: "address" },
+                { name: 'name', type: 'string' },
+                { name: 'wallet', type: 'address' },
               ],
               Mail: [
-                { name: "from", type: "Person" },
-                { name: "to", type: "Person" },
-                { name: "contents", type: "string" },
+                { name: 'from', type: 'Person' },
+                { name: 'to', type: 'Person' },
+                { name: 'contents', type: 'string' },
               ],
             },
-            primaryType: "Mail",
+            primaryType: 'Mail',
             message: {
               from: {
-                name: "Cow",
-                wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
+                name: 'Cow',
+                wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
               },
               to: {
-                name: "Bob",
-                wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+                name: 'Bob',
+                wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
               },
-              contents: "Hello, Bob!",
+              contents: 'Hello, Bob!',
             },
-          });
+          })
         }}
       >
         <button type="submit" className="btn">
@@ -54,11 +54,11 @@ function SignTypedData() {
       <TruncateData data={data} />
       <TruncateData data={error?.message} className="text-red-500" />
     </div>
-  );
+  )
 }
 
 function SignMessage() {
-  const { data, signMessage, error } = useSignMessage();
+  const { data, signMessage, error } = useSignMessage()
 
   return (
     <div>
@@ -66,9 +66,9 @@ function SignMessage() {
       <form
         className="space-y-2"
         onSubmit={(event) => {
-          event.preventDefault();
-          const formData = new FormData(event.target as HTMLFormElement);
-          signMessage({ message: formData.get("message") as string });
+          event.preventDefault()
+          const formData = new FormData(event.target as HTMLFormElement)
+          signMessage({ message: formData.get('message') as string })
         }}
       >
         <input name="message" placeholder="Message to sign" />
@@ -79,18 +79,20 @@ function SignMessage() {
       <TruncateData data={error?.message} className="text-red-500" />
       <TruncateData data={data} />
     </div>
-  );
+  )
 }
 
 export function SignCard() {
   return (
     <div className="flex flex-col w-full">
       <h1>Signatures</h1>
-      <p className="mb-4 text-sm text-zinc-400">Sign messages and typed data with your connected wallet.</p>
+      <p className="mb-4 text-sm text-zinc-400">
+        Sign messages and typed data with your connected wallet.
+      </p>
       <div className="space-y-6">
         <SignMessage />
         <SignTypedData />
       </div>
     </div>
-  );
+  )
 }

package/template/openfort-templates/firebase/src/ui/openfort/index.ts

@@ -1,6 +1,4 @@
-export { ActionsCard } from "./blockchain/ActionsCard";
-export { SignCard } from "./blockchain/SignCard";
-export { UserProfileCard } from "./profile/UserProfileCard";
-export { WalletListCard } from "./wallets/WalletListCard";
-;
-;
+export { ActionsCard } from './blockchain/ActionsCard'
+export { SignCard } from './blockchain/SignCard'
+export { UserProfileCard } from './profile/UserProfileCard'
+export { WalletListCard } from './wallets/WalletListCard'

package/template/openfort-templates/firebase/src/ui/openfort/profile/UserProfileCard.tsx

@@ -1,27 +1,30 @@
-import { BookOpenIcon } from "@heroicons/react/24/outline";
-import { useUser } from "@openfort/react";
-import { useAccount } from "wagmi";
+import { BookOpenIcon } from '@heroicons/react/24/outline'
+import { useUser } from '@openfort/react'
+import { useAccount } from 'wagmi'
 
-import { auth } from "../../../integrations/firebase";
-import { WalletListCard } from "../wallets/WalletListCard";
+import { auth } from '../../../integrations/firebase'
+import { WalletListCard } from '../wallets/WalletListCard'
 
 type UserProfileCardProps = {
-  sampleGithubUrl: string;
-  description: string;
-};
+  sampleGithubUrl: string
+  description: string
+}
 
-export function UserProfileCard({ sampleGithubUrl, description }: UserProfileCardProps) {
-  const { user } = useUser();
-  const { isConnected } = useAccount();
-  const isLocal = window.location.hostname === "localhost";
+export function UserProfileCard({
+  sampleGithubUrl,
+  description,
+}: UserProfileCardProps) {
+  const { user } = useUser()
+  const { isConnected } = useAccount()
+  const isLocal = window.location.hostname === 'localhost'
 
   if (!isConnected) {
-    return <WalletListCard />;
+    return <WalletListCard />
   }
 
   return (
     <div className="flex flex-col flex-1 gap-4">
-      <h1>Welcome, {user?.player?.name || user?.linkedAccounts[0].email}</h1>
+      <h1>Welcome, {user?.name || user?.email}</h1>
       <p className="text-zinc-400 text-sm">
         {description}
         <br />
@@ -30,13 +33,18 @@ export function UserProfileCard({ sampleGithubUrl, description }: UserProfileCar
 
       <div className="border border-zinc-700 rounded p-4">
         <h2 className="mb-2">Get started</h2>
-        <p className="mb-2 text-zinc-400 text-sm">Start by creating a wallet, minting some tokens and signing messages.</p>
+        <p className="mb-2 text-zinc-400 text-sm">
+          Start by creating a wallet, minting some tokens and signing messages.
+        </p>
         {isLocal ? (
           <p className="mb-2 text-sm">
-            Edit <code>src/components/cards/main.tsx</code> to customize the app.
+            Edit <code>src/components/cards/main.tsx</code> to customize the
+            app.
           </p>
         ) : (
-          <p className="mb-2 text-sm">Clone this project and test it yourself, it is open source!</p>
+          <p className="mb-2 text-sm">
+            Clone this project and test it yourself, it is open source!
+          </p>
         )}
         <div className="flex gap-4 mt-4">
           <a
@@ -45,7 +53,11 @@ export function UserProfileCard({ sampleGithubUrl, description }: UserProfileCar
             target="_blank"
             rel="noreferrer"
           >
-            <img src="/githubLogo.svg" className="w-5 h-5 mr-2" alt="GitHub logo" />
+            <img
+              src="/githubLogo.svg"
+              className="w-5 h-5 mr-2"
+              alt="GitHub logo"
+            />
             View on github
           </a>
           <a
@@ -62,12 +74,12 @@ export function UserProfileCard({ sampleGithubUrl, description }: UserProfileCar
 
       <button
         onClick={() => {
-          auth.signOut();
+          auth.signOut()
         }}
         className="btn mt-auto"
       >
         Sign Out
       </button>
     </div>
-  );
+  )
 }