Appwrite UI Auth

Appwrite UI Auth is a set of screens and variable configurations used to help design and integrate Appwrite Authentication

Feature Support

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

Installation

flutter pub add appwrite_ui_auth

Example

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();
          });
        });
  }
}

Screenshots

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

Features