Shared Mobile and Web Firebase Login

Related tags

Templates fb_auth
Overview

Buy Me A Coffee Donate

fb_auth

A Shared Firebase Auth Plugin for Mobile, Web and Desktop. Included AuthBloc for minimal setup! Single dynamic import and compile time ready for ios, android, macos, windows, linux and web.

This package is now deprecated and was originally created to add firebase on the desktop and web. You can now use the FlutterFire packages to do anything this plugin could.

Getting Started

Setup your Bloc

final _auth = AuthBloc();

Follow Installation Instructions for Web: https://pub.dev/packages/firebase

Update /web/index.html in the body tag.

<!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
      https://firebase.google.com/docs/web/setup#config-web-app -->
  <script src="https://www.gstatic.com/firebasejs//6.3.3/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-storage.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-functions.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "API_KEY",
      authDomain: "AUTH_DOMAIN",
      databaseURL: "DATABASE_URL",
      projectId: "PROJECT_ID",
      storageBucket: "STORAGE_BUCKET",
      messagingSenderId: "MESSAGING_SENDER_ID",
      appId: "APP_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>

Follow Installation Instructions for Mobile: https://pub.dev/packages/firebase_auth

  • Update ios/Runner and add the GoogleService-Info.plist downloaded from firebase

  • Update android/app and add the google-services.json downloaded from firebase

  • Update android/build.gradle and update the classpath:

    classpath 'com.google.gms:google-services:4.2.0'

Actions

  • Check Current User
_auth.dispatch(CheckUser());
  • Listen for Auth Changes
_userChanged = _fbAuth.onAuthChanged().listen((user) {
    _auth.dispatch(UpdateUser(user));
});
  • Logout
_auth.dispatch(LogoutEvent(_user));
  • Login
_auth.dispatch(LoginEvent(_email, _password));
  • Guest
_auth.dispatch(LoginGuest());
  • Create Account
_auth.dispatch(CreateAccount(_email, _password, displayName: _name));
  • Edit Info
_auth.dispatch(EditInfo(displayName: _name));
  • Forgot Password
_auth.dispatch(ForgotPassword(_email));
  • Send Email Verification
_auth.dispatch(SendEmailVerification());
Comments
  • Using this if I am using Provider for everything else?

    Using this if I am using Provider for everything else?

    Hey there, I am quite interested in using this, but I am using Provider (MultiProvider) already. I am not familiar with Bloc, do you happen to know if I could use this along with my MultiProvider setup?

        return MultiProvider(
          providers: [
            ChangeNotifierProvider<AuthProvider>(
              create: (context) => AuthProvider()..init(),
            ),
            ChangeNotifierProvider<NavigationProvider>(
              create: (context) => NavigationProvider(),
            ),
          ],
          child: MaterialApp(
            title: 'Installer',
            theme: themeData,
            home: AppHome(),
            debugShowCheckedModeBanner: false,
          ),
        );
    

    Thanks,

    opened by instance-id 1
  • Fix currentUser() in FbClient

    Fix currentUser() in FbClient

    The currentUser() method within the FbClient class, upon successful login, the token information is saved to fb_auth.json. Once application is closed and reopened the following occurs:

      @override
      Future<AuthUser> currentUser() async {
        FirestoreJsonAccessToken token = await _loadToken(); // 1. --- Loading saved token data from fb_auth.json
        if (token != null) {
          var result = await http.post( 
            'https://identitytoolkit.googleapis.com/v1/accounts:lookup?key=${app.apiKey}',
            body: json.encode({
              "idToken": token?.idToken,
              "returnSecureToken": true,
            }),
          );
          token = await _saveToken(result); // 2. -- Sending results to _saveToken, which decodes json
          return _getUser(token); // 7. --- Incorrect token data (actually user
        }
        return null;
      }
    
      Future<FirestoreJsonAccessToken> _saveToken(http.Response result) async {
        final _data = json.decode(result.body); // 3. --- Data is decoded, which results in the data in the next code block 
        final token = FirestoreJsonAccessToken(_data, DateTime.now()); // 4. --- Unable to map the data, as it is not an access token, it is user data.
        await onSave(_data); // 5. --- This incorrect data is then saved to fb_auth.json
        return token; // 6. --- Incorrect token is passed back to currentUser()
      }
    

    Results of 'results' http.Response json

    {
        "kind": "identitytoolkit#GetAccountInfoResponse",
        "users": [
        {
            "localId": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
            "email": "[email protected]",
            "displayName": "xxxxxxxxxxxxx",
            "passwordHash": "xxxxxxxxxx=",
            "emailVerified": false,
            "passwordUpdatedAt": 1587344957542,
            "providerUserInfo": [
            {
                "providerId": "password",
                "displayName": "xxxxxxxxxxx",
                "federatedId": "[email protected]",
                "email": "[email protected]",
                "rawId": "[email protected]"
            }],
            "validSince": "1587344957",
            "disabled": false,
            "lastLoginAt": "1588119233200",
            "createdAt": "1587344957542",
            "lastRefreshAt": "2020-04-29T00:13:53.200Z"
        }]
    }
    

    My changes allow it to work properly in my testing, as the loaded token gets sent to the _getUser() method properly, the user data is returned and usable within the application, and the application is able to continue.

    Please do let me know if I am mistaken on any of this.

    Thanks, -instance.id

    opened by instance-id 0
  • Use firebase_auth plugin as default auth method in macOs

    Use firebase_auth plugin as default auth method in macOs

    The PR sets firebase_auth plugin as the base method for authentication in macOs instead of the REST client.

    The REST client still works by setting useRestClient = true in ios.dart file.

    opened by jmolins 0
  • Firebase web default initialization through dart code

    Firebase web default initialization through dart code

    The plugin configuration includes the firebase configuration for web build right in dart code in the main.dartfile. But this configuration is never used. This PR modifies the web.dart file in the plugin authentication code so the firebase initialization is done through dart code if the <script> item is removed in the index.html. The Readme.md file has been edited to explain this behavior.

    opened by jmolins 3
  • Login hangs for MacOS app

    Login hangs for MacOS app

    Hi all,

    I implemented the example today for Android/iOS/MacOS, and have Android and iOS working. When building for MacOS, after I click login with my credentials the app hangs and there's a blue loading circle, but the screen never changes to the home screen.

    Screen Shot 2020-02-13 at 6 17 08 PM

    I've done a bit of debugging in check.dart, and the AuthState is 'AuthLoadingState' but never changes. Does this indicate a Firebase connection issue, or an fb_auth issue? Any leads/tips to further debug this?

    Thanks!

    opened by 11ib 0
  • Example does not work

    Example does not work

    the example doesnt work:

    packages/padel/main.dart:27:27: Error: Too few positional arguments: 1 required, 0 given. final _fbAuth = FBAuth(); ^ packages/padel/main.dart:26:11: Error: The method 'dispatch' isn't defined for the class 'AuthBloc'.

    • 'AuthBloc' is from 'package:fb_auth/data/blocs/auth/auth_bloc.dart' ('packages/fb_auth/data/blocs/auth/auth_bloc.dart'). Try correcting the name to the name of an existing method, or defining a method named 'dispatch'. _auth.dispatch(CheckUser()); ^^^^^^^^ packages/padel/main.dart:29:13: Error: The method 'dispatch' isn't defined for the class 'AuthBloc'.
    • 'AuthBloc' is from 'package:fb_auth/data/blocs/auth/auth_bloc.dart' ('packages/fb_auth/data/blocs/auth/auth_bloc.dart'). Try correcting the name to the name of an existing method, or defining a method named 'dispatch'. _auth.dispatch(UpdateUser(user)); ^^^^^^^^ packages/padel/main.dart:36:11: Error: The method 'dispose' isn't defined for the class 'AuthBloc'.
    • 'AuthBloc' is from 'package:fb_auth/data/blocs/auth/auth_bloc.dart' ('packages/fb_auth/data/blocs/auth/auth_bloc.dart'). Try correcting the name to the name of an existing method, or defining a method named 'dispose'. _auth.dispose(); ^^^^^^^ packages/padel/main.dart:125:35: Error: The method 'dispatch' isn't defined for the class 'AuthBloc'.
    • 'AuthBloc' is from 'package:fb_auth/data/blocs/auth/auth_bloc.dart' ('packages/fb_auth/data/blocs/auth/auth_bloc.dart'). Try correcting the name to the name of an existing method, or defining a method named 'dispatch'. _auth.dispatch(CreateAccount(_email, _password, ^^^^^^^^ packages/padel/main.dart:137:35: Error: The method 'dispatch' isn't defined for the class 'AuthBloc'.
    • 'AuthBloc' is from 'package:fb_auth/data/blocs/auth/auth_bloc.dart' ('packages/fb_auth/data/blocs/auth/auth_bloc.dart'). Try correcting the name to the name of an existing method, or defining a method named 'dispatch'. _auth.dispatch(LoginEvent(_email, _password)); ^^^^^^^^ packages/padel/main.dart:180:48: Error: The method 'dispatch' isn't defined for the class 'AuthBloc'.
    • 'AuthBloc' is from 'package:fb_auth/data/blocs/auth/auth_bloc.dart' ('packages/fb_auth/data/blocs/auth/auth_bloc.dart'). Try correcting the name to the name of an existing method, or defining a method named 'dispatch'. BlocProvider.of(context).dispatch(LogoutEvent(_user)); ^^^^^^^^

    But otherwise, thank you for porting this to web flutter.

    opened by brunofgs 2
Owner
Rody Davis
Developer Advocate for @material-components at @Google
Rody Davis
This example uses a ScrollView, JSON Rest API, Navigation, Alert Pop Up, Progress Indicator, Globals, Images in a shared asset folder, and 100% Shared Code

This example uses a ScrollView, JSON Rest API, Navigation, Alert Pop Up, Progress Indicator, Globals, Images in a shared asset folder, and 100% Shared Code. Now with the ability to login with FaceID, TouchID, and Fingerprint Reader on Android.

Rody Davis 672 Jan 6, 2023
Flutter-Shared-Preference - The goal is to learn how to use the shared preferences plugin to save important pieces of information to your device.

Recipe Finder The goal is to learn how to use the shared preferences plugin to save important pieces of information to your device. Final App UI Resou

Ashirbad Swain 1 Jan 1, 2022
Shared preferences typed - A type-safe wrapper around shared preferences, inspired by ts-localstorage

Typed Shared Preferences A type-safe wrapper around shared_preferences, inspired

Philipp Bauer 0 Jan 31, 2022
Note Shared Preferences - Note App Shared Preferences, Using Flutter

NOTE APP SHARED PREFERENCES LOCALIZATION Watch the gif below (lasts 00:08:22)

Tukhtamurodov Sardorbek 1 Jul 8, 2022
Flutter Login Screen with Firebase Auth and Facebook Login

Flutter Login Screen with Firebase Auth and Facebook Login Jumpstart your Flutter app development with this pre-built Flutter starter kit. Don't reinv

null 296 Dec 29, 2022
Flutter Login Screen with Firebase Auth and Facebook Login

Jumpstart your Flutter app development with this pre-built Flutter starter kit. Don't reinvent the wheel by writing the boring boilerplate starter code.

null 12 Dec 19, 2022
Login-and-reisp - A Mobile app Login Page UI with Flutter

Flutter Login Page UI Watch it on YouTube Mobile app Minimal Auth Screen with Fl

null 10 Sep 8, 2022
Let's setup Firebase​​ for our Flutter​​ app on Android​, iOS​ and Flutter Web. Setup Firebase to use Firebase products.

Flutter Tutorial - Firebase Setup For Flutter Web Let's setup Firebase for our Flutter app on Android, iOS and Flutter Web. Setup Firebase to use Fire

null 1 Apr 27, 2022
Flutter Login Signup - Flutter Login and Signup App

Flutter_Login_Signup Authors @Adiikust License MIT ?? Skills Dart, Flutter, Adob

Adnan Hameed 6 Nov 6, 2022
Login-page-ui - An animated login page, designed with dart

Beautiful Login Page UI Design and Animation ScreenShots This is one of my best

Munem Sarker 11 Nov 22, 2022
Login-with-Register-page - A Login with Register page combined with all movable images made with Dart

Flutter login page with register page A new dart project designed for login page

Munem Sarker 3 Aug 2, 2022
Tinder login page - Implementation of the Tinder app login screen with flutter

Tinder (login page) Implementação da tela de login do app Tinder a partir da lei

Eduardo Farias 0 Feb 5, 2022
Flutter theme demo using riverpod and shared preferences

flutter_theme_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Andree Yosua 0 Dec 27, 2021
Use CMP Crew, Create a room, invite your friends to join, and let them add their orders to the shared menu!

Tired of collecting your friends’ orders at restaurants? Lost track of how many of you want tea? Don’t worry we got you covered! Use CMP Crew, Create a room, invite your friends to join, and let them add their orders to the shared menu!

Ahmed Ihab 14 Dec 15, 2022
Flutter settings manager built on top of Shared Preferences

Settings Manager Flutter settings store built on top of shared preferences. Code Generator for supported types Usage import 'dart:async'; import 'pac

Rody Davis 17 Dec 13, 2022
Flutter Settings Screen with Shared Preferences

Settings Screen with Shared Preferences A library that provides an easy solution to create settings screens with simple and compound options. Features

Barnabás BARTHA 66 Sep 27, 2022
🌀 Shared preferences with RxDart Stream observation

?? Shared preferences with RxDart Stream observation ⚡️ Reactive shared preferences for Flutter ??Reactive stream wrapper around SharedPreferences ?? Lightweight and easy-to-use ?? A reactive key-value store for Flutter projects. Like shared_preferences, but with Streams ?? Rx Shared Preferences for Flutter ?? rx_shared_preferences ?? rx_shared_preference ?? Reactive SharedPreferences for Flutter ?? A stream based wrapper over shared_preferences, allowing reactive key-value storage.

Petrus Nguyễn Thái Học 36 Nov 4, 2022
Shared Preferences ile ekran açılma sayacı uygulaması

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

null 0 Dec 29, 2021
Settings Screen with Custom Shared Preference Interface

flutter_settings_screens This is a simple flutter plugin for easily creating app settings screens. The unique thing about this library is that it is n

Harshvardhan Joshi 149 Jan 4, 2023