Skip to content

Commit f1f1d09

Browse files
jacekradkodstaley
jacekradko
and
dstaley
authored
feat(repo): Migrate Protect to Show (#7373)
Co-authored-by: Dylan Staley <[email protected]>
1 parent 22d1689 commit f1f1d09

File tree

123 files changed

+2490
-1048
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+2490
-1048
lines changed

‎.changeset/migrate-to-show.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/upgrade': minor
3+
---
4+
5+
Add a `transform-protect-to-show` codemod that migrates `<Protect>`, `<SignedIn>`, `<SignedOut>` usages to `<Show>` with automatic prop and import updates.

‎.changeset/show-the-guards.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
'@clerk/astro': major
3+
'@clerk/chrome-extension': major
4+
'@clerk/expo': major
5+
'@clerk/nextjs': major
6+
'@clerk/nuxt': major
7+
'@clerk/react': major
8+
'@clerk/react-router': major
9+
'@clerk/shared': minor
10+
'@clerk/tanstack-react-start': major
11+
'@clerk/vue': major
12+
---
13+
14+
Introduce `<Show when={...}>` as the cross-framework authorization control component and remove `<Protect>`, `<SignedIn>`, and `<SignedOut>` in favor of `<Show>`.

‎integration/presets/envs.ts‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -81,26 +81,6 @@ const withEmailCodesQuickstart = withEmailCodes
8181
.setEnvVariable('public', 'CLERK_SIGN_IN_URL', '')
8282
.setEnvVariable('public', 'CLERK_SIGN_UP_URL', '');
8383

84-
const withAPCore1ClerkV4 = environmentConfig()
85-
.setId('withAPCore1ClerkV4')
86-
.setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
87-
.setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-email-codes').sk)
88-
.setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk);
89-
90-
// Uses staging instance which runs Core 3
91-
const withAPCore3ClerkV4 = environmentConfig()
92-
.setId('withAPCore3ClerkV4')
93-
.setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
94-
.setEnvVariable('private', 'CLERK_API_URL', 'https://api.clerkstage.dev')
95-
.setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-billing-staging').sk)
96-
.setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-billing-staging').pk);
97-
98-
const withAPCore1ClerkV6 = environmentConfig()
99-
.setId('withAPCore1ClerkV6')
100-
.setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
101-
.setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-email-codes').sk)
102-
.setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk);
103-
10484
// Uses staging instance which runs Core 3
10585
const withAPCore3ClerkV6 = environmentConfig()
10686
.setId('withAPCore3ClerkV6')
@@ -213,9 +193,6 @@ export const envs = {
213193
base,
214194
sessionsProd1,
215195
withAPIKeys,
216-
withAPCore1ClerkV4,
217-
withAPCore1ClerkV6,
218-
withAPCore3ClerkV4,
219196
withAPCore3ClerkLatest,
220197
withAPCore3ClerkV6,
221198
withBilling,

‎integration/presets/next.ts‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,12 @@ const appRouterQuickstart = appRouter
2626

2727
const appRouterAPWithClerkNextLatest = appRouterQuickstart.clone().setName('next-app-router-ap-clerk-next-latest');
2828

29-
const appRouterAPWithClerkNextV4 = appRouterQuickstart
29+
const appRouterQuickstartV6 = appRouter
3030
.clone()
31-
.setName('next-app-router-ap-clerk-next-v4')
32-
.addDependency('@clerk/nextjs', '4')
33-
.addFile(
34-
'src/middleware.ts',
35-
() => `import { authMiddleware } from '@clerk/nextjs';
31+
.setName('next-app-router-quickstart-v6')
32+
.useTemplate(templates['next-app-router-quickstart-v6']);
3633

37-
export default authMiddleware({
38-
publicRoutes: ['/']
39-
});
40-
41-
export const config = {
42-
matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
43-
};
44-
`,
45-
);
46-
47-
const appRouterAPWithClerkNextV6 = appRouterQuickstart
34+
const appRouterAPWithClerkNextV6 = appRouterQuickstartV6
4835
.clone()
4936
.setName('next-app-router-ap-clerk-next-v6')
5037
.addDependency('@clerk/nextjs', '6');
@@ -54,6 +41,6 @@ export const next = {
5441
appRouterTurbo,
5542
appRouterQuickstart,
5643
appRouterAPWithClerkNextLatest,
57-
appRouterAPWithClerkNextV4,
5844
appRouterAPWithClerkNextV6,
45+
appRouterQuickstartV6,
5946
} as const;

‎integration/scripts/logger.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ export const createLogger = (opts: CreateLoggerOptions) => {
3434
console.info(`${chalk[prefixColor](`[${prefix}]`)} ${msg}`);
3535
}
3636
},
37+
warn: (msg: string, error?: unknown) => {
38+
const errorMsg = error instanceof Error ? error.message : String(error ?? '');
39+
const fullMsg = errorMsg ? `${msg} ${errorMsg}` : msg;
40+
console.warn(`${chalk.yellow(`[${prefix}]`)} ${fullMsg}`);
41+
},
3742
child: (childOpts: CreateLoggerOptions) => {
3843
return createLogger({ prefix: `${prefix} :: ${childOpts.prefix}`, color: prefixColor });
3944
},

