# Sign in template for Stripe Apps

Learn how to use the SignInView component with your app.

If your app requires users to sign in, the `SignInView` component is required to ensure users clearly understand that they’re connecting to Stripe.

## Before you begin

[Create an app](https://docs.stripe.com/stripe-apps/create-app.md).

## Suggested use

- To avoid compromising users’ passwords, never ask users to share their full set of credentials with Stripe.
- Keep content lightweight and focused. Avoid any links that might take users away from the onboarding flow. For example:
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-01.fea0b34449e5808d68c542be4a4301dc.png)
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-02.65d673b4703531cf35dd1847941c7eff.png)

- Provide users the option to sign into an existing account or sign up for a new account.
- Use call-to-action labels that are consistent with your own onboarding flow outside of Stripe. For example:
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-03.b3bce56fcedbe430099ebe2155a86537.png)

## Example

To add the component to your app:

```jsx
import {SignInView} from '@stripe/ui-extension-sdk/ui';
```

The following sample shows a `SignInView` component:

```jsx
<SignInView
  description="Connect your SuperTodo account with Stripe."
  primaryAction={{label: 'Sign in', href: 'https://example.com'}}
  footerContent={
    <>
      Don't have an account? <Link href="https://example.com">Sign up</Link>
    </>
  }
  brandColor="#635bff"
  brandIcon={appIcon}
/>
```