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

[WIP] Sign-in-or-up docs #1772

Draft
wants to merge 16 commits into
base: main
Choose a base branch
from
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 @@ -116,7 +116,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
4 changes: 2 additions & 2 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -1761,8 +1761,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
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
2 changes: 1 addition & 1 deletion docs/quickstarts/remix.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ 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): 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)

```tsx {{ filename: 'routes/_index.tsx' }}
import {
Expand Down
2 changes: 1 addition & 1 deletion docs/quickstarts/tanstack-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat
- [`<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).

```tsx {{ filename: 'app/routes/index.tsx' }}
import {
Expand Down
Loading
Loading