From 6a6b3abfe246d16d3a522153f52d5122e793ce27 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 13 Dec 2024 09:33:31 -0500 Subject: [PATCH] Expo Web sign-in-or-up docs (#1794) Co-authored-by: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> --- docs/manifest.json | 8 ++- ...ages.mdx => custom-sign-in-or-up-page.mdx} | 33 ++++------ .../expo/web-support/custom-sign-up-page.mdx | 66 +++++++++++++++++++ 3 files changed, 85 insertions(+), 22 deletions(-) rename docs/references/expo/web-support/{custom-signup-signin-pages.mdx => custom-sign-in-or-up-page.mdx} (63%) create mode 100644 docs/references/expo/web-support/custom-sign-up-page.mdx diff --git a/docs/manifest.json b/docs/manifest.json index c9ba7a21ef..b57ad0c7fc 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -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" } ] ] @@ -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" } ] ] diff --git a/docs/references/expo/web-support/custom-signup-signin-pages.mdx b/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx similarity index 63% rename from docs/references/expo/web-support/custom-signup-signin-pages.mdx rename to docs/references/expo/web-support/custom-sign-in-or-up-page.mdx index 5890a38cdf..6a85e78499 100644 --- a/docs/references/expo/web-support/custom-signup-signin-pages.mdx +++ b/docs/references/expo/web-support/custom-sign-in-or-up-page.mdx @@ -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 [``](/docs/components/authentication/sign-in) and [``](/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 [``](/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. - ### Build a sign-up page + ## Build a sign-in-or-up page - The following example demonstrates how to render the [``](/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 - } - ``` - - ### Build a sign-in page - - The following example demonstrates how to render the [``](/docs/components/authentication/sign-in) component. + The following example demonstrates how to render the [``](/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' @@ -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: @@ -50,7 +38,7 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th ``` - 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). ## More resources @@ -58,6 +46,11 @@ This guide uses [Expo Router](https://docs.expo.dev/router/introduction/) and th 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. + - [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. diff --git a/docs/references/expo/web-support/custom-sign-up-page.mdx b/docs/references/expo/web-support/custom-sign-up-page.mdx new file mode 100644 index 0000000000..2b5e0c4bf8 --- /dev/null +++ b/docs/references/expo/web-support/custom-sign-up-page.mdx @@ -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 [``](/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. + + + ## Build a sign-up page + + The following example demonstrates how to render the [``](/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 + } + ``` + + ## Visit your new page + + To run your project, use the following command: + + + ```bash filename="terminal" + npm run web + ``` + + ```bash filename="terminal" + yarn web + ``` + + ```bash filename="terminal" + pnpm web + ``` + + + Visit your new custom pages locally at [localhost:8081/sign-up](http://localhost:8081/sign-up). + + +## 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. + + + - [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. +