Getting started with Mephisto Authentication app!

The Authentication UI Toolkit is a modern, flexible, and beautifully designed Flutter package that simplifies the integration of authentication flows in your apps. It includes fully customizable Login, Register, Onboarding, and Forget Password screens that support both light and dark themes.



Prerequisites

Before you start, ensure the following:

  1. You have Flutter installed on your system. If not, install Flutter.
  2. You are familiar with the basics of Flutter development.
  3. Your Flutter project is set up and ready.
  4. Flutter SDK version 3.x or higher.
  5. A basic understanding of Flutter.

Installation

To setup the Mephisto auth app, you need to perform these 3 easy steps.



  1. Create a ssh key pair, add your ssh private key to your ssh client and submit the public ssh key while making the purchase:
1ssh-keygen
2ssh-add ~/.ssh/<ssh_key_name>
3
  1. After the purchase, clone mephisto auth app github repo: 
    1git clone git@github.com:A7ALABS/mephisto-auth-app.git mephisto-auth-app
  2. Update your pubspec.yaml dependencies:

1 flutter pub get


Note: You will have to submit the public ssh key while making the purchase, this gives you access to the mephisto auth app that's hosted on github.



Customization

Reading and Updating Theme
1isLightTheme = !ref.read(isDarkThemeProvider);
2ref.read(isDarkThemeProvider.notifier).update((state) => state == true ? false : true);
3

Note: Use watch() instead of read() if you want to listen to changes.

Reading and Updating Font
1font = ref.read(fontFamilyProvider.notifier); //read
2font = ref.read(fontFamilyProvider.notifier).update((state) => 'Nunito'); //update
3
Reading and Updating Color
1ref.read(accentColorProvider.notifier); // read
2ref.read(accentColorProvider.notifier).update((state) => Colors.red); //update
3
Reading and Updating Border Radius
1ref.read(borderRadiusProvider.notifier) //read
2ref.read(borderRadiusProvider.notifier).update((state) => 0) //update
3
Customizing Components

Every component is highly customizable using properties like color, padding, borderRadius, and more. For example:

1MephistoTextHeadingBold1(
2    text: "Log into your account",
3    textAlign: TextAlign.center,
4    textColor: Colors.blue,
5);
6
Adding custom font
Step 1: Configure Fonts in pubspec.yaml

Start by defining your font in the pubspec.yaml file of your Flutter project. Add the font family under the fonts section like this:

1  fonts:
2    - family: Lato
3      fonts:
4        - asset: fonts/Lato/Lato-Black.ttf
5        - asset: fonts/Lato/Lato-BlackItalic.ttf
6        - asset: fonts/Lato/Lato-Bold.ttf
7        - asset: fonts/Lato/Lato-BoldItalic.ttf
8        - asset: fonts/Lato/Lato-Italic.ttf
9        - asset: fonts/Lato/Lato-Light.ttf
10        - asset: fonts/Lato/Lato-LightItalic.ttf
11        - asset: fonts/Lato/Lato-Regular.ttf
12        - asset: fonts/Lato/Lato-Thin.ttf
13        - asset: fonts/Lato/Lato-ThinItalic.ttf
14
Notes:
  1. Place the font files in the specified folder (e.g., assets/fonts/Lato/).
  2. Ensure the folder is correctly referenced in the pubspec.yaml file.
  3. Run flutter pub get to update the dependencies.
Step 2: Update the fontFamilyProvider

Simply pass your font in the MephistoThemeProvider:

1    return MephistoThemeProvider(
2      fontFamily: 'Lato', // your font here
3      // ...rest of the configs
4    );
5
Notes:
  1. To read and update the fontFamilyProvider, you will need to import flutter_riverpod ('package:flutter_riverpod/flutter_riverpod.dart')
  2. You will need to make the widget using the ref as ConsumerWidget.

Documentation and Support

For detailed api reference, visit Mephisto API Reference. For support, click here or join our discord community.




Changelog:

Version 1.0.0
  1. Initial release with login, register, onboarding, and forget password flows.
  2. Support for light and dark themes.
  3. Basic customization options for colors, fonts, and shapes.