# SignInView component for Stripe Apps Use SignInView to allow apps to render a sign in screen. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/signinview?app-sdk-version=8. Use the `SignInView` component to display a graphic with your app’s icon next to Stripe’s, a short description of your sign in process, action buttons, and so on. If your app requires users to sign in, the `SignInView` component is required to make sure users clearly understand that they’re connecting to Stripe. ![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-01.fea0b34449e5808d68c542be4a4301dc.png) A SignInView example displayed in the drawer. ![](https://b.stripecdn.com/docs-statics-srv/assets/settings-sign-in-01.b57a79fdec455f0d7fe7ab5c4446cd2c.png) SignInView used on the [settings page](https://docs.stripe.com/stripe-apps/app-settings.md). ### SignInView props | Property | Type | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `brandColor` | (Optional) `string | undefined` A CSS color that contrasts well with `brandIcon`. | | `brandIcon` | (Optional) `string | undefined` A square, 1-color SVG that contrasts well with `brandColor`. | | `description` | (Optional) `string | undefined` A paragraph description of the app and its features. | | `descriptionActionContents` | (Optional) `React.ReactNode` Description action contents that open in a `FocusView`. | | `descriptionActionLabel` | (Optional) `string | undefined` An action label (“Learn more” or “View demo”, for example) below the description. | | `descriptionActionTitle` | (Optional) `string | undefined` The title in the `FocusView` for the description action. | | `footerContent` | (Optional) `React.ReactNode` React node below the primary action in the footer. | | `primaryAction` | (Optional) `(SignInActionWithHref | SignInActionWithOnPress) | undefined` Related types: [SignInActionWithHref](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithhref), [SignInActionWithOnPress](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithonpress). | | `secondaryAction` | (Optional) `(SignInActionWithHref | SignInActionWithOnPress) | undefined` Related types: [SignInActionWithHref](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithhref), [SignInActionWithOnPress](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithonpress). | ### SignInActionWithHref | Property | Type | | --------- | -------------------------------------------------------- | | `href` | (Required) `string` | | `label` | (Required) `string` | | `onPress` | (Optional) `((event: PressEvent) => void) | undefined` | | `target` | (Optional) `string | undefined` | ### SignInActionWithOnPress | Property | Type | | --------- | ------------------------------------------ | | `label` | (Required) `string` | | `onPress` | (Required) `(event: PressEvent) => void` | | `href` | (Optional) `string | undefined` | | `target` | (Optional) `string | undefined` | ## Example ## Additional context Before a user signs in, you might want to display a demo, a detailed description of your app, or screenshots. Remember that at this point the user has already installed your app so they should be motivated to sign in, but if you want to show additional context, you can do it in a focused view using the `descriptionActionLabel`, `descriptionActionTitle`, and `descriptionActionContents` properties. For example: ![](https://b.stripecdn.com/docs-statics-srv/assets/contextview-wide.05a45f6c9e0e4af6a0e47d783badb9f6.png) # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/signinview?app-sdk-version=9. Use the `SignInView` component to display a graphic with your app’s icon next to Stripe’s, a short description of your sign in process, action buttons, and so on. If your app requires users to sign in, the `SignInView` component is required to make sure users clearly understand that they’re connecting to Stripe. ![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-01.fea0b34449e5808d68c542be4a4301dc.png) A SignInView example displayed in the drawer. ![](https://b.stripecdn.com/docs-statics-srv/assets/settings-sign-in-01.b57a79fdec455f0d7fe7ab5c4446cd2c.png) SignInView used on the [settings page](https://docs.stripe.com/stripe-apps/app-settings.md). ### SignInView props | Property | Type | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `brandColor` | (Optional) `string | undefined` A CSS color that contrasts well with `brandIcon`. | | `brandIcon` | (Optional) `string | undefined` A square, 1-color SVG that contrasts well with `brandColor`. | | `description` | (Optional) `string | undefined` A paragraph description of the app and its features. | | `descriptionActionContents` | (Optional) `React.ReactNode` Description action contents that open in a `FocusView`. | | `descriptionActionLabel` | (Optional) `string | undefined` An action label (“Learn more” or “View demo”, for example) below the description. | | `descriptionActionTitle` | (Optional) `string | undefined` The title in the `FocusView` for the description action. | | `footerContent` | (Optional) `React.ReactNode` React node below the primary action in the footer. | | `primaryAction` | (Optional) `(SignInActionWithHref | SignInActionWithOnPress) | undefined` Related types: [SignInActionWithHref](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithhref), [SignInActionWithOnPress](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithonpress). | | `secondaryAction` | (Optional) `(SignInActionWithHref | SignInActionWithOnPress) | undefined` Related types: [SignInActionWithHref](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithhref), [SignInActionWithOnPress](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithonpress). | ### SignInActionWithHref | Property | Type | | --------- | -------------------------------------------------------- | | `href` | (Required) `string` | | `label` | (Required) `string` | | `onPress` | (Optional) `((event: PressEvent) => void) | undefined` | | `target` | (Optional) `string | undefined` | ### SignInActionWithOnPress | Property | Type | | --------- | ------------------------------------------ | | `label` | (Required) `string` | | `onPress` | (Required) `(event: PressEvent) => void` | | `href` | (Optional) `string | undefined` | | `target` | (Optional) `string | undefined` | ## Example ## Additional context Before a user signs in, you might want to display a demo, a detailed description of your app, or screenshots. Remember that at this point the user has already installed your app so they should be motivated to sign in, but if you want to show additional context, you can do it in a focused view using the `descriptionActionLabel`, `descriptionActionTitle`, and `descriptionActionContents` properties. For example: ![](https://b.stripecdn.com/docs-statics-srv/assets/contextview-wide.05a45f6c9e0e4af6a0e47d783badb9f6.png) ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)