Passkey list for react package

packages/react-sdk/src/contexts/CorbadoContext.tsx

@@ -31,16 +31,16 @@ export interface CorbadoContextProps {
   completeSignUpWithEmailOTP: (code: string) => Promise<Result<void, CompleteSignupWithEmailOTPError>>;
   appendPasskey: () => Promise<Result<void, AppendPasskeyError>>;
   getUserAuthMethods: (email: string) => Promise<UserAuthMethods>;
-  passkeyList: () => Promise<Result<PassKeyList, PasskeyListError>>;
-  passkeyDelete: (id: string) => Promise<Result<void, PasskeyDeleteError>>;
+  getPasskeys: () => Promise<Result<PassKeyList, PasskeyListError>>;
+  deletePasskey: (id: string) => Promise<Result<void, PasskeyDeleteError>>;
   getProjectConfig: () => Promise<ProjectConfig>;
 }
 
 const missingImplementation = (): never => {
   throw new Error('Please make sure that your components are wrapped inside <CorbadoProvider/>');
 };
 
-export const initialContext = {
+export const initialContext: CorbadoContextProps = {
   shortSession: undefined,
   user: undefined,
   globalError: undefined,
@@ -53,10 +53,9 @@ export const initialContext = {
   logout: missingImplementation,
   initSignUpWithEmailOTP: missingImplementation,
   completeSignUpWithEmailOTP: missingImplementation,
-  initAutocompletedLoginWithPasskey: missingImplementation,
   appendPasskey: missingImplementation,
-  passkeyList: missingImplementation,
-  passkeyDelete: missingImplementation,
+  getPasskeys: missingImplementation,
+  deletePasskey: missingImplementation,
   getUserAuthMethods: missingImplementation,
   getProjectConfig: missingImplementation,
 };

packages/react-sdk/src/contexts/CorbadoProvider.tsx

@@ -66,11 +66,11 @@ export const CorbadoProvider: FC<AppProviderParams> = ({ children, ...corbadoPar
     return corbadoApp.authService.appendPasskey();
   }, [corbadoApp]);
 
-  const passkeyList = useCallback(() => {
+  const getPasskeys = useCallback(() => {
     return corbadoApp.authService.passkeyList();
   }, [corbadoApp]);
 
-  const passkeyDelete = useCallback(
+  const deletePasskey = useCallback(
     (id: string) => {
       return corbadoApp.authService.passkeyDelete(id);
     },
@@ -137,8 +137,8 @@ export const CorbadoProvider: FC<AppProviderParams> = ({ children, ...corbadoPar
       initSignUpWithEmailOTP,
       completeSignUpWithEmailOTP,
       appendPasskey,
-      passkeyList,
-      passkeyDelete,
+      getPasskeys,
+      deletePasskey,
       getUserAuthMethods,
       getProjectConfig,
     };
@@ -156,8 +156,8 @@ export const CorbadoProvider: FC<AppProviderParams> = ({ children, ...corbadoPar
     initSignUpWithEmailOTP,
     completeSignUpWithEmailOTP,
     appendPasskey,
-    passkeyList,
-    passkeyDelete,
+    getPasskeys,
+    deletePasskey,
     getUserAuthMethods,
     getProjectConfig,
   ]);

packages/react/src/components/passkeyList/PasskeyDetails.tsx

@@ -2,7 +2,7 @@ import { aaguidMappings, getParsedUA } from '@corbado/shared-ui';
 import type { PassKeyItem } from '@corbado/types';
 import type { FC } from 'react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 export interface PasskeyDetailsProps {
   passkey: PassKeyItem;
@@ -24,12 +24,15 @@ const PasskeyDetails: FC<PasskeyDetailsProps> = ({ passkey }) => {
         {passkey.id}
       </div>
       <div>
-        {t('field_created_text1')}
-        {passkey.created}
-        {t('field_created_text2')}
-        {userAgent?.browser.name}
-        {t('field_created_text3')}
-        {userAgent?.os.name}
+        <Trans
+          i18nKey='field_created'
+          t={t}
+          values={{
+            date: passkey.created,
+            browser: userAgent.browser.name,
+            os: userAgent.os.name,
+          }}
+        />
       </div>
       <div>
         {t('field_lastUsed')}

packages/react/src/hocs/CorbadoProvider.tsx

@@ -1,17 +1,32 @@
+import '../i18n';
+
 import { CorbadoProvider as CorbadoSDKProvider } from '@corbado/react-sdk';
+import { handleTheming } from '@corbado/shared-ui';
 import type { CorbadoAppParams, CorbadoUIConfig } from '@corbado/types';
 import type { FC, PropsWithChildren } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 
-import CorbadoUIProvider from '../contexts/CorbadoUIProvider';
+import { handleDynamicLocaleSetup } from '../i18n';
 
 export type CorbadoProviderProps = PropsWithChildren<CorbadoUIConfig & CorbadoAppParams>;
 
 const CorbadoProvider: FC<CorbadoProviderProps> = ({ children, ...config }) => {
+  const { defaultLanguage, autoDetectLanguage, customTranslations, darkMode, theme } = config;
+
+  useEffect(() => {
+    handleDynamicLocaleSetup(autoDetectLanguage, defaultLanguage, customTranslations);
+    const themesCleanup = handleTheming(darkMode ?? 'auto', theme);
+
+    return themesCleanup;
+  }, []);
+
   return (
-    <CorbadoUIProvider {...config}>
-      <CorbadoSDKProvider {...config}>{children}</CorbadoSDKProvider>
-    </CorbadoUIProvider>
+    <CorbadoSDKProvider
+      projectId={config.projectId}
+      apiTimeout={config.apiTimeout}
+    >
+      {children}
+    </CorbadoSDKProvider>
   );
 };
 export default CorbadoProvider;

packages/react/src/screens/CorbadoAuth.tsx

@@ -6,11 +6,10 @@ import React from 'react';
 import { AuthFlow } from '../components/wrappers/AuthFlow';
 import FlowHandlerProvider from '../contexts/FlowHandlerProvider';
 import UserDataProvider from '../contexts/UserDataProvider';
-import CorbadoScreen from '../hocs/CorbadoScreen';
 
 const CorbadoAuth: FC<CorbadoAuthConfig> = ({ onLoggedIn }) => {
   return (
-    <CorbadoScreen>
+    <div>
       <div className='cb-container'>
         <UserDataProvider>
           <FlowHandlerProvider
@@ -21,7 +20,7 @@ const CorbadoAuth: FC<CorbadoAuthConfig> = ({ onLoggedIn }) => {
           </FlowHandlerProvider>
         </UserDataProvider>
       </div>
-    </CorbadoScreen>
+    </div>
   );
 };
 

packages/react/src/screens/PasskeyList.tsx

@@ -8,10 +8,9 @@ import { Button, Spinner } from '../components';
 import PasskeyAgentIcon from '../components/passkeyList/PasskeyAgentIcon';
 import PasskeyDelete from '../components/passkeyList/PasskeyDelete';
 import PasskeyDetails from '../components/passkeyList/PasskeyDetails';
-import CorbadoScreen from '../hocs/CorbadoScreen';
 
 const PasskeyList: FC = () => {
-  const { passkeyList, appendPasskey, passkeyDelete, shortSession } = useCorbado();
+  const { getPasskeys, appendPasskey, deletePasskey, shortSession } = useCorbado();
   const { t } = useTranslation('translation', { keyPrefix: 'passkeysList' });
   const [passkeys, setPasskeys] = useState<PassKeyList | undefined>();
 
@@ -24,7 +23,7 @@ const PasskeyList: FC = () => {
   }, []);
 
   const fetchPasskeys = async () => {
-    const result = await passkeyList();
+    const result = await getPasskeys();
 
     if (result.err) {
       throw new Error(result.val.name);
@@ -39,7 +38,7 @@ const PasskeyList: FC = () => {
   };
 
   const handleDeletePasskey = async (id: string) => {
-    await passkeyDelete(id);
+    await deletePasskey(id);
     await fetchPasskeys();
   };
 
@@ -48,7 +47,7 @@ const PasskeyList: FC = () => {
   }
 
   return (
-    <CorbadoScreen>
+    <div>
       {passkeys ? (
         passkeys.passkeys.map(passkey => (
           <div
@@ -74,7 +73,7 @@ const PasskeyList: FC = () => {
       >
         {t('button_createPasskey')}
       </Button>
-    </CorbadoScreen>
+    </div>
   );
 };
 

packages/shared-ui/src/i18n/en.json

@@ -106,9 +106,7 @@
     "button_createPasskey": "Create a Passkey",
     "badge_synced": "Synced",
     "field_credentialId": "Credential ID: ",
-    "field_created_text1": "Created: ",
-    "field_created_text2": " with ",
-    "field_created_text3": " on ",
+    "field_created": "Created: {{date}} with {{browser}} on {{os}}",
     "field_lastUsed": "Last used: ",
     "field_status": "Status: ",
     "deleteDialog_header": "Delete Passkey",