Skip to content

Commit 98b4c99

Browse files
alexisintechalexisintech
authored
(components) update examples; add app router examples (#2149)
1 parent 307077c commit 98b4c99

File tree

8 files changed

+117
-95
lines changed

8 files changed

+117
-95
lines changed

‎docs/components/authentication/sign-in.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ The following example includes basic implementation of the `<SignIn />` componen
116116
If you would like to create a dedicated `/sign-in` page in your Next.js application, there are a few requirements you must follow. See the [dedicated guide](/docs/references/nextjs/custom-sign-in-or-up-page) for more information.
117117

118118
```tsx {{ filename: 'app/page.tsx' }}
119+
'use client'
120+
119121
import { SignIn, useUser } from '@clerk/nextjs'
120122

121123
export default function Home() {

‎docs/components/authentication/sign-up.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,8 @@ The following example includes basic implementation of the `<SignUp />` componen
102102
If you would like to create a dedicated `/sign-up` page in your Next.js application, there are a few requirements you must follow. See the [dedicated guide](/docs/references/nextjs/custom-sign-up-page) for more information.
103103

104104
```tsx {{ filename: 'app/page.tsx' }}
105+
'use client'
106+
105107
import { SignUp, useUser } from '@clerk/nextjs'
106108

107109
export default function Home() {

‎docs/components/control/signed-in.mdx

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,49 @@ The `<SignedIn>` component offers authentication checks as a cross-cutting conce
1111

1212
<Tabs items={["Next.js", "React", "Astro", "Expo", "Remix", "Tanstack React Start", "Vue"]}>
1313
<Tab>
14-
```tsx {{ filename: 'app.tsx' }}
15-
import '@/styles/globals.css'
16-
import { ClerkProvider, RedirectToSignIn, SignedIn } from '@clerk/nextjs'
17-
import { AppProps } from 'next/app'
18-
19-
function MyApp({ Component, pageProps }: AppProps) {
20-
return (
21-
<ClerkProvider {...pageProps}>
22-
<SignedIn>
23-
<div>You are signed in</div>
24-
</SignedIn>
25-
<p>This content is always visible.</p>
26-
</ClerkProvider>
27-
)
28-
}
29-
30-
export default MyApp
31-
```
14+
<CodeBlockTabs options={["App Router", "Pages Router"]}>
15+
```tsx {{ filename: 'app/page.tsx' }}
16+
import React from 'react'
17+
import { ClerkProvider, SignedIn } from '@clerk/nextjs'
18+
19+
export default function RootLayout({ children }: { children: React.ReactNode }) {
20+
return (
21+
<ClerkProvider>
22+
<html lang="en">
23+
<body>
24+
<header>
25+
<SignedIn>
26+
<div>You are signed in</div>
27+
</SignedIn>
28+
<p>This content is always visible.</p>
29+
</header>
30+
{children}
31+
</body>
32+
</html>
33+
</ClerkProvider>
34+
)
35+
}
36+
```
37+
38+
```tsx {{ filename: 'app.tsx' }}
39+
import '@/styles/globals.css'
40+
import { ClerkProvider, SignedIn } from '@clerk/nextjs'
41+
import { AppProps } from 'next/app'
42+
43+
function MyApp({ Component, pageProps }: AppProps) {
44+
return (
45+
<ClerkProvider {...pageProps}>
46+
<SignedIn>
47+
<div>You are signed in</div>
48+
</SignedIn>
49+
<p>This content is always visible.</p>
50+
</ClerkProvider>
51+
)
52+
}
53+
54+
export default MyApp
55+
```
56+
</CodeBlockTabs>
3257
</Tab>
3358

3459
<Tab>

‎docs/components/control/signed-out.mdx

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,49 @@ The `<SignedOut>` component offers authentication checks as a cross-cutting conc
99

1010
<Tabs items={["Next.js", "React", "Astro", "Expo", "Remix", "Tanstack React Start", "Vue"]}>
1111
<Tab>
12-
```tsx {{ filename: 'app.tsx' }}
13-
import '@/styles/globals.css'
14-
import { ClerkProvider, RedirectToSignIn, SignedOut } from '@clerk/nextjs'
15-
import { AppProps } from 'next/app'
16-
17-
function MyApp({ Component, pageProps }: AppProps) {
18-
return (
19-
<ClerkProvider {...pageProps}>
20-
<SignedOut>
21-
<p>You are signed out.</p>
22-
</SignedOut>
23-
<p>This content is always visible.</p>
24-
</ClerkProvider>
25-
)
26-
}
27-
28-
export default MyApp
29-
```
12+
<CodeBlockTabs options={["App Router", "Pages Router"]}>
13+
```tsx {{ filename: 'app/page.tsx' }}
14+
import React from 'react'
15+
import { ClerkProvider, SignedOut } from '@clerk/nextjs'
16+
17+
export default function RootLayout({ children }: { children: React.ReactNode }) {
18+
return (
19+
<ClerkProvider>
20+
<html lang="en">
21+
<body>
22+
<header>
23+
<SignedOut>
24+
<p>You are signed out.</p>
25+
</SignedOut>
26+
<p>This content is always visible.</p>
27+
</header>
28+
{children}
29+
</body>
30+
</html>
31+
</ClerkProvider>
32+
)
33+
}
34+
```
35+
36+
```tsx {{ filename: 'app.tsx' }}
37+
import '@/styles/globals.css'
38+
import { ClerkProvider, RedirectToSignIn, SignedOut } from '@clerk/nextjs'
39+
import { AppProps } from 'next/app'
40+
41+
function MyApp({ Component, pageProps }: AppProps) {
42+
return (
43+
<ClerkProvider {...pageProps}>
44+
<SignedOut>
45+
<p>You are signed out.</p>
46+
</SignedOut>
47+
<p>This content is always visible.</p>
48+
</ClerkProvider>
49+
)
50+
}
51+
52+
export default MyApp
53+
```
54+
</CodeBlockTabs>
3055
</Tab>
3156

3257
<Tab>

‎docs/components/organization/organization-profile.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ The `<OrganizationProfile />` component accepts the following properties, all of
6161

6262
<Tabs items={["Next.js", "React", "Astro", "Remix", "Tanstack React Start", "Vue"]}>
6363
<Tab>
64-
You can embed the `<OrganizationProfile />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application.
64+
The `<OrganizationProfile />` component must embedded using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes) in order for the routing to work.
6565

6666
```jsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
6767
import { OrganizationProfile } from '@clerk/nextjs'

‎docs/components/unstyled/sign-in-with-metamask.mdx

Lines changed: 18 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,32 @@ description: The `<SignInWithMetamaskButton>` component is used to complete a on
55

66
The `<SignInWithMetamaskButton>` component is used to complete a one-click, cryptographically-secure sign-in flow using MetaMask.
77

8-
## How to use the `<SignInWithMetamaskButton>` component
8+
## Usage
99

1010
### Basic usage
1111

1212
<CodeBlockTabs options={["Next.js", "React", "Remix", "Vue"]}>
13-
```jsx {{ filename: 'pages/index.js' }}
13+
```jsx {{ filename: 'app/page.tsx' }}
1414
import { SignInWithMetamaskButton } from '@clerk/nextjs'
1515

1616
export default function Home() {
17-
return (
18-
<div>
19-
<SignInWithMetamaskButton />
20-
</div>
21-
)
17+
return <SignInWithMetamaskButton />
2218
}
2319
```
2420

2521
```jsx {{ filename: 'example.js' }}
2622
import { SignInWithMetamaskButton } from '@clerk/clerk-react'
2723

2824
export default function Example() {
29-
return (
30-
<div>
31-
<SignInWithMetamaskButton />
32-
</div>
33-
)
25+
return <SignInWithMetamaskButton />
3426
}
3527
```
3628

3729
```jsx {{ filename: 'pages/index.js' }}
3830
import { SignInWithMetamaskButton } from '@clerk/remix'
3931

4032
export default function Home() {
41-
return (
42-
<div>
43-
<SignInWithMetamaskButton />
44-
</div>
45-
)
33+
return <SignInWithMetamaskButton />
4634
}
4735
```
4836

@@ -52,9 +40,7 @@ The `<SignInWithMetamaskButton>` component is used to complete a one-click, cryp
5240
</script>
5341
5442
<template>
55-
<div>
56-
<SignInWithMetamaskButton />
57-
</div>
43+
<SignInWithMetamaskButton />
5844
</template>
5945
```
6046
</CodeBlockTabs>
@@ -69,11 +55,9 @@ In some cases, you will want to use your own button, or button text. You can do
6955

7056
export default function Home() {
7157
return (
72-
<div>
73-
<SignInWithMetamaskButton mode="modal">
74-
<button>Custom sign in button</button>
75-
</SignInWithMetamaskButton>
76-
</div>
58+
<SignInWithMetamaskButton mode="modal">
59+
<button>Custom sign in button</button>
60+
</SignInWithMetamaskButton>
7761
)
7862
}
7963
```
@@ -83,11 +67,9 @@ In some cases, you will want to use your own button, or button text. You can do
8367

8468
export default function Example() {
8569
return (
86-
<div>
87-
<SignInWithMetamaskButton mode="modal">
88-
<button>Custom sign in button</button>
89-
</SignInWithMetamaskButton>
90-
</div>
70+
<SignInWithMetamaskButton mode="modal">
71+
<button>Custom sign in button</button>
72+
</SignInWithMetamaskButton>
9173
)
9274
}
9375
```
@@ -97,11 +79,9 @@ In some cases, you will want to use your own button, or button text. You can do
9779

9880
export default function Home() {
9981
return (
100-
<div>
101-
<SignInWithMetamaskButton mode="modal">
102-
<button>Custom sign in button</button>
103-
</SignInWithMetamaskButton>
104-
</div>
82+
<SignInWithMetamaskButton mode="modal">
83+
<button>Custom sign in button</button>
84+
</SignInWithMetamaskButton>
10585
)
10686
}
10787
```
@@ -112,11 +92,9 @@ In some cases, you will want to use your own button, or button text. You can do
11292
</script>
11393
11494
<template>
115-
<div>
116-
<SignInWithMetamaskButton mode="modal">
117-
<button>Custom sign in button</button>
118-
</SignInWithMetamaskButton>
119-
</div>
95+
<SignInWithMetamaskButton mode="modal">
96+
<button>Custom sign in button</button>
97+
</SignInWithMetamaskButton>
12098
</template>
12199
```
122100
</CodeBlockTabs>

‎docs/components/user/user-button.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ In the following example, `<UserButton />` is mounted inside a header component,
9999
<Tabs items={["Next.js", "React", "Astro", "Remix", "Tanstack React Start", "Vue"]}>
100100
<Tab>
101101
<CodeBlockTabs options={["App Router", "Pages Router"]}>
102-
```tsx {{ filename: 'layout.tsx' }}
102+
```tsx {{ filename: 'layout.tsx', mark: [8] }}
103103
import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs'
104104

105105
function Header() {
@@ -128,7 +128,7 @@ In the following example, `<UserButton />` is mounted inside a header component,
128128
}
129129
```
130130

131-
```jsx {{ filename: 'userButtonExample.tsx' }}
131+
```jsx {{ filename: 'userButtonExample.tsx', mark: [8] }}
132132
import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs'
133133

134134
function Header() {

‎docs/components/user/user-profile.mdx

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -57,25 +57,15 @@ All props are optional.
5757

5858
<Tabs items={["Next.js", "React", "Astro", "Remix", "Tanstack React Start", "Vue"]}>
5959
<Tab>
60-
You can embed the `<UserProfile />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application.
60+
The `<UserProfile />` component must embedded using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes) in order for the routing to work.
6161

62-
<CodeBlockTabs options={["App Router", "Pages Router"]}>
63-
```jsx {{ filename: 'app/user-profile/[[...user-profile]]/page.tsx' }}
64-
import { UserProfile } from '@clerk/nextjs'
62+
```jsx {{ filename: 'app/user-profile/[[...user-profile]]/page.tsx' }}
63+
import { UserProfile } from '@clerk/nextjs'
6564

66-
const UserProfilePage = () => <UserProfile />
67-
68-
export default UserProfilePage
69-
```
70-
71-
```jsx {{ filename: '/pages/user-profile/[[...index]].tsx' }}
72-
import { UserProfile } from '@clerk/nextjs'
73-
74-
const UserProfilePage = () => <UserProfile />
65+
const UserProfilePage = () => <UserProfile />
7566

76-
export default UserProfilePage
77-
```
78-
</CodeBlockTabs>
67+
export default UserProfilePage
68+
```
7969
</Tab>
8070

8171
<Tab>

0 commit comments

Comments
 (0)