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

[DO NOT MERGE] Sign-in-or-up docs #1772

Open
wants to merge 31 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
d3ab30d
init
alexcarpenter Dec 4, 2024
be8cb9e
Create custom-combined-sign-in-or-up-page.mdx
alexcarpenter Dec 4, 2024
8d5fbd9
wip
alexcarpenter Dec 4, 2024
fdb9555
format
alexcarpenter Dec 4, 2024
cc2f39e
updates
alexcarpenter Dec 6, 2024
89d772c
updates
alexcarpenter Dec 6, 2024
902709e
fix link
alexcarpenter Dec 6, 2024
daaf49c
Delete custom-signup-signin-pages.mdx
alexcarpenter Dec 9, 2024
a592b6a
or
alexcarpenter Dec 9, 2024
866f4dc
Update custom-sign-in-or-up-page.mdx
alexcarpenter Dec 9, 2024
1df7dd1
update links
alexcarpenter Dec 9, 2024
b699ea3
fix path
alexcarpenter Dec 9, 2024
9d5a91f
format
alexcarpenter Dec 9, 2024
eeebedc
Merge branch 'main' into alexcarpenter/sdki-747-launch-draft-docs-cha…
alexcarpenter Dec 9, 2024
bf5ae13
update account portal overview
alexcarpenter Dec 9, 2024
9aa364b
update account portal links
alexcarpenter Dec 9, 2024
3777c6b
update headings in steps component
alexisintech Dec 12, 2024
c3ec4df
Merge branch 'main' into alexcarpenter/sdki-747-launch-draft-docs-cha…
alexisintech Dec 12, 2024
6a6b3ab
Expo Web sign-in-or-up docs (#1794)
alexcarpenter Dec 13, 2024
44424db
TanStack Start sign-in-or-up docs (#1792)
alexcarpenter Dec 13, 2024
4a16540
Remix sign-in-or-up docs (#1791)
alexcarpenter Dec 13, 2024
7ab95dd
Merge branch 'main' into alexcarpenter/sdki-747-launch-draft-docs-cha…
alexcarpenter Dec 13, 2024
c526103
Merge branch 'alexcarpenter/sdki-747-launch-draft-docs-changes' of gi…
alexcarpenter Dec 13, 2024
e2e150d
fix link
alexcarpenter Dec 13, 2024
507f71d
sign-up -> signup
alexcarpenter Dec 17, 2024
0c92c9d
Merge branch 'main' into alexcarpenter/sdki-747-launch-draft-docs-cha…
alexcarpenter Dec 17, 2024
df507be
sign-up vs signup
alexcarpenter Dec 17, 2024
e35aac7
fix manifest links
alexcarpenter Dec 17, 2024
da11741
React Router sign-in-or-up docs (#1821)
alexcarpenter Dec 17, 2024
2f59681
format
alexcarpenter Dec 18, 2024
a647b31
Update manifest.json
alexcarpenter Dec 18, 2024
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
2 changes: 1 addition & 1 deletion docs/authentication/configuration/legal-compliance.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Legal compliance
description: Learn how to configure your legal compliance settings in the Clerk Dashboard.
---

Clerk provides a legal compliance setting that allows you to require users to agree to your terms of service or privacy policy before they can sign up to your application. After enabling the setting, there will be a checkbox to accept the terms in your [`<SignUp />` component](/docs/components/authentication/sign-up) or [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up).
Clerk provides a legal compliance setting that allows you to require users to agree to your terms of service or privacy policy before they can sign up to your application. After enabling the setting, there will be a checkbox to accept the terms in your [`<SignUp />` component](/docs/components/authentication/sign-up) or [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-in-or-up).

To configure the setting:

Expand Down
4 changes: 2 additions & 2 deletions docs/components/authentication/sign-in.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Clerk's <SignIn /> component renders a UI for signing in users.

![The \<SignIn /> component renders a UI for signing in users.](/docs/images/ui-components/sign-in.png){{ style: { maxWidth: '460px' } }}

The `<SignIn />` component renders a UI for signing in users. The functionality of the `<SignIn />` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). You can further customize your `<SignIn />` component by passing additional [properties](#properties) at the time of rendering.
The `<SignIn />` component renders a UI to allow users to sign-in or sign-up by default. The functionality of the `<SignIn />` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-in and sign-up options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview). You can further customize your `<SignIn />` component by passing additional [properties](#properties) at the time of rendering.

> [!NOTE]
> The `<SignUp/>` and `<SignIn/>` components cannot render when a user is already signed in, unless the application allows multiple sessions. If a user is already signed in and the application only allows a single session, Clerk will redirect the user to the Home URL instead.
Expand Down Expand Up @@ -99,7 +99,7 @@ The following example includes basic implementation of the `<SignIn />` componen
<Tab>
The following example demonstrates how you can use the `<SignIn />` component on a public page.

If you would like to create a dedicated `/sign-in` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages).
If you would like to create a dedicated `/sign-in` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-sign-in-or-up-page).

```tsx {{ filename: 'app/page.tsx' }}
import { SignIn, useUser } from '@clerk/nextjs'
Expand Down
2 changes: 1 addition & 1 deletion docs/components/authentication/sign-up.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ The following example includes basic implementation of the `<SignUp />` componen
<Tab>
The following example demonstrates how you can use the `<SignUp />` component on a public page.

If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages).
If you would like to create a dedicated `/sign-up` page in your Next.js application, see the [dedicated guide](/docs/references/nextjs/custom-signup-page).

```tsx {{ filename: 'app/page.tsx' }}
import { SignUp, useUser } from '@clerk/nextjs'
Expand Down
2 changes: 1 addition & 1 deletion docs/custom-flows/embedded-email-links.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ This guide will demonstrate how to generate a sign-in token and use it to sign i
-d '{ "user_id": "user_123" }'
```

This will return a `url` property, which can be used as your email link. Keep in mind that this link will use the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in) to sign in the user.
This will return a `url` property, which can be used as your email link. Keep in mind that this link will use the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up) to sign in the user.

If you would rather use your own sign-in page, you can use the `token` property that is returned. Add the `token` as a query param in any link, such as the following example:

Expand Down
2 changes: 1 addition & 1 deletion docs/custom-flows/invitations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Learn how to use the Clerk API to build a custom flow for handling

<Include src="_partials/custom-flows-callout" />

When a user visits an [invitation](/docs/users/invitations) link, and no custom redirect URL was specified, then they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up) and **their email address will be automatically verified.**
When a user visits an [invitation](/docs/users/invitations) link, and no custom redirect URL was specified, then they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-in-or-up) and **their email address will be automatically verified.**

However, if you specified [a redirect URL when creating the invitation](/docs/users/invitations#redirect-url), you must handle the sign-up flow in your code for that page. You can either embed the [`<SignUp />`](/docs/components/authentication/sign-up) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API.

Expand Down
14 changes: 3 additions & 11 deletions docs/customization/account-portal/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,13 @@ For each application environment, Clerk provides pages for sign-up, sign-in, use

## Hosted pages

### Sign-in
### Sign-in-or-up

The sign-in page hosts the prebuilt [`<SignIn />`](/docs/components/authentication/sign-in) component, which renders a UI for signing in users. The functionality of the `<SignIn />` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview).
The sign-in page hosts the prebuilt [`<SignIn />`](/docs/components/authentication/sign-in) component, which renders a UI for allowing users to sign-in or up. The functionality of the `<SignIn />` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview).

![The Account Portal sign-in page hosts the \<SignIn /> component](/docs/images/account-portal/sign-in.png)

Redirect users to the sign-in page using the [`<RedirectToSignIn />`](/docs/components/control/redirect-to-signin) control component.

### Sign-up

The sign-up page hosts the prebuilt [`<SignUp />`](/docs/components/authentication/sign-up) component, which renders a UI for signing up users. The functionality of the `<SignUp />` component is controlled by the instance settings you specify in the [Clerk Dashboard](https://dashboard.clerk.com), such as [sign-up and sign-in options](/docs/authentication/configuration/sign-up-sign-in-options) and [social connections](/docs/authentication/social-connections/overview).

![The Account Portal sign-up page hosts the \<SignUp /> component](/docs/images/account-portal/sign-up.png)

Redirect users to the sign-up page using the [`<RedirectToSignUp />`](/docs/components/control/redirect-to-signup) control component.
Redirect users to the sign-in page using the [`<RedirectToSignIn />`](/docs/components/control/redirect-to-signin) control component. Redirect users to the sign-up flow using the [`<RedirectToSignUp />`](/docs/components/control/redirect-to-signup) control component.

### User profile

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/authjs-migration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ This guide shows how to migrate an application using Auth.js (formerly NextAuth.

If Clerk's Account Portal pages aren't a good fit your app, you can build a custom sign-in and sign-up UI in one of two ways:

- use the [prebuilt components](/docs/references/nextjs/custom-signup-signin-pages), such as the [`<SignIn />`](/docs/components/authentication/sign-in) and [`<SignUp />`](/docs/components/authentication/sign-up) components
- use the [prebuilt components](/docs/references/nextjs/custom-sign-in-or-up-page), such as the [`<SignIn />`](/docs/components/authentication/sign-in) and [`<SignUp />`](/docs/components/authentication/sign-up) components
- build a [fully custom UI using the Clerk API](/docs/custom-flows/overview), leveraging Clerk's React hooks such as [`useSignIn()`](/docs/references/react/use-sign-in) and [`useSignUp()`](/docs/references/react/use-sign-up)

## Protect your app
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/waitlist.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ In [**Waitlist** mode](/docs/authentication/configuration/restrictions#waitlist)
}
```

Update your environment variables to point to your custom sign-in page. For more information on building custom sign-in and sign-up pages, see the [dedicated guide](/docs/references/nextjs/custom-signup-signin-pages).
Update your environment variables to point to your custom sign-in page. For more information on building a custom sign-in-or-up page, see the [dedicated guide](/docs/references/nextjs/custom-sign-in-or-up-page).

```env {{ filename: '.env.local' }}
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
Expand Down
2 changes: 1 addition & 1 deletion docs/integrations/databases/firebase.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ Integrating Firebase with Clerk gives you the benefits of using Firebase's featu

---

- [Create custom sign-up and sign-in pages in your Next.js app](/docs/references/nextjs/custom-signup-signin-pages)
- [Create a custom sign-in-or-up page in your Next.js app](/docs/references/nextjs/custom-sign-in-or-up-page)
- Learn how add custom sign-up and sign-in pages with Clerk components in your Next.js application.

---
Expand Down
20 changes: 12 additions & 8 deletions docs/manifest.json
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you still need to add the custom-sign-up-page routes for all of these

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added in. a647b31

Original file line number Diff line number Diff line change
Expand Up @@ -1778,8 +1778,8 @@
"href": "/docs/references/nextjs/read-session-data"
},
{
"title": "Add custom sign up and sign in pages",
"href": "/docs/references/nextjs/custom-signup-signin-pages"
"title": "Add a custom sign-in-or-up page",
"href": "/docs/references/nextjs/custom-sign-in-or-up-page"
},
{
"title": "Integrate Clerk into your app with tRPC",
Expand Down Expand Up @@ -2296,8 +2296,8 @@
"href": "/docs/references/expo/use-local-credentials"
},
{
"title": "useOAuth()",
"href": "/docs/references/expo/use-oauth"
alexcarpenter marked this conversation as resolved.
Show resolved Hide resolved
"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 Expand Up @@ -2469,9 +2473,9 @@
"href": "/docs/references/remix/spa-mode"
},
{
"title": "Add custom sign up and sign in pages",
"title": "Add custom sign-in-or-up page",
"wrap": true,
"href": "/docs/references/remix/custom-signup-signin-pages"
"href": "/docs/references/remix/custom-sign-in-or-up-page"
},
{
"title": "Read session and user data",
Expand Down Expand Up @@ -2512,8 +2516,8 @@
"items": [
[
{
"title": "Add custom sign up and sign in pages",
"href": "/docs/references/tanstack-start/custom-signup-signin-pages",
"title": "Add custom sign-in-or-up-page",
"href": "/docs/references/tanstack-start/custom-sign-in-or-up-page",
"wrap": true
},
{
Expand Down
2 changes: 1 addition & 1 deletion docs/organizations/accept-organization-invitations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Learn how to use the Clerk API to build a custom flows for handling

<Include src="_partials/custom-flows-callout" />

When a user visits an [organization invitation](/docs/organizations/invitations) link, and no custom redirect URL was specified, and they have an account for your application, then they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). If they do not have an account for your application, they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-up).
When a user visits an [organization invitation](/docs/organizations/invitations) link, and no custom redirect URL was specified, and they have an account for your application, then they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up). If they do not have an account for your application, they will be redirected to the [Account Portal sign-up page](/docs/customization/account-portal/overview#sign-in-or-up).

However, if you specified [a redirect URL when creating the invitation](/docs/users/invitations#redirect-url), you must handle the sign-up and sign-in flows in your code for that page. You can either embed the [`<SignIn /`>](/docs/components/authentication/sign-in) component on that page, or if the prebuilt component doesn't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API.

Expand Down
2 changes: 1 addition & 1 deletion docs/organizations/invitations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Learn how to invite users to your organization.

Organization invitations allow you to add new members to your organization, granting them access to organization-specific features and resources.

Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the organization invitation link, they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). If the user is already signed in, they will be redirected to your application's homepage (`/`). If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation](#redirect-url).
Once you create an invitation, Clerk sends an email to the invited user with a unique invitation link. When the user visits the organization invitation link, they will be redirected to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up). If the user is already signed in, they will be redirected to your application's homepage (`/`). If you want to redirect the user to a specific page in your application, you can [specify a redirect URL when creating the invitation](#redirect-url).

## Create an invitation

Expand Down
2 changes: 1 addition & 1 deletion docs/quickstarts/astro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ description: Add authentication and user management to your Astro app with Clerk
- [`<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): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in).
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up).

```astro {{ filename: 'src/layouts/SiteLayout.astro' }}
---
Expand Down
6 changes: 3 additions & 3 deletions docs/quickstarts/nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ description: Add authentication and user management to your Next.js app with Cle
- [`<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): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in).
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in-or-up).

Select your preferred router to learn how to make this data available across your entire app:

Expand Down Expand Up @@ -186,8 +186,8 @@ description: Add authentication and user management to your Next.js app with Cle

---

- [Create custom sign-up and sign-in pages](/docs/references/nextjs/custom-signup-signin-pages)
- Learn how add custom sign-up and sign-in pages with Clerk components.
- [Create a custom sign-in or sign-up page](/docs/references/nextjs/custom-sign-in-or-up-page)
- Learn how add a custom sign-in or sign-up page with Clerk components.

---

Expand Down
Loading
Loading