wip

Author: jacekradko

integration/presets/envs.ts

@@ -81,6 +81,14 @@ const withEmailCodesQuickstart = withEmailCodes
  .setEnvVariable('public', 'CLERK_SIGN_IN_URL', '')
  .setEnvVariable('public', 'CLERK_SIGN_UP_URL', '');
 
+// Uses staging instance which runs Core 3
+const withAPCore3ClerkV6 = environmentConfig()
+ .setId('withAPCore3ClerkV6')
+ .setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
+ .setEnvVariable('private', 'CLERK_API_URL', 'https://api.clerkstage.dev')
+ .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-billing-staging').sk)
+ .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-billing-staging').pk);
+
 // Uses staging instance which runs Core 3
 const withAPCore3ClerkLatest = environmentConfig()
  .setId('withAPCore3ClerkLatest')
@@ -186,6 +194,7 @@ export const envs = {
  sessionsProd1,
  withAPIKeys,
  withAPCore3ClerkLatest,
+ withAPCore3ClerkV6,
  withBilling,
  withBillingJwtV2,
  withCustomRoles,

integration/presets/next.ts

@@ -28,9 +28,15 @@ const appRouterAPWithClerkNextLatest = appRouterQuickstart
  .clone()
  .setName('next-app-router-ap-clerk-next-latest');
 
+const appRouterAPWithClerkNextV6 = appRouterQuickstart
+ .clone()
+ .setName('next-app-router-ap-clerk-next-v6')
+ .addDependency('@clerk/nextjs', '6');
+
 export const next = {
  appRouter,
  appRouterTurbo,
  appRouterQuickstart,
  appRouterAPWithClerkNextLatest,
+ appRouterAPWithClerkNextV6,
 } as const;

integration/templates/next-app-router-quickstart/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

integration/templates/next-app-router-quickstart/src/app/page.tsx

@@ -1,4 +1,31 @@
-import { Show, SignInButton, SignUpButton, UserButton } from '@clerk/nextjs';
+import * as Clerk from '@clerk/nextjs';
+import type { ComponentType, ReactNode } from 'react';
+
+type ShowProps = {
+ children: ReactNode;
+ when: 'signedIn' | 'signedOut';
+};
+
+const Show: ComponentType<ShowProps> =
+ (Clerk as { Show?: ComponentType<ShowProps> }).Show ||
+ (({ children, when }) => {
+ const SignedIn = (Clerk as { SignedIn?: ComponentType<{ children: ReactNode }> }).SignedIn;
+ const SignedOut = (Clerk as { SignedOut?: ComponentType<{ children: ReactNode }> }).SignedOut;
+
+ if (when === 'signedIn' && SignedIn) {
+ return <SignedIn>{children}</SignedIn>;
+ }
+
+ if (when === 'signedOut' && SignedOut) {
+ return <SignedOut>{children}</SignedOut>;
+ }
+
+ return null;
+ });
+
+const SignInButton = (Clerk as { SignInButton: ComponentType }).SignInButton;
+const SignUpButton = (Clerk as { SignUpButton: ComponentType }).SignUpButton;
+const UserButton = (Clerk as { UserButton: ComponentType }).UserButton;
 
 export default function Home() {
  return (

integration/tests/next-account-portal/clerk-v6-ap-core-3.test.ts

@@ -0,0 +1,41 @@
+import { test } from '@playwright/test';
+
+import type { Application } from '../../models/application';
+import { appConfigs } from '../../presets';
+import type { FakeUser } from '../../testUtils';
+import { createTestUtils } from '../../testUtils';
+import { testSignIn, testSignUp, testSSR } from './common';
+
+test.describe('Next with ClerkJS V6 <-> Account Portal Core 3 @ap-flows', () => {
+ test.describe.configure({ mode: 'serial' });
+ let app: Application;
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ test.setTimeout(90_000); // Wait for app to be ready
+ app = await appConfigs.next.appRouterAPWithClerkNextV6.clone().commit();
+ await app.setup();
+ await app.withEnv(appConfigs.envs.withAPCore3ClerkV6);
+ await app.dev();
+ const u = createTestUtils({ app });
+ fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('sign in', async ({ page, context }) => {
+ await testSignIn({ app, page, context, fakeUser });
+ });
+
+ test('sign up', async ({ page, context }) => {
+ await testSignUp({ app, page, context, fakeUser });
+ });
+
+ test('ssr', async ({ page, context }) => {
+ await testSSR({ app, page, context, fakeUser });
+ });
+});