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.

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

Expo Web sign-in-or-up docs #1794

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 6 additions & 2 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -2296,8 +2296,8 @@
"href": "/docs/references/expo/use-local-credentials"
},
{
"title": "useOAuth()",
"href": "/docs/references/expo/use-oauth"
"title": "Add custom sign-in-or-up page",
"href": "/docs/references/expo/web-support/custom-sign-up-page"
}
]
]
Expand Down Expand Up @@ -2333,6 +2333,10 @@
{
"title": "Add custom sign-up and sign-in pages",
"href": "/docs/references/expo/web-support/custom-signup-signin-pages"
},
{
"title": "Add custom sign-in-or-up page",
"href": "/docs/references/expo/web-support/custom-sign-up-page"
}
]
]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,16 @@
---
title: Build sign in and sign up pages with prebuilt components on web
description: Learn how to add custom sign-in and sign-up pages to your Expo app with Clerk's prebuilt components.
title: Build your own sign-in-or-up page with prebuilt components on web
description: Learn how to add custom sign-in-or-up page to your Expo app with Clerk's prebuilt components.
---

This guide shows you how to use the [`<SignIn />`](/docs/components/authentication/sign-in) and [`<SignUp />`](/docs/components/authentication/sign-up) prebuilt components in order to build custom sign-in and sign-up pages for your Expo **web** app.
This guide shows you how to use the [`<SignIn />`](/docs/components/authentication/sign-in) prebuilt component in order to build custom sign-in-or-up page for your Expo **web** app.

This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and the [platform-specific extensions](https://docs.expo.dev/router/create-pages/#platform-specific-extensions) to build the sign-up and sign-in pages specifically for the **web** platform.
This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and the [platform-specific extensions](https://docs.expo.dev/router/create-pages/#platform-specific-extensions) to build the sign-in-or-up page specifically for the **web** platform.

<Steps>
### Build a sign-up page
## Build a sign-in-or-up page

The following example demonstrates how to render the [`<SignUp />`](/docs/components/authentication/sign-up) component.

```tsx filename="/app/sign-up.web.tsx"
import { SignUp } from '@clerk/clerk-expo/web'

export default function Page() {
return <SignUp />
}
```

### Build a sign-in page

The following example demonstrates how to render the [`<SignIn />`](/docs/components/authentication/sign-in) component.
The following example demonstrates how to render the [`<SignIn />`](/docs/components/authentication/sign-in) component to allow users to both sign-in or sign-up from a single flow.

```tsx filename="/app/sign-in.web.tsx"
import { SignIn } from '@clerk/clerk-expo/web'
Expand All @@ -32,7 +20,7 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th
}
```

### Visit your new pages
## Visit your new page

To run your project, use the following command:

Expand All @@ -50,14 +38,19 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th
```
</CodeBlockTabs>

Visit your new custom pages locally at [localhost:8081/sign-in](http://localhost:8081/sign-in) and [localhost:8081/sign-up](http://localhost:8081/sign-up).
Visit your new custom pages locally at [localhost:8081/sign-in](http://localhost:8081/sign-in).
</Steps>

## More resources

Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers.

<Cards>
- [Custom sign-up page](/docs/references/expo/web-support/custom-sign-up-page)
- Learn how to add a custom sign-up page to your Next.js app with Clerk's prebuilt components.

---

- [Prebuilt components](/docs/components/overview)
- Learn more about Clerk's suite of components that let you quickly add authentication to your app.

Expand Down
66 changes: 66 additions & 0 deletions docs/references/expo/web-support/custom-sign-up-page.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
title: Build your own sign-up page with prebuilt components on web
description: Learn how to add custom sign-up page to your Expo app with Clerk's prebuilt components.
---

This guide shows you how to use the [`<SignUp />`](/docs/components/authentication/sign-up) prebuilt component in order to build custom sign-up page for your Expo **web** app.

This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and the [platform-specific extensions](https://docs.expo.dev/router/create-pages/#platform-specific-extensions) to build the sign-in-or-up page specifically for the **web** platform.

<Steps>
## Build a sign-up page

The following example demonstrates how to render the [`<SignUp />`](/docs/components/authentication/sign-up) component.

```tsx filename="/app/sign-up.web.tsx"
import { SignUp } from '@clerk/clerk-expo/web'

export default function Page() {
return <SignUp />
}
```

## Visit your new page

To run your project, use the following command:

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

```bash filename="terminal"
yarn web
```

```bash filename="terminal"
pnpm web
```
</CodeBlockTabs>

Visit your new custom pages locally at [localhost:8081/sign-up](http://localhost:8081/sign-up).
</Steps>

## More resources

Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers.

<Cards>
- [Prebuilt components](/docs/components/overview)
- Learn more about Clerk's suite of components that let you quickly add authentication to your app.

---

- [Customization & localization](/docs/customization/overview)
- Learn how to customize and localize Clerk components.

---

- [Custom flows](/docs/custom-flows/overview)
- Expo native apps require custom flows in place of prebuilt components. Learn more about custom flows.

---

- [Client-side helpers](/docs/references/react/use-user)
- Learn more about our client-side helpers and how to use them.
</Cards>
Loading