UI library to easily implement auth functionalities of Supabase in your app.

Overview

flutter-auth-ui

A simple library of predefined widgets to easily and quickly create a auth compooents using Flutter and Supabase.

⚠️ Developer Preview: This is a developer preview and there maybe some breaking changes until we release v0.0.1.

[supabase/supabase/master/packages/common/assets/images/supabase-logo-wordmark--dark.svg]

Supabase Auth UI

Email Auth

Use a SupaEmailAuth widget to create an email and password signin/ signup form.

// Create a Signup form
SupaEmailAuth(
    authAction: AuthAction.signUp,
    redirectUrl: '/home',
),
// Create a Signin form
SupaEmailAuth(
    authAction: AuthAction.signIn,
    redirectUrl: '/home',
),

Magic Link Auth

Use SupaMagicAuth widget to create a magic link signIn form.

SupaMagicAuth()

Reset password

Use SupaResetPassword to create a password reset form.

SupaResetPassword(accessToken: session.accessToken)

Social Auth

Use SupaSocialsAuth to create list of social login buttons.

SupaSocialsAuth(
    socialProviders: [
    SocialProviders.apple,
    SocialProviders.google,
    ],
    colored: true,
)
Comments
  • Resume on App Startup

    Resume on App Startup

    Under the pre-1.0 API resume on app launch happened by calling into the SupabaseAuthState.recoverSupabaseSession(). A version of that method still exists on SupabaseAuth but it is now private and only accessed through SupabaseAuth.didChangeAppLifecycleState with a "resumed" AppLifecycleState value. I can't see where that is being called. In the Supabase Auth UI project I created a method which calls SupabaseAuth.instance.didChangeAppLifecycleState(AppLifecycleState.resumed). I can get it to resume the session but there are a couple of problems. First, the _recoverSupabaseSession() is async but didChangeAppLifecycleState is not so there is no way to await for the return or to know what the return value was. Second, it feels like this is supposed to be initiated somewhere else but I can't determine where. My workaround right now is to call this right after init, add a button to a splash screen to go into the real part of the app, and then only click that button once I see that the session has been restored in the output. That is all obviously not ideal.

    Is there a plan to have this reload exposed elsewhere in a way we can wait for it at our app level or expose the recover method itself for direct initiation?

    bug auth-ui 
    opened by HankG 14
  • Polish the example

    Polish the example

    • refactor error handling into a single function

    • example: remove unneeded accesstoken should we remove it from the readme?

    • add a wait for email screen ForgetPassword / MagicLink: onSuccess go to wait_for_email. (A snackbar is forcefully also emitted, seems a bit redundant) What should we do? Also why does MagicLink have a special onSuccess handling?

    SignIn: OnError('Email not confirmed') go to wait_for_email. Note that we do not handle the other errors in that case. (the snackbar is not called any longer) Should we have a special callback for email_not_confirmed?

    SignUp: how do we redirect to wait_for_email? We were calling sign_in just after sign_up which had multiple benefits in my option: provide the same 'Email not confirmed' error, and signin user if there is no email confirmation or if their account already exists. Happy to fix that also if you have a direction.

    opened by cgestes 3
  • Enable redirect for apps not using named routes

    Enable redirect for apps not using named routes

    Currently, the widgets are configured to support apps that are using named routes. I would like to be able to use regular navigation as well using this library.

    enhancement 
    opened by dshukertjr 3
  • fix: renaming the package and some minor ui cleanup

    fix: renaming the package and some minor ui cleanup

    Thanks @FatumaA again for all the amazing work. The widgets that you implemented are very intuitive and easy to work with! I wanted to tweak the widgets a bit so that the border style will inherit the user's theme. Also wanted to change the package name if it was okay with you!

    opened by dshukertjr 3
  • Feature request to be able to override some methods/features

    Feature request to be able to override some methods/features

    Hi,

    I just wanted to say thanks for a great package we can use to simplify authentication with. It really does make it go faster and I know I have qualified devs working on auth for/with me. Sometimes it's not an easy thing, especially when I'm new to flutter.

    So my request is for the ability to override, or allow us more options/customization of SupabaseAuth. Couple things come to mind when I say this. 1. I was working through the chat app tutorial, the branch with auth, and when a user is added to the table, a trigger then adds a couple fields into the profile table. One of the things that's supposed to be added to profile's page is the username from auth.users. Well the username now comes from the raw_user_meta_data jsonb column. So the email and pass get's inserted, but no username. And there is no way to add the username to the metadata column in flutter with this package. I ended up just creating another trigger and function that add's a new username into metadata column when inserting and then taking that and inserting into the username column in the profiles page.

    Here's the code to do this if anyone would be interested and came across the same issue as me. Took me a little bit to figure out how to handle the jsonb in a trigger/function like this, but did finally get it working. So the email is just used for the username as well. This function add's it into the same table but in the metadata column, and then the trigger/function from the tutorial picks that up and inserts it into the profile table along with other info.

    create
    or replace function handle_new_user_metadata() returns trigger as $$
        begin
              update auth.users
              set raw_user_meta_data['username'] = to_jsonb(auth.users.email)
              WHERE auth.users.id = NEW.id;
            return NEW;
        end;
    $$ language plpgsql security definer;
    
    DROP TRIGGER
      IF EXISTS on_auth_user_created_meta ON auth.users CASCADE;
    
    create trigger
      on_auth_user_created_meta
    after
    insert
      on auth.users for each row
    execute
      function handle_new_user_metadata();
    

    It would be a lot easier though if we were able to do this from dart/flutter. I see there is already the capability in the supabase client, but we can't access it from this package. Only the email and pass can be used when calling to create a user in registration. So that would be nice to override/ or just have all 4 of the parameters that are in the supabase sdk create user method.

    Second would be the navigation. I'm using riverpod and go router for my nav. Riverpod listens for auth state changes, then go router listens to riverpod to trigger it to log the user in/out according to their auth state. But then when there is code for a second navigation, it messes with the whole flow. Maybe an option to use your own router and logic, or use what's baked in?

    These are just some suggestions. I love the idea of being able to quickly get auth going so I can get on with the actual business logic a client needs. You have done a wonderful job on that and just wanted to say I appreciate it a lot.

    opened by jcoble 2
  • refactor SocialProviders by using Dart 2.17 enhanced enum

    refactor SocialProviders by using Dart 2.17 enhanced enum

    As environment in pubspec.yaml says, this package uses Dart SDK version 2.17.0 or higher,

    environment:
      sdk: ">=2.17.0 <3.0.0"
      flutter: ">=1.17.0"
    

    so enhanced enum feature is available.

    Instead of defining functions like capitalizeName, getIcon, getBtnBgColor inside _SupaSocialsAuthState class, this PR includes such properties in SocialProviders enum.

    opened by KosukeSaigusa 1
  • chore: publish v0.0.1

    chore: publish v0.0.1

    I think now that supabase_flutter v1.0.0 is used, we can release v0.0.1 of this library. It is still in v0, so we can still introduce breaking changes if we need to.

    opened by dshukertjr 0
  • BREAKING: update to supabase-flutter v1.0.0

    BREAKING: update to supabase-flutter v1.0.0

    What kind of change does this PR introduce?

    Updates the code to use supabase-flutter v1.0.0

    Fixes https://github.com/supabase-community/flutter-auth-ui/issues/33

    What is the current behavior?

    The code is still using developer perview of supabase-flutter

    What is the new behavior?

    The code uses supabase-flutter v1.0.0

    opened by dshukertjr 0
  • Update the library to use supabase_flutter 1.0.0

    Update the library to use supabase_flutter 1.0.0

    Feature request

    Is your feature request related to a problem? Please describe.

    There are number of breaking changes in gotrue-dart side of things, so they should be upgraded over here.

    enhancement 
    opened by dshukertjr 0
  • chore: code cleanup and release v1.0.0-dev.3

    chore: code cleanup and release v1.0.0-dev.3

    • Code cleanup
    • Solidify onSuccess and onError
    • Fix auth flow for anything using Deeplinks
    • Add metadata fields to be able to pass metadata on signup form
    • Release a new version 🚀
    opened by dshukertjr 0
  • Support a more elaborated authentication workflow

    Support a more elaborated authentication workflow

    • Users can decide how to react after the Supabase action finishes :
      • Add onSuccess callback instead of the success alert for most components.
      • Add onError callback instead of the error alert for most components.
      • For example callbacks are needed in order to display a page asking the user to verify their email when signing up or using a magic link.
    • Fix some typos.
    • Fix missing redirectUrl.
    • Add a CircularProgressIndicatoron some buttons.
    • Reword some buttons to "Continue" when they both signin and signup. (Magic Link & Providers).
    • Call signIn after signUp to handle cases where user already exists (or when email verification isn't set).
    opened by Zeyrin 0
  • How to implement persistent email / password field between signup/signin/magiclink/resetpassword

    How to implement persistent email / password field between signup/signin/magiclink/resetpassword

    Hi,

    if the feature make sense for the library, do you have an idea of how we could provide persistence between screens?

    Probably we should support two use cases:

    • persistently store the email to reuse at next sign in
    • temporarily store email / password between the relevant screens

    Which screen should support that? ie does it make sense for reset password?

    Passing a default initialEmail/initialPassword is a bit annoying, cause with go_router when changing screens the supabase components may not change instance and those not use the new initialEmail/initialPassword

    enhancement 
    opened by cgestes 2
  • Additions to Improve Library..

    Additions to Improve Library..

    I've taken a look at this library and played with it a bit.. Here are a few suggestions to improve it..

    1. Show user how to query Supabase after login.. I don't understand how I'm to use the authenticated user from this package in a Supabase request.. When using the base supabase_flutter library, I got caught out intializing two Supabase instances which made all my calls fail when RLS was implemented.
    2. Show the deep linking in action, actually working and how to set it up.. This is something I'm still trying to understand..
    3. Show Logout Flow.. I logged in using this package, but there was no logout button.
    4. Show restored session flow.
    5. Show how the new 1.0.0-dev OnAuthenticated/UnAuthenticated State from Supabase package should be used..

    This is a great package and it helped me solve one flow problem.. Thanks.

    enhancement 
    opened by JulianSwales 1
  • readme update

    readme update

    ReadMe should show how to initialise the project when using this library. You don't need the supabase_flutter dependency directly if only using the auth ui lib

    documentation enhancement 
    opened by FatumaA 2
Owner
Supabase Community
Maintained and supported by the Supabase Community.
Supabase Community
Chat app in Flutter Firebase with Group Based Functionalities (Email/Password Auth)

group_chatapp_flutter_firebase Group based chat app in Flutter and Firebase with Cloudfirestore, Firebase Auth and StreamBuilders ?? Overview Welcome

BackSlash Flutter 32 Jan 9, 2023
User auth form - Signup and signin user auth form with ability to stay signed in and have an option to signout.

user_auth_form SIgnup and signin user authentification form Getting Started This project is a starting point for a Flutter application. A few resource

null 0 Jan 6, 2022
Flutter plugin for Firebase Auth UI. Supports popular auth providers by using native SDK for Android and iOS.

firebase_auth_ui Flutter plugin of Firebase UI which allows to add login/sign-up quickly. NOTE: This plugin is under development. Please provide Feedb

Sandip Fichadiya 50 Mar 23, 2022
A most easily usable cookie management library in Dart. With SweetCookieJar, you can easily manage cookie on your application.

A most easily usable cookie management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use SweetCookieJar 1

Kato Shinya 9 Oct 27, 2022
A most easily usable cache management library in Dart. With CacheStorage, you can easily manage cache on your application.

A most easily usable cache management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use CacheStorage 1.2.

Kato Shinya 1 Dec 13, 2021
A most easily usable RESAS API wrapper in Dart. With this library, you can easily integrate your application with the RESAS API.

A most easily usable RESAS API wrapper library in Dart! 1. About 1.1. What Is RESAS? 1.2. Introduction 1.2.1. Install Library 1.2.2. Import It 1.2.3.

Kato Shinya 2 Apr 7, 2022
Dart client library to interact with Supabase Storage

storage-dart Dart client library to interact with Supabase Storage. Contributing Fork the repo on GitHub Clone the project to your own machine Commit

Supabase 22 Dec 14, 2022
A calculator app with basic functionalities for flutter

flutter_basic_calulator Sample video calculator.mp4 A calculator app with basic

Aravind B 1 Jan 8, 2022
A Funtioning basic Clock UI APP with extra functionalities such as displaying thecurrent time location being used and checking time for other timezones simultaneosly.

clock_UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Anjola Favour Ayomikun 0 Dec 28, 2021
A Todo Notes Application developed with flutter, with basic functionalities to write quick Notes.

Notes Application - Flutter A Todo Notes Application developed with flutter, with basic functionalities to write quick Notes. NOTES PASSWORD-PROTECTED

Uttam 22 Jan 1, 2023
My first bmi calculator using flutter and basic functionalities.

bmi_calculator A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

jagadeesh 2 Jan 24, 2022
🧡 The neuralgic heart of the application, this module gathers all the functionalities of the framework.

Mineral Mineral is a robust, powerful and scalable framework designed to let you develop discord bots with the Dart language. The Mineral framework cu

mineral.dart 16 Dec 26, 2022
Firebase Authentication using Phone (All Functionalities)

Dyeus Preview Note: Preview doesn't include auto-detection of OTP due to privacy concerns. The mobile number used is a whitelisted number on firebase

Sarvagya Verma 1 Nov 10, 2022
A fully functional Furniture App Clone made using Flutter, Supabase and Getx State Management.

?? Flutter Furniture App ?? Timberr is a fully functional Furniture App Clone Developed using Flutter, Supabase and Getx State Management which is bas

Aditya 54 Nov 22, 2022
AuthorizationHeader is an open-sourced Dart library. With AuthorizationHeader, you can easily manage authorization header on your application.

A most easily usable authorization header management library in Dart! 1. About 1.1. Supported 1.1.1. Authorization Header 1.1.2. Authorization Type 1.

Kato Shinya 3 Dec 24, 2021
A UI library for easily adding audio waveforms to your apps, with several customization options

A UI library for easily adding audio waveforms to your apps, with several custom

RutvikTak 64 Dec 11, 2022
Addons to supabase dart (and Flutter), to make development easier.

supabase_addons Make great apps with a great backend! Supabase is an open source Firebase alternative. It has support for auth, database and storage u

Bruno D'Luka 20 Dec 3, 2022
Flutter integration for Supabase. This package makes it simple for developers to build secure and scalable products.

supabase_flutter Flutter package for Supabase. What is Supabase Supabase is an open source Firebase alternative. We are a service to: listen to databa

Supabase 251 Jan 7, 2023