diff --git a/docs/_partials/ios/customization.mdx b/docs/_partials/ios/customization.mdx index b1dfe39c35..dc988aae07 100644 --- a/docs/_partials/ios/customization.mdx +++ b/docs/_partials/ios/customization.mdx @@ -1,3 +1,3 @@ -To learn how to customize Clerk iOS components, see the [dedicated guide](/docs/reference/ios/clerk-theme). +To learn how to customize Clerk iOS views, see the [dedicated guide](/docs/reference/ios/clerk-theme). -If Clerk's prebuilt components don'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. For more information, see the [custom flow guides](/docs/guides/development/custom-flows/overview). +If Clerk's prebuilt views don'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. For more information, see the [custom flow guides](/docs/guides/development/custom-flows/overview). diff --git a/docs/getting-started/quickstart.ios.mdx b/docs/getting-started/quickstart.ios.mdx index 49b8407892..7cf67afc76 100644 --- a/docs/getting-started/quickstart.ios.mdx +++ b/docs/getting-started/quickstart.ios.mdx @@ -105,11 +105,11 @@ icon: "clerk", } ``` - ## Use Clerk's prebuilt components + ## Use Clerk's prebuilt views - Clerk provides prebuilt SwiftUI components that handle authentication flows and user management, eliminating the need to build custom forms and flows. + Clerk provides prebuilt SwiftUI views that handle authentication flows and user management, eliminating the need to build custom forms and flows. - Update your `ContentView` to use Clerk's prebuilt components. Replace the existing content with the following code: + Update your `ContentView` to use Clerk's prebuilt views. Replace the existing content with the following code: ```swift {{ filename: 'ContentView.swift', mark: [2, 5, 6, [9, 21]] }} import SwiftUI @@ -137,11 +137,11 @@ icon: "clerk", } ``` - The updated `ContentView` uses two key Clerk components: + The updated `ContentView` uses two key Clerk views: - - [`AuthView`](/docs/reference/components/authentication/auth-view): A comprehensive authentication view that handles sign-in and sign-up flows, including email verification, password reset, and multi-factor authentication. It's presented as a sheet when the user taps "Sign in". + - [`AuthView`](/docs/reference/views/authentication/auth-view): A comprehensive authentication view that handles sign-in and sign-up flows, including email verification, password reset, and multi-factor authentication. It's presented as a sheet when the user taps "Sign in". - - [`UserButton`](/docs/reference/components/user/user-button): A circular button that displays the user's profile image. When tapped, it automatically presents the [`UserProfileView`](/docs/reference/components/user/user-profile-view) where users can manage their account, update their profile, and sign out. + - [`UserButton`](/docs/reference/views/user/user-button): A circular button that displays the user's profile image. When tapped, it automatically presents the [`UserProfileView`](/docs/reference/views/user/user-profile-view) where users can manage their account, update their profile, and sign out. ## Create your first user diff --git a/docs/index.mdx b/docs/index.mdx index 1ec5c5b107..90dbd0d524 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -6,29 +6,59 @@ template: wide Find all the guides and resources you need to develop with Clerk. - - - [Quickstarts & Tutorials](/docs/getting-started/quickstart/overview) - - Explore our end-to-end tutorials and getting started guides for different application stacks using Clerk. - - {} + + + - [Quickstarts & Tutorials](/docs/getting-started/quickstart/overview) + - Explore our end-to-end tutorials and getting started guides for different application stacks using Clerk. + - {} - --- + --- - - [UI Components](/docs/reference/components/overview) - - Clerk's prebuilt UI components give you a beautiful, fully-functional user management experience in minutes. - - {} + - [UI Components](/docs/reference/components/overview) + - Clerk's prebuilt UI components give you a beautiful, fully-functional user management experience in minutes. + - {} - --- + --- - - [SDK Reference](/docs/reference/overview) - - Dig into our SDK reference documentation. We have everything you need to get started setting up authentication with Clerk. - - {} + - [SDK Reference](/docs/reference/overview) + - Dig into our SDK reference documentation. We have everything you need to get started setting up authentication with Clerk. + - {} - --- + --- - - [Security](/docs/guides/secure/restricting-access) - - Account security is the top concern of every feature we build. This documentation lists some of the many protections included with Clerk. - - {} - + - [Security](/docs/guides/secure/restricting-access) + - Account security is the top concern of every feature we build. This documentation lists some of the many protections included with Clerk. + - {} + + + + + + - [Quickstarts & Tutorials](/docs/getting-started/quickstart/overview) + - Explore our end-to-end tutorials and getting started guides for different application stacks using Clerk. + - {} + + --- + + - [Views](/docs/reference/views/overview) + - Clerk's prebuilt Views give you a beautiful, fully-functional user management experience in minutes. + - {} + + --- + + - [SDK Reference](/docs/reference/overview) + - Dig into our SDK reference documentation. We have everything you need to get started setting up authentication with Clerk. + - {} + + --- + + - [Security](/docs/guides/secure/restricting-access) + - Account security is the top concern of every feature we build. This documentation lists some of the many protections included with Clerk. + - {} + + ## Explore by frontend framework diff --git a/docs/manifest.json b/docs/manifest.json index 5792461b6e..13bd84641e 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -3099,10 +3099,6 @@ { "title": "``", "href": "/docs/reference/components/authentication/waitlist" - }, - { - "title": "`AuthView`", - "href": "/docs/reference/components/authentication/auth-view" } ] ] @@ -3114,33 +3110,11 @@ [ { "title": "``", - "href": "/docs/reference/components/user/user-button", - "sdk": [ - "astro", - "chrome-extension", - "expo", - "nextjs", - "nuxt", - "react", - "react-router", - "remix", - "tanstack-react-start", - "vue", - "js-frontend" - ] - }, - { - "title": "`UserButton`", - "href": "/docs/reference/components/user/user-button", - "sdk": ["ios"] + "href": "/docs/reference/components/user/user-button" }, { "title": "``", "href": "/docs/reference/components/user/user-profile" - }, - { - "title": "`UserProfileView`", - "href": "/docs/reference/components/user/user-profile-view" } ] ] @@ -3289,6 +3263,48 @@ ] } ], + [ + { + "title": "Views", + "icon": "box", + "items": [ + [ + { + "title": "Overview", + "href": "/docs/reference/views/overview" + }, + { + "title": "Authentication views", + "collapse": false, + "items": [ + [ + { + "title": "`AuthView`", + "href": "/docs/reference/views/authentication/auth-view" + } + ] + ] + }, + { + "title": "User views", + "collapse": false, + "items": [ + [ + { + "title": "`UserButton`", + "href": "/docs/reference/views/user/user-button" + }, + { + "title": "`UserProfileView`", + "href": "/docs/reference/views/user/user-profile-view" + } + ] + ] + } + ] + ] + } + ], [ { "title": "API Reference", diff --git a/docs/reference/components/overview.ios.mdx b/docs/reference/components/overview.ios.mdx deleted file mode 100644 index 5e75c4abab..0000000000 --- a/docs/reference/components/overview.ios.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Component Reference -description: A list of Clerk's comprehensive suite of components designed to seamlessly integrate authentication and multi-tenancy into your application. -sdk: ios ---- - -Clerk offers a comprehensive suite of components designed to seamlessly integrate authentication and multi-tenancy into your application. With Clerk components, you can easily customize the appearance of authentication components and pages, manage the entire authentication flow to suit your specific needs, and even build robust SaaS applications. - -## Clerk iOS components - -- [`AuthView`](/docs/reference/components/authentication/auth-view) - Renders a full authentication interface, supporting multiple sign-up and sign-in methods, multi-factor authentication (MFA), and password recovery flows. -- [`UserButton`](/docs/reference/components/user/user-button) - Displays the signed-in user's profile image. -- [`UserProfileView`](/docs/reference/components/user/user-profile-view) - Renders a complete user profile interface with personal information, security settings, account switching, and sign-out options. - -## Customization - - - -### Secured by Clerk branding - - - -By default, Clerk displays a **Secured by Clerk** badge on Clerk components. You can remove this branding by following these steps: - -1. In the Clerk Dashboard, navigate to your application's [**Settings**](https://dashboard.clerk.com/~/settings). -1. Under **Branding**, toggle on the **Remove "Secured by Clerk" branding** option. - - diff --git a/docs/reference/ios/clerk-theme.mdx b/docs/reference/ios/clerk-theme.mdx index c75443ec8b..c3c0ef56b5 100644 --- a/docs/reference/ios/clerk-theme.mdx +++ b/docs/reference/ios/clerk-theme.mdx @@ -1,10 +1,10 @@ --- title: '`ClerkTheme`' -description: Utilize Clerk's ClerkTheme to adjust the general styles of the iOS components, like colors, fonts, and design properties. +description: Utilize Clerk's ClerkTheme to adjust the general styles of the iOS views, like colors, fonts, and design properties. sdk: ios --- -The `ClerkTheme` is used to customize the appearance of Clerk iOS components by adjusting colors, fonts, and design properties. It provides a comprehensive theming system that allows you to create a consistent visual experience across all Clerk components. +The `ClerkTheme` is used to customize the appearance of Clerk iOS views by adjusting colors, fonts, and design properties. It provides a comprehensive theming system that allows you to create a consistent visual experience across all Clerk views. ## Structure @@ -22,7 +22,7 @@ The `colors` property contains the following color options: - `primary` - `Color` - The primary color used throughout the components. + The primary color used throughout the views. --- @@ -92,7 +92,7 @@ The `colors` property contains the following color options: - `neutral` - `Color` - The color that will be used to generate the neutral shades the components use. + The color that will be used to generate the neutral shades the views use. --- @@ -113,14 +113,14 @@ The `colors` property contains the following color options: - `shadow` - `Color` - The base shadow color used in the components. + The base shadow color used in the views. --- - `border` - `Color` - The base border color used in the components. + The base border color used in the views. ## Fonts @@ -190,16 +190,16 @@ The `design` property contains the following design options: - `borderRadius` - `CGFloat` - The border radius used throughout the components. By default, this is set to `6.0`. + The border radius used throughout the views. By default, this is set to `6.0`. ## Usage -You can customize Clerk iOS components by creating a `ClerkTheme` and applying it to the SwiftUI environment. +You can customize Clerk iOS views by creating a `ClerkTheme` and applying it to the SwiftUI environment. -### Apply a custom theme to all Clerk components +### Apply a custom theme to all Clerk views -To customize all Clerk components in your app, create a `ClerkTheme` and apply it to your root view using the environment. +To customize all Clerk views in your app, create a `ClerkTheme` and apply it to your root view using the environment. ```swift import SwiftUI @@ -224,9 +224,9 @@ struct MyApp: App { } ``` -### Apply a theme to specific components +### Apply a theme to specific views -You can apply a theme to specific Clerk components by using the environment modifier on individual views. The theme used here will apply to all children of this view. +You can apply a theme to specific Clerk views by using the environment modifier on individual views. The theme used here will apply to all children of this view. ```swift struct SignInView: View { @@ -298,7 +298,7 @@ struct CustomFontView: View { ## Light and Dark Mode Support -Clerk iOS components automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences. +Clerk iOS views automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences.
![Light Mode](/docs/images/ui-components/ios-user-profile-view.png){{ style: { maxWidth: '230px' } }} diff --git a/docs/reference/components/authentication/auth-view.mdx b/docs/reference/views/authentication/auth-view.mdx similarity index 97% rename from docs/reference/components/authentication/auth-view.mdx rename to docs/reference/views/authentication/auth-view.mdx index ecc22d037c..f0757d2ed1 100644 --- a/docs/reference/components/authentication/auth-view.mdx +++ b/docs/reference/views/authentication/auth-view.mdx @@ -32,7 +32,7 @@ The `AuthView` renders a comprehensive authentication interface with support for ## Usage -The following examples show how to use the `AuthView` component in your iOS app. +The following examples show how to use the `AuthView` in your iOS app. ### Basic usage as a dismissable sheet diff --git a/docs/reference/views/overview.mdx b/docs/reference/views/overview.mdx new file mode 100644 index 0000000000..5e21b4b229 --- /dev/null +++ b/docs/reference/views/overview.mdx @@ -0,0 +1,28 @@ +--- +title: View Reference +description: A list of Clerk's comprehensive suite of views designed to seamlessly integrate authentication and multi-tenancy into your application. +sdk: ios +--- + +Clerk offers a comprehensive suite of views designed to seamlessly integrate authentication and multi-tenancy into your application. With Clerk views, you can easily customize the appearance of authentication views and pages, manage the entire authentication flow to suit your specific needs, and even build robust SaaS applications. + +## Clerk iOS views + +- [`AuthView`](/docs/reference/views/authentication/auth-view) - Renders a full authentication interface, supporting multiple sign-up and sign-in methods, multi-factor authentication (MFA), and password recovery flows. +- [`UserButton`](/docs/reference/views/user/user-button) - Displays the signed-in user's profile image. +- [`UserProfileView`](/docs/reference/views/user/user-profile-view) - Renders a complete user profile interface with personal information, security settings, account switching, and sign-out options. + +## Customization + + + +### Secured by Clerk branding + + + +By default, Clerk displays a **Secured by Clerk** badge on Clerk views. You can remove this branding by following these steps: + +1. In the Clerk Dashboard, navigate to your application's [**Settings**](https://dashboard.clerk.com/~/settings). +1. Under **Branding**, toggle on the **Remove "Secured by Clerk" branding** option. + + diff --git a/docs/reference/components/user/user-button.ios.mdx b/docs/reference/views/user/user-button.mdx similarity index 59% rename from docs/reference/components/user/user-button.ios.mdx rename to docs/reference/views/user/user-button.mdx index 4d53ca9226..8f99fce5e3 100644 --- a/docs/reference/components/user/user-button.ios.mdx +++ b/docs/reference/views/user/user-button.mdx @@ -1,19 +1,19 @@ --- title: '`UserButton`' -description: Clerk's UserButton component renders a circular button that displays the current user's profile image and opens the user profile when tapped. +description: Clerk's UserButton renders a circular button that displays the current user's profile image and opens the user profile when tapped. sdk: ios --- -![The UserButton component is a circular button that displays the signed-in user's profile image.](/docs/images/ui-components/ios-user-button.png) +![The UserButton is a circular button that displays the signed-in user's profile image.](/docs/images/ui-components/ios-user-button.png) -The `UserButton` component is a circular button that displays the signed-in user's profile image. When tapped, it presents a sheet with the [`UserProfileView`](/docs/reference/components/user/user-profile-view). +The `UserButton` is a circular button that displays the signed-in user's profile image. When tapped, it presents a sheet with the [`UserProfileView`](/docs/reference/views/user/user-profile-view). > [!IMPORTANT] > The `UserButton` only appears when a user is signed in. ## Usage -The following examples show how to use the `UserButton` component in your iOS app. +The following examples show how to use the `UserButton` in your iOS app. ### Basic usage diff --git a/docs/reference/components/user/user-profile-view.mdx b/docs/reference/views/user/user-profile-view.mdx similarity index 65% rename from docs/reference/components/user/user-profile-view.mdx rename to docs/reference/views/user/user-profile-view.mdx index e36b529966..81af990dcc 100644 --- a/docs/reference/components/user/user-profile-view.mdx +++ b/docs/reference/views/user/user-profile-view.mdx @@ -1,12 +1,12 @@ --- title: '`UserProfileView`' -description: Clerk's UserProfileView component renders a beautiful, full-featured account management UI that allows users to manage their profile and security settings. +description: Clerk's UserProfileView renders a beautiful, full-featured account management UI that allows users to manage their profile and security settings. sdk: ios --- -![The UserProfileView component renders a comprehensive user profile interface that displays user information and provides account management options.](/docs/images/ui-components/ios-user-profile-view.png){{ style: { maxWidth: '460px' } }} +![The UserProfileView renders a comprehensive user profile interface that displays user information and provides account management options.](/docs/images/ui-components/ios-user-profile-view.png){{ style: { maxWidth: '460px' } }} -The `UserProfileView` component renders a comprehensive user profile interface that displays user information and provides account management options. It includes personal information, security settings, account switching, and sign-out functionality. +The `UserProfileView` renders a comprehensive user profile interface that displays user information and provides account management options. It includes personal information, security settings, account switching, and sign-out functionality. > [!IMPORTANT] > The `UserProfileView` only appears when a user is signed in. @@ -22,7 +22,7 @@ The `UserProfileView` component renders a comprehensive user profile interface t ## Usage -The following examples show how to use the `UserProfileView` component in your iOS app. +The following examples show how to use the `UserProfileView` in your iOS app. ### Dismissible sheet presentation diff --git a/package.json b/package.json index aca5cc8d7d..c76c8c7f94 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "typedoc:link": "tsx scripts/link-typedoc.ts", "typedoc:extract-pages": "tsx scripts/extract-typedoc-pages.ts", "typedoc:extract-pages:with-src": "tsx scripts/extract-typedoc-pages.ts --with-src", - "move-doc": "node scripts/move-doc.mjs", + "move-doc": "bun scripts/move-doc.ts", "delete-doc": "node scripts/delete-doc.mjs", "migrate-sdk-scoping": "tsx scripts/migrate-sdk-scoping.ts", "migrate-api-reference-links": "tsx scripts/migrate-api-reference-links.ts" diff --git a/redirects/static/docs.json b/redirects/static/docs.json index 5d87745b86..5cdfd7e25e 100644 --- a/redirects/static/docs.json +++ b/redirects/static/docs.json @@ -4178,5 +4178,25 @@ "source": "/docs/authentication/saml/google", "destination": "/docs/guides/configure/auth-strategies/enterprise-connections/saml/google", "permanent": true + }, + { + "source": "/docs/ios/reference/components/overview", + "destination": "/docs/reference/views/overview", + "permanent": true + }, + { + "source": "/docs/reference/components/authentication/auth-view", + "destination": "/docs/reference/views/authentication/auth-view", + "permanent": true + }, + { + "source": "/docs/ios/reference/components/user/user-button", + "destination": "/docs/reference/views/user/user-button", + "permanent": true + }, + { + "source": "/docs/reference/components/user/user-profile-view", + "destination": "/docs/reference/views/user/user-profile-view", + "permanent": true } ]