appwrite_ui_auth 0.0.3

A dart package providing pre-built screens for integration of appwrite authentication in your app.

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

copied to clipboard

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

copied to clipboard

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

Features

• 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