Prepare connect-next playground for native testing

packages/connect-react/src/components/append/AppendInitScreen.tsx

@@ -154,7 +154,6 @@ const AppendInitScreen = () => {
 
   const handleSubmit = useCallback(
     async (attestationOptions: string, showErrorIfCancelled: boolean) => {
-      console.log('handleSubmit', attestationOptions);
       if (appendLoading || skipping) {
         return;
       }

packages/connect-react/src/components/login-second-factor/InitScreen.tsx

@@ -113,8 +113,6 @@ const InitScreen = () => {
       return handleSituation(LoginSituationCode.CboApiNotAvailablePostAuthenticator);
     }
 
-    console.log('loginContinue', res.val);
-
     try {
       await config.onComplete(res.val.session);
     } catch {

packages/connect-react/src/components/passkeyList/PasskeyListScreen.tsx

@@ -166,7 +166,6 @@ const PasskeyListScreen = () => {
       return handleSituation(PasskeyListSituationCode.CboApiNotAvailableDuringInitialLoad, passkeyList.val);
     }
 
-    console.log('passkeyList', passkeyList.val.passkeys);
     setPasskeyListToken(listTokenRes);
     setPasskeyList(passkeyList.val.passkeys);
     statefulLoader.current.finish();

playground/connect-next/app/(api)/connectToken/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest } from 'next/server';
+import { getCorbadoConnectToken, verifyAmplifyToken } from '@/lib/utils';
+
+type Payload = {
+  idToken: string;
+  connectTokenType: string;
+};
+
+export async function POST(req: NextRequest) {
+  const body = (await req.json()) as Payload;
+
+  const { idToken, connectTokenType } = body;
+
+  const { displayName, identifier } = await verifyAmplifyToken(idToken);
+
+  const connectToken = await getCorbadoConnectToken(connectTokenType, {
+    displayName: displayName,
+    identifier: identifier,
+  });
+
+  return new Response(JSON.stringify({ token: connectToken }), {
+    status: 201,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}

playground/connect-next/app/(api)/connectTokenExternal/route.ts

@@ -0,0 +1,58 @@
+import { NextRequest } from 'next/server';
+import { getCorbadoConnectTokenExternal, verifyAmplifyTokenExternal } from '@/lib/utils';
+
+type Payload = {
+  idToken: string;
+  connectTokenType: string;
+};
+
+export async function POST(req: NextRequest) {
+  const body = (await req.json()) as Payload;
+
+  const { idToken, connectTokenType } = body;
+  console.log('creating connectTokenType', connectTokenType);
+
+  try {
+    const { displayName, identifier } = await verifyAmplifyTokenExternal(idToken);
+
+    const connectToken = await getCorbadoConnectTokenExternal(connectTokenType, {
+      displayName: displayName,
+      identifier: identifier,
+    });
+
+    const simulateError = process.env.SIMULATE_ERROR;
+    if (simulateError && displayName.endsWith('@corbado.com')) {
+      console.warn('Simulating error for testing purposes');
+
+      switch (simulateError) {
+        case 'error_response':
+          return new Response(JSON.stringify({ error: 'Simulated error' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' },
+          });
+        case 'invalid_token':
+          return new Response(JSON.stringify({ token: 'invalid_token' }), {
+            status: 201,
+            headers: { 'Content-Type': 'application/json' },
+          });
+        case 'empty_token':
+          return new Response(JSON.stringify({ token: '' }), {
+            status: 201,
+            headers: { 'Content-Type': 'application/json' },
+          });
+      }
+    }
+
+    return new Response(JSON.stringify({ token: connectToken }), {
+      status: 201,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (e) {
+    console.error('Error verifying token or getting connect token', e);
+
+    return new Response(JSON.stringify({ error: 'Failed to verify token or get connect token' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+}

playground/connect-next/app/home/client.tsx → playground/connect-next/app/(auth-required)/home/client.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { signOut } from 'aws-amplify/auth';
 
 type Props = {
   maybeSecretCode?: string;
@@ -9,6 +10,11 @@ type Props = {
 export default function Home({ maybeSecretCode }: Props) {
   const router = useRouter();
 
+  const logout = async () => {
+    await signOut();
+    router.push('/login');
+  };
+
   return (
     <>
       <div className='w-full flex justify-center'>
@@ -27,9 +33,7 @@ export default function Home({ maybeSecretCode }: Props) {
               </button>
               <button
                 className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 my-4 rounded w-full'
-                onClick={async () => {
-                  window.location.replace(`/login`);
-                }}
+                onClick={logout}
               >
                 Logout
               </button>

playground/connect-next/app/home/page.tsx → playground/connect-next/app/(auth-required)/home/page.tsx

@@ -1,5 +1,5 @@
 import { cookies } from 'next/headers';
-import Home from '@/app/home/client';
+import Home from '@/app/(auth-required)/home/client';
 
 export default async function Page() {
   const cookieStore = await cookies();

playground/connect-next/app/(auth-required)/layout.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { ProtectedRoute } from '@/components/ProtectedRoute';
+
+export default function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
+  return <ProtectedRoute>{children}</ProtectedRoute>;
+}

playground/connect-next/app/(auth-required)/passkey-list/actions.ts

@@ -0,0 +1,17 @@
+'use server';
+
+import { ConnectTokenType } from '@corbado/types';
+import { getCorbadoConnectToken, verifyAmplifyToken } from '@/lib/utils';
+
+export const getCorbadoToken = async (tokenType: ConnectTokenType, idToken?: string) => {
+  if (!idToken) {
+    throw new Error('idToken is required');
+  }
+
+  const { displayName, identifier } = await verifyAmplifyToken(idToken);
+
+  return getCorbadoConnectToken(tokenType, {
+    displayName: displayName,
+    identifier: identifier,
+  });
+};

playground/connect-next/app/passkey-list/page.tsx → playground/connect-next/app/(auth-required)/passkey-list/page.tsx

@@ -1,22 +1,21 @@
 'use client';
-export const runtime = 'edge';
+import { fetchAuthSession } from 'aws-amplify/auth';
 
 import { CorbadoConnectPasskeyList } from '@corbado/connect-react';
-import { useRouter } from 'next/navigation';
 import { getCorbadoToken } from './actions';
-import { getAppendToken } from '../actions';
 
 export default function PasskeyListPage() {
-  const router = useRouter();
-
   return (
     <div className='w-full flex justify-center'>
       <div className='w-full my-4 mx-4'>
         <div className='mb-2 flex justify-between w-full'>
           <CorbadoConnectPasskeyList
-            connectTokenProvider={async tokenType =>
-              tokenType === 'passkey-append' ? await getAppendToken() : await getCorbadoToken(tokenType)
-            }
+            connectTokenProvider={async tokenType => {
+              const session = await fetchAuthSession();
+              const idToken = session.tokens?.idToken?.toString();
+
+              return getCorbadoToken(tokenType, idToken);
+            }}
           />
         </div>
       </div>

playground/connect-next/app/(auth-required)/post-login/actions.ts

@@ -0,0 +1,32 @@
+'use server';
+
+import { AppendStatus, ConnectTokenType } from '@corbado/types';
+import { cookies } from 'next/headers';
+import { getCorbadoConnectToken, verifyAmplifyToken } from '@/lib/utils';
+
+export const getCorbadoToken = async (idToken?: string) => {
+  if (!idToken) {
+    throw new Error('idToken is required');
+  }
+
+  const { displayName, identifier } = await verifyAmplifyToken(idToken);
+
+  return getCorbadoConnectToken('passkey-append' as ConnectTokenType, {
+    displayName: displayName,
+    identifier: identifier,
+  });
+};
+
+export async function postPasskeyAppend(appendStatus: AppendStatus, clientState: string) {
+  // update client side state
+  console.log(appendStatus);
+  if (appendStatus === 'complete' || appendStatus === 'complete-noop') {
+    const cookieStore = await cookies();
+    cookieStore.set({
+      name: 'cbo_client_state',
+      value: clientState,
+      httpOnly: true,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+    });
+  }
+}

playground/connect-next/app/(auth-required)/post-login/page.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { CorbadoConnectAppend } from '@corbado/connect-react';
+import { useRouter } from 'next/navigation';
+import { getCorbadoToken, postPasskeyAppend } from '@/app/(auth-required)/post-login/actions';
+import { fetchAuthSession } from 'aws-amplify/auth';
+import { AppendStatus } from '@corbado/types';
+
+export default function Page() {
+  const router = useRouter();
+
+  return (
+    <div className='flex h-screen w-screen items-center justify-center bg-gray-50'>
+      <div className='z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-gray-100 shadow-xl'>
+        <div className='flex flex-col space-y-4 bg-gray-50 px-4 py-8 sm:px-8'>
+          <CorbadoConnectAppend
+            onSkip={async () => router.push('/home')}
+            appendTokenProvider={async () => {
+              const session = await fetchAuthSession();
+              const idToken = session.tokens?.idToken?.toString();
+
+              return await getCorbadoToken(idToken);
+            }}
+            onComplete={async (appendStatus: AppendStatus, clientState: string) => {
+              await postPasskeyAppend(appendStatus, clientState);
+              router.push('/home');
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

playground/connect-next/app/globals.css

@@ -11,3 +11,68 @@ html {
   font-family: Verdana, Helvetica, sans-serif;
   font-size: 14px;
 }
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}