---
title: "Ready-made sign-in screen"
description: "Open Abrova's sign-in screen from your app with one call, like FirebaseUI: e-mail and password, magic link, Telegram, Google, Apple and guest, in English and Persian. No forms to build."
product: auth
language: en
url: https://abrova.ir/en/docs/auth/sign-in-ui
updated: 2026-11-08
---

# Ready-made sign-in screen

Open Abrova's sign-in screen from your app with one call, like FirebaseUI: e-mail and password, magic link, Telegram, Google, Apple and guest, in English and Persian. No forms to build.

> **One call, no forms**
>
> Every Abrova Auth SDK has a ready-made sign-in screen, like FirebaseUI. Your app opens it, the user signs in, and the app gets the signed-in user back. It shows only the methods you turned on in **Abrova Auth › Sign-in methods**, in English or Persian, and it lives inside the SDK: nothing more to install and nothing hosted.

## Step 1: Open the screen

It opens as a dialog on wide screens and tablets and as a full screen on phones. It answers the signed-in user, or nothing when the user closed it.

```dart
// Flutter
import 'package:abrova_auth/abrova_auth_ui.dart';

final user = await AbrovaSignIn.show(context, options: const AbrovaSignInOptions(appName: 'My Shop'));
```

```swift
// iOS (15 and later)
import AbrovaAuth

if let result = await AbrovaSignIn.present(from: self, options: AbrovaSignInOptions(appName: "My Shop")) {
    print(result.userId)
}
```

```kotlin
// Android
AbrovaSignIn.show(this, options = AbrovaSignInOptions(appName = "My Shop")) { result ->
    if (result != null) Log.d("Auth", "signed in: ${result.userId}")
}
// or in a coroutine: val result = AbrovaSignIn.await(this)
```

```typescript
// Web (any framework, or none)
import { openSignIn } from '@abrova/auth-web/ui';

const result = await openSignIn(auth, { appName: 'My Shop' });
```

```tsx
// React Native
import { useAbrovaSignIn } from '@abrova/auth-react-native/ui';

const signIn = useAbrovaSignIn(auth, { appName: 'My Shop' });
// <Button title="Sign in" onPress={() => signIn.open()} /> and render {signIn.element}
```

The session is kept by the SDK as with any other sign-in, so `currentUser`, the token and the other Abrova SDKs work right away.

To put the form on a page of your own instead of a dialog: `AbrovaSignInScreen` (Flutter), `AbrovaSignInView` (iOS and Android), `mountSignIn(element, auth)` (Web), `<AbrovaSignInScreen />` (React Native).

## Step 2: Choose what it shows

The screen asks Abrova which methods are on and shows only those. Some also need something from your app:

| Method | Shown when |
| --- | --- |
| `E-mail and password` | It is on. Includes create account and forgot password. |
| `Magic link` | It is on and you pass magicLinkRedirectUrl, a link that opens your app. Your app finishes it with signInWithMagicLink(token), as without the screen. |
| `Telegram` | It is on. The user enters a phone number and the code Telegram sends. |
| `Google, Apple` | It is on and you pass a function that gets an ID token (see below). |
| `Guest` | Anonymous sign-in is on and you pass allowGuest = true. Off by default: every guest is a new user and counts toward your plan’s monthly active users. |

## Step 3: Options

| Option | What it does |
| --- | --- |
| `appName, logo` | The title (“Sign in to My Shop”) and an image above it. |
| `languageCode` | en or fa (right to left). Default: the app’s or device’s language, English when it is neither. |
| `allowGuest` | Shows “Continue as guest”. Default off. |
| `google, apple` | Your function that gets an ID token for the hashed nonce it is given. The button shows only when you pass it. |
| `magicLinkRedirectUrl` | Shows the magic link button. Must be one of the project’s allowed redirect URLs. |
| `verifyRedirectUrl, resetRedirectUrl` | Your own pages for the confirm and reset links. Default: Abrova’s own pages. |
| `openUrl` | Opens the Telegram bot link when the user must open the bot first. Without it the link is shown to copy. |
| `color (Web, React Native)` | The button colour. On the web also CSS variables such as --abrova-accent. |

The screen follows your app’s look: the theme on Flutter and Android, the tint on iOS, `color` on the web and React Native, and dark mode everywhere.

## Google and Apple

Google and Apple sign in through their own SDKs (on iOS, `apple: AbrovaSignInOptions.nativeApple` runs Sign in with Apple for you), as described in [Google](https://abrova.ir/docs/auth/google) and [Apple](https://abrova.ir/docs/auth/apple). Give the screen a small function: it receives the hashed nonce, runs your Google or Apple sign-in with it, and returns the ID token, or nothing when the user cancelled. The screen keeps the raw nonce and sends it to Abrova, so a captured token can't be replayed.

```dart
AbrovaSignInOptions(
  google: (hashedNonce) async => /* your Google sign-in with this nonce */ idToken,
)
```

## Language

The screen is in English or Persian, from your app’s language or `languageCode`. While it is open, the e-mails it sends (confirm e-mail, password reset, magic link) use the same language, unless you set the client’s `languageCode` yourself. See [Email templates](https://abrova.ir/docs/auth/email-templates) to change their texts.

## Safe by design

- Error messages come from the error code in the user’s language; Abrova’s technical messages are never shown.
- One action at a time, and the screen can’t be closed while a sign-in is running, so no sign-in lands after the app was told “closed”.
- The password is cleared when the user signs in and when the screen closes.
- The Telegram bot link is opened only when it is an `https://t.me` address.
- On the web the form lives in a shadow root and writes text only, so your page’s CSS can’t break it and nothing it shows can run as code.

> **SDK versions**
>
> The ready-made screen needs Abrova Auth SDK **0.4.0**: Flutter, iOS, Android, Web or React Native.

## Next steps

- [E-mail and password](https://abrova.ir/docs/auth/email-password)
- [Email templates](https://abrova.ir/docs/auth/email-templates)
- [Use with other Abrova products](https://abrova.ir/docs/auth/other-products)