Skip to content

Commit 572b61f

Browse files
mrzachnugentmrzachnugent
committed
feat(docs): add manual installation steps for clerk auth blocks
1 parent 1705363 commit 572b61f

File tree

7 files changed

+353
-21
lines changed

7 files changed

+353
-21
lines changed

‎apps/docs/content/docs/blocks/authentication/forgot-password-form.mdx

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: A form that sends a password reset OTP to the user's email address.
66
import { BlockPreviewCard } from '@docs/components/preview-card';
77
import { ForgotPasswordForm } from "@docs/components/blocks";
88
import { ExternalLinks } from "@docs/components/external-links";
9-
import { Step, Steps } from 'fumadocs-ui/components/steps';
9+
import { Step, Steps } from 'fumadocs-ui/components/steps';
1010
import { CommandTabs } from "@docs/components/command-tabs";
1111
import { AuthBlockTabs, AuthBlockTabsCliContent, AuthBlockTabsManualContent } from '@docs/components/auth-block-tabs';
1212
import { Callout } from '@docs/components/callout';
@@ -144,9 +144,55 @@ import { Callout } from '@docs/components/callout';
144144
</AuthBlockTabsManualContent>
145145
<AuthBlockTabsManualContent integration="clerk">
146146

147-
**TODO: Manual**
147+
<Steps>
148+
<Step>
149+
**If you haven't already**
150+
151+
- Install the Clerk package:
152+
153+
```bash
154+
npx expo install @clerk/clerk-expo
155+
```
156+
157+
- Follow steps 2-4 of Clerk's [Expo quick start](https://go.clerk.com/8e6CCee#set-your-clerk-api-keys) to configure your app for Clerk.
158+
159+
</Step>
160+
161+
<Step>
162+
**If missing, add the following components:**
163+
164+
- [`Button`](/docs/components/button)
165+
- [`Card`](/docs/components/card)
166+
- [`Input`](/docs/components/input)
167+
- [`Label`](/docs/components/label)
168+
- [`Text`](/docs/components/text)
169+
170+
</Step>
171+
172+
<Step>
148173

149-
Integration: clerk
174+
**Copy and paste the following code into your project.**
175+
176+
```json doc-gen:file
177+
{
178+
"file": "./node_modules/@rnr/registry/src/blocks/clerk/forgot-password-form.tsx",
179+
"codeblock": {
180+
"lang": "tsx",
181+
"meta": "title=\"@/components/forgot-password-form.tsx\""
182+
}
183+
}
184+
```
185+
186+
</Step>
187+
188+
<Step>
189+
190+
**Adjust for your project setup.**
191+
192+
Update the import paths to match your project structure, and address any `// TODO:` comments by adding the app-specific logic they describe.
193+
194+
</Step>
195+
</Steps>
150196

151197
</AuthBlockTabsManualContent>
152198
</AuthBlockTabs>

‎apps/docs/content/docs/blocks/authentication/reset-password-form.mdx

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: A form for resetting a password with an OTP sent via email.
66
import { BlockPreviewCard } from '@docs/components/preview-card';
77
import { ResetPasswordForm } from "@docs/components/blocks";
88
import { ExternalLinks } from "@docs/components/external-links";
9-
import { Step, Steps } from 'fumadocs-ui/components/steps';
9+
import { Step, Steps } from 'fumadocs-ui/components/steps';
1010
import { CommandTabs } from "@docs/components/command-tabs";
1111
import { AuthBlockTabs, AuthBlockTabsCliContent, AuthBlockTabsManualContent } from '@docs/components/auth-block-tabs';
1212
import { Callout } from '@docs/components/callout';
@@ -144,9 +144,55 @@ import { Callout } from '@docs/components/callout';
144144
</AuthBlockTabsManualContent>
145145
<AuthBlockTabsManualContent integration="clerk">
146146

147-
**TODO: Manual**
147+
<Steps>
148+
<Step>
149+
**If you haven't already**
150+
151+
- Install the Clerk package:
152+
153+
```bash
154+
npx expo install @clerk/clerk-expo
155+
```
156+
157+
- Follow steps 2-4 of Clerk's [Expo quick start](https://go.clerk.com/8e6CCee#set-your-clerk-api-keys) to configure your app for Clerk.
158+
159+
</Step>
160+
161+
<Step>
162+
**If missing, add the following components:**
163+
164+
- [`Button`](/docs/components/button)
165+
- [`Card`](/docs/components/card)
166+
- [`Input`](/docs/components/input)
167+
- [`Label`](/docs/components/label)
168+
- [`Text`](/docs/components/text)
169+
170+
</Step>
171+
172+
<Step>
148173

149-
Integration: clerk
174+
**Copy and paste the following code into your project.**
175+
176+
```json doc-gen:file
177+
{
178+
"file": "./node_modules/@rnr/registry/src/blocks/clerk/reset-password-form.tsx",
179+
"codeblock": {
180+
"lang": "tsx",
181+
"meta": "title=\"@/components/reset-password-form.tsx\""
182+
}
183+
}
184+
```
185+
186+
</Step>
187+
188+
<Step>
189+
190+
**Adjust for your project setup.**
191+
192+
Update the import paths to match your project structure, and address any `// TODO:` comments by adding the app-specific logic they describe.
193+
194+
</Step>
195+
</Steps>
150196

151197
</AuthBlockTabsManualContent>
152198
</AuthBlockTabs>

‎apps/docs/content/docs/blocks/authentication/sign-in-form.mdx

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: A form for signing in using email and password or social providers.
66
import { BlockPreviewCard } from '@docs/components/preview-card';
77
import { SignInForm } from "@docs/components/blocks";
88
import { ExternalLinks } from "@docs/components/external-links";
9-
import { Step, Steps } from 'fumadocs-ui/components/steps';
9+
import { Step, Steps } from 'fumadocs-ui/components/steps';
1010
import { CommandTabs } from "@docs/components/command-tabs";
1111
import { AuthBlockTabs, AuthBlockTabsCliContent, AuthBlockTabsManualContent } from '@docs/components/auth-block-tabs';
1212
import { Callout } from '@docs/components/callout';
@@ -147,9 +147,57 @@ import { Callout } from '@docs/components/callout';
147147
</AuthBlockTabsManualContent>
148148
<AuthBlockTabsManualContent integration="clerk">
149149

150-
**TODO: Manual**
150+
<Steps>
151+
<Step>
152+
**If you haven't already**
153+
154+
- Install the Clerk package:
155+
156+
```bash
157+
npx expo install @clerk/clerk-expo
158+
```
159+
160+
- Follow steps 2-4 of Clerk's [Expo quick start](https://go.clerk.com/8e6CCee#set-your-clerk-api-keys) to configure your app for Clerk.
161+
162+
</Step>
163+
164+
<Step>
165+
**If missing, add the following block and/or components:**
151166

152-
Integration: clerk
167+
- [`SocialConnections`](/docs/blocks/authentication/social-connections)
168+
- [`Button`](/docs/components/button)
169+
- [`Card`](/docs/components/card)
170+
- [`Input`](/docs/components/input)
171+
- [`Label`](/docs/components/label)
172+
- [`Separator`](/docs/components/separator)
173+
- [`Text`](/docs/components/text)
174+
175+
</Step>
176+
177+
<Step>
178+
179+
**Copy and paste the following code into your project.**
180+
181+
```json doc-gen:file
182+
{
183+
"file": "./node_modules/@rnr/registry/src/blocks/clerk/sign-in-form.tsx",
184+
"codeblock": {
185+
"lang": "tsx",
186+
"meta": "title=\"@/components/sign-in-form.tsx\""
187+
}
188+
}
189+
```
190+
191+
</Step>
192+
193+
<Step>
194+
195+
**Adjust for your project setup.**
196+
197+
Update the import paths to match your project structure, and address any `// TODO:` comments by adding the app-specific logic they describe.
198+
199+
</Step>
200+
</Steps>
153201

154202
</AuthBlockTabsManualContent>
155203
</AuthBlockTabs>

‎apps/docs/content/docs/blocks/authentication/sign-up-form.mdx

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: A form for creating an account with email and password or social pr
66
import { BlockPreviewCard } from '@docs/components/preview-card';
77
import { SignUpForm } from "@docs/components/blocks";
88
import { ExternalLinks } from "@docs/components/external-links";
9-
import { Step, Steps } from 'fumadocs-ui/components/steps';
9+
import { Step, Steps } from 'fumadocs-ui/components/steps';
1010
import { CommandTabs } from "@docs/components/command-tabs";
1111
import { AuthBlockTabs, AuthBlockTabsCliContent, AuthBlockTabsManualContent } from '@docs/components/auth-block-tabs';
1212
import { Callout } from '@docs/components/callout';
@@ -146,9 +146,57 @@ import { Callout } from '@docs/components/callout';
146146
</AuthBlockTabsManualContent>
147147
<AuthBlockTabsManualContent integration="clerk">
148148

149-
**TODO: Manual**
149+
<Steps>
150+
<Step>
151+
**If you haven't already**
152+
153+
- Install the Clerk package:
154+
155+
```bash
156+
npx expo install @clerk/clerk-expo
157+
```
158+
159+
- Follow steps 2-4 of Clerk's [Expo quick start](https://go.clerk.com/8e6CCee#set-your-clerk-api-keys) to configure your app for Clerk.
160+
161+
</Step>
162+
163+
<Step>
164+
**If missing, add the following block and/or components:**
150165

151-
Integration: clerk
166+
- [`SocialConnections`](/docs/blocks/authentication/social-connections)
167+
- [`Button`](/docs/components/button)
168+
- [`Card`](/docs/components/card)
169+
- [`Input`](/docs/components/input)
170+
- [`Label`](/docs/components/label)
171+
- [`Separator`](/docs/components/separator)
172+
- [`Text`](/docs/components/text)
173+
174+
</Step>
175+
176+
<Step>
177+
178+
**Copy and paste the following code into your project.**
179+
180+
```json doc-gen:file
181+
{
182+
"file": "./node_modules/@rnr/registry/src/blocks/clerk/sign-up-form.tsx",
183+
"codeblock": {
184+
"lang": "tsx",
185+
"meta": "title=\"@/components/sign-up-form.tsx\""
186+
}
187+
}
188+
```
189+
190+
</Step>
191+
192+
<Step>
193+
194+
**Adjust for your project setup.**
195+
196+
Update the import paths to match your project structure, and address any `// TODO:` comments by adding the app-specific logic they describe.
197+
198+
</Step>
199+
</Steps>
152200

153201
</AuthBlockTabsManualContent>
154202
</AuthBlockTabs>

‎apps/docs/content/docs/blocks/authentication/social-connections.mdx

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: A set of buttons for authenticating through social providers.
66
import { BlockPreviewCard } from '@docs/components/preview-card';
77
import { SocialConnections } from "@docs/components/blocks";
88
import { ExternalLinks } from "@docs/components/external-links";
9-
import { Step, Steps } from 'fumadocs-ui/components/steps';
9+
import { Step, Steps } from 'fumadocs-ui/components/steps';
1010
import { CommandTabs } from "@docs/components/command-tabs";
1111
import { AuthBlockTabs, AuthBlockTabsCliContent, AuthBlockTabsManualContent } from '@docs/components/auth-block-tabs';
1212
import { Callout } from '@docs/components/callout';
@@ -134,9 +134,60 @@ import { Callout } from '@docs/components/callout';
134134
</AuthBlockTabsManualContent>
135135
<AuthBlockTabsManualContent integration="clerk">
136136

137-
**TODO: Manual**
137+
<Steps>
138+
<Step>
139+
140+
**Install the following dependencies:**
141+
142+
```bash
143+
npx expo install expo-auth-session expo-web-browser
144+
```
145+
146+
</Step>
147+
<Step>
148+
**If you haven't already**
149+
150+
- Install the Clerk package:
151+
152+
```bash
153+
npx expo install @clerk/clerk-expo
154+
```
138155

139-
Integration: clerk
156+
- Follow steps 2-4 of Clerk's [Expo quick start](https://go.clerk.com/8e6CCee#set-your-clerk-api-keys) to configure your app for Clerk.
157+
158+
</Step>
159+
160+
<Step>
161+
**If missing, add the following component:**
162+
163+
- [`Button`](/docs/components/button)
164+
165+
</Step>
166+
167+
<Step>
168+
169+
**Copy and paste the following code into your project.**
170+
171+
```json doc-gen:file
172+
{
173+
"file": "./node_modules/@rnr/registry/src/blocks/clerk/social-connections.tsx",
174+
"codeblock": {
175+
"lang": "tsx",
176+
"meta": "title=\"@/components/social-connections.tsx\""
177+
}
178+
}
179+
```
180+
181+
</Step>
182+
183+
<Step>
184+
185+
**Adjust for your project setup.**
186+
187+
Update the import paths to match your project structure, and address any `// TODO:` comments by adding the app-specific logic they describe.
188+
189+
</Step>
190+
</Steps>
140191

141192
</AuthBlockTabsManualContent>
142193
</AuthBlockTabs>

0 commit comments

Comments
 (0)