Appwrite UI Auth is a set of screens and variable configurations used to help design and integrate Appwrite Authentication
| Feature | Android | iOS |
|---|---|---|
| Email Sign Up | ✓ | ✓ |
| Email Sign In | ✓ | ✓ |
| Reset Password | ✓ | ✓ |
| Phone Auth | X | X |
| Other Auth Providers | X | X |
| Rest of the features are in development |
flutter pub add appwrite_ui_auth Below is an example on how to use the auth. Make sure to await the init method. The class AppwriteRoutes makes it easier to find the / links for the screens. Using these routes is mandatory and not repeating the same routes for other screens should be taken care of.
import 'package:appwrite_ui_auth/appwrite_ui_auth.dart'; import 'package:appwrite_ui_auth/classes/colors.dart'; import 'package:appwrite_ui_auth/classes/routes.dart'; import 'package:appwrite_ui_auth/screens/phone_auth/phone_auth.dart'; import 'package:example/home.dart'; import 'package:example/not_found.dart'; import 'package:example/theme_notifier.dart'; import 'package:flutter/material.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await AppwriteService.init( endpoint: 'https://appwrite.loca.lt/v1', projectId: 'appwrite-auth-ui', selfSigned: true, ); runApp(const MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { final ThemeNotifier themeNotifier = ThemeNotifier(); @override void initState() { super.initState(); } state() { WidgetsBinding.instance.window.onPlatformBrightnessChanged = () {}; setState(() {}); } // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.from( colorScheme: ColorScheme.fromSeed( seedColor: AppwriteColors.primary, ), ), darkTheme: ThemeData.from( colorScheme: ColorScheme.fromSeed( seedColor: AppwriteColors.primary, brightness: Brightness.dark, ), ), themeMode: ThemeNotifier.getTheme(), title: 'Appwrite UI Auth', initialRoute: '/', onGenerateRoute: (route) { return MaterialPageRoute(builder: (context) { AppwriteColors.init(context); switch (route.name!.split('?')[0]) { case '/': return HomePage(parentState: state); case AppwriteRoutes.forgotPassword: return AppwriteForgotPassword( title: 'Sample App', successCallback: (data) => 'success', ); case AppwriteRoutes.resetPassword: return AppwriteResetPassword( title: 'Sample App', successCallback: (data) => 'success', params: route.name!.split('?')[1], ); case AppwriteRoutes.signup: return AppwriteSignup( title: 'Sample App', successCallback: (data) => 'success', ); case AppwriteRoutes.signin: return AppwriteSignin( title: 'Sample App', successCallback: (data) => 'success', ); case AppwriteRoutes.phoneAuth: return AppwritePhoneAuth( title: 'Sample App', successCallback: (data) => 'success', ); default: const NotFound(); } return const NotFound(); }); }); } } Here are a few screens used to integrate login and signup with the help of the package
>| Sign Up | Sign In |
| ![]() |
Look of the screens overall
| Multiple screens of auth and in dark & light themes |
WhatsApp.Video.2023-04-07.at.02.44.59.mp4 |
- The repository is open source and free for anyone to contribute to it
- Open an issue for requesting a new feature and add a label of
issue