‎integration/templates/astro-hybrid/src/pages/index.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
---
2-
import { UserButton, SignInButton, SignedIn, SignedOut } from '@clerk/astro/components';
2+
import { Show, UserButton, SignInButton } from '@clerk/astro/components';
33
import { OrganizationSwitcher } from '@clerk/astro/react';
44
import Layout from '../layouts/Layout.astro';
55
66
export const prerender = true;
77
---
88

99
<Layout title='Home'>
10-
<SignedOut>
10+
<Show when='signed-out'>
1111
<h1>Signed out</h1>
1212
<SignInButton
1313
mode='modal'
1414
fallbackRedirectUrl='/'
1515
/>
16-
</SignedOut>
17-
<SignedIn>
16+
</Show>
17+
<Show when='signed-in'>
1818
<h1>Signed in</h1>
1919
<UserButton />
2020
<OrganizationSwitcher client:only='react' />
21-
</SignedIn>
21+
</Show>
2222
</Layout>

‎integration/templates/astro-hybrid/src/pages/only-admins.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
2-
import { Protect } from '@clerk/astro/components';
2+
import { Show } from '@clerk/astro/components';
33
import Layout from '../layouts/Layout.astro';
44
55
export const prerender = true;
66
---
77

88
<Layout title='Protected'>
9-
<Protect role='org:admin'>
9+
<Show when={{ role: 'org:admin' }}>
1010
<h1>I'm an admin</h1>
1111
<h1 slot='fallback'>Not an admin</h1>
12-
</Protect>
12+
</Show>
1313
</Layout>

‎integration/templates/astro-hybrid/src/pages/only-members.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
import { Protect } from '@clerk/astro/components';
2+
import { Show } from '@clerk/astro/components';
33
import Layout from '../layouts/Layout.astro';
44
55
export const prerender = false;
66
---
77

88
<Layout title='Protected'>
9-
<Protect
10-
role='basic_member'
9+
<Show
10+
when={{ role: 'basic_member' }}
1111
isStatic={false}
1212
>
1313
<h1>I'm a member</h1>
1414
<h1 slot='fallback'>Not a member</h1>
15-
</Protect>
15+
</Show>
1616
</Layout>

‎integration/templates/astro-hybrid/src/pages/ssr.astro‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
---
2-
import { UserButton, SignInButton, SignedIn, SignedOut } from '@clerk/astro/components';
2+
import { Show, UserButton, SignInButton } from '@clerk/astro/components';
33
import { OrganizationSwitcher } from '@clerk/astro/react';
44
import Layout from '../layouts/Layout.astro';
55
66
export const prerender = false;
77
---
88

99
<Layout title='Home'>
10-
<SignedOut isStatic={false}>
10+
<Show
11+
when='signed-out'
12+
isStatic={false}
13+
>
1114
<h1>Signed out</h1>
1215
<SignInButton
1316
mode='modal'
1417
fallbackRedirectUrl='/'
1518
/>
16-
</SignedOut>
17-
<SignedIn isStatic={false}>
19+
</Show>
20+
<Show
21+
when='signed-in'
22+
isStatic={false}
23+
>
1824
<h1>Signed in</h1>
1925
<UserButton />
2026
<OrganizationSwitcher client:load />
21-
</SignedIn>
27+
</Show>
2228
</Layout>

‎integration/templates/astro-node/src/layouts/Layout.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ interface Props {
55
66
const { title } = Astro.props;
77
8-
import { SignedIn, SignedOut } from '@clerk/astro/components';
8+
import { Show } from '@clerk/astro/components';
99
import { LanguagePicker } from '../components/LanguagePicker';
1010
import CustomUserButton from '../components/CustomUserButton.astro';
1111
---
@@ -80,11 +80,11 @@ import CustomUserButton from '../components/CustomUserButton.astro';
8080
<div class='flex gap-5 items-center'>
8181
<LanguagePicker client:idle />
8282

83-
<SignedIn>
83+
<Show when='signed-in'>
8484
<CustomUserButton />
85-
</SignedIn>
85+
</Show>
8686

87-
<SignedOut>
87+
<Show when='signed-out'>
8888
<div class='sm:flex sm:gap-4'>
8989
<a
9090
class='inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]'
@@ -110,7 +110,7 @@ import CustomUserButton from '../components/CustomUserButton.astro';
110110
</a>
111111
</div>
112112
</div>
113-
</SignedOut>
113+
</Show>
114114
</div>
115115
</div>
116116
</div>

0 commit comments

Comments
 (0)