Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(/quickstarts/remix) Remove unnecessary code from examples; add run project instructions #1546

Merged
merged 1 commit into from
Sep 17, 2024
Merged

(/quickstarts/remix) Remove unnecessary code from examples; add run project instructions #1546

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 26 additions & 16 deletions docs/quickstarts/remix.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,8 +196,8 @@ Learn how to use Clerk to quickly and easily add secure authentication and user
- [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
- [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.
- [`<UserButton />`](/docs/components/user/user-button): A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. For this example, it links to the [Account Portal sign-in page.](/docs/customization/account-portal/overview)
- [`<SignUpButton />`](/docs/components/unstyled/sign-up-button): An unstyled component that links to the sign-up page or displays the sign-up modal, depending on which `mode` you have set. For this example, it links to the [Account Portal sign-up page.](/docs/customization/account-portal/overview)
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. For this example, because you have not specified any props or [environment variables](/docs/deployments/clerk-environment-variables) for the sign-in URL, the component will link to [Clerk's Account Portal sign-in page.](/docs/customization/account-portal/overview#sign-in)
- [`<SignUpButton />`](/docs/components/unstyled/sign-up-button): An unstyled component that links to the sign-up page. For this example, because you have not specified any props or [environment variables](/docs/deployments/clerk-environment-variables) for the sign-in URL, the component will link to [Clerk's Account Portal sign-up page.](/docs/customization/account-portal/overview#sign-up)

```tsx {{ filename: 'routes/_index.tsx' }}
import {
Expand All @@ -215,22 +215,16 @@ Learn how to use Clerk to quickly and easily add secure authentication and user
<h1>Index Route</h1>
<SignedIn>
<p>You are signed in!</p>
<div>
<p>View your profile here</p>
<UserButton />
</div>
<div>
<SignOutButton />
</div>
<UserButton />

<SignOutButton />
</SignedIn>
<SignedOut>
<p>You are signed out</p>
<div>
<SignInButton />
</div>
<div>
<SignUpButton />
</div>

<SignInButton />

<SignUpButton />
</SignedOut>
</div>
)
Expand Down Expand Up @@ -267,7 +261,23 @@ Learn how to use Clerk to quickly and easily add secure authentication and user

### Create your first user

Now visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user.
Run your project with the following command:

<CodeBlockTabs options={["npm", "yarn", "pnpm"]}>
```bash {{ filename: 'terminal' }}
npm run dev
```

```bash {{ filename: 'terminal' }}
yarn dev
```

```bash {{ filename: 'terminal' }}
pnpm dev
```
</CodeBlockTabs>

Visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user.
</Steps>

## Next steps
Expand Down
Loading