Ready-made sign-in screen

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.

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

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

// iOS (15 and later)
import AbrovaAuth

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

// 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)

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

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

// 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:

Step 3: Options#

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 and 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.

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 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.

Next steps#

• E-mail and password
• Email templates
• Use with other Abrova products