DEV Community: SNOWCODES

What's your github labels? #2

Alexandre — Fri, 11 Feb 2022 17:20:26 +0000

Hi 👋,

LittleUpdateFromMyPreviousArticle

There are all Github labels we use on our projects.

bug : Bug fixing
chore : Internal task/operation
documentation : Documentation
feature : New feature
refactor : Refactor
release : Release package
test : Unit, functional, integration, E2E tests
theming : Theming and global ui improvements
to discuss : Need to discuss about

There is the Github Gist. Enjoy it :)

Bye bye 👋

[Flutter] Firebase authentication : Dynamic routing by AuthStateChanges 🔥

Alexandre — Wed, 07 Jul 2021 11:59:44 +0000

Hi there 👋

Today, dynamic routing with Firebase by AuthStateChanges.

What we want ? We want routing on LoginPage or HomePage automatically when user state changed.

If user is connected and suddenly token expired (or is disconnected), we want redirect to LoginPage.

Initialize app

First of all, we starting by initialized Firebase app.
(In this example, no catch, but think to catch errors).

import 'dart:async';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // TODO: Handle error for Firebase.initializeApp
  await Firebase.initializeApp();

  runApp(MyApp());
}

Define our pages and routes

Create two pages HomePage and LoginPage. And add it to onGenerateRoute of the MyApp widget.

UnknownPage for all others pages. 😎

1. HomePage

This page will disconnect our user.
Think to add a simple loader for example while requesting.

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      padding: EdgeInsets.all(32),
      children: [
        ElevatedButton(
          onPressed: () {
            FirebaseAuth.instance.signOut();
          },
          child: Text('Sign out'),
        )
      ],
    ));
  }
}

2. LoginPage

This page will connect our user. We'll use signInAnonymously for the example. But use what you need ! 👌

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      padding: EdgeInsets.all(32),
      children: [
        ElevatedButton(
          onPressed: () {
            FirebaseAuth.instance.signInAnonymously();
          },
          child: Text('Sign In'),
        )
      ],
    ));
  }
}

3. UnknownPage

Just a basic red Container

class UnknownPage extends StatefulWidget {
  const UnknownPage({Key? key}) : super(key: key);

  @override
  _UnknownPageState createState() => _UnknownPageState();
}

class _UnknownPageState extends State<UnknownPage> {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red);
  }
}

4. MyApp

Add a stateful widget MyApp with onGenerateRoute.

Handle with a switch the settings.name route.

And return MaterialPageRoute with all right pages.

Add also initialRoute.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HelloWorld',
      // ----- Check if user exists => First page app
      initialRoute:
          FirebaseAuth.instance.currentUser == null ? 'login' : 'home',
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case 'home':
            return MaterialPageRoute(
              settings: settings,
              builder: (_) => HomePage(),
            );
          case 'login':
            return MaterialPageRoute(
              settings: settings,
              builder: (_) => LoginPage(),
            );
          default:
            return MaterialPageRoute(
              settings: settings,
              builder: (_) => UnknownPage(),
            );
        }
      },
    );
  }
}

Time to be reactive

1. GlobalKey

final _navigatorKey = GlobalKey<NavigatorState>();

This is the key, 🔑

All we want, all we need, is this one.

With this GlobalKey, we have the control to navigate in our app.

class _MyAppState extends State<MyApp> {
final _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HelloWorld',
      navigatorKey: _navigatorKey, // <===== HERE
      onGenerateRoute: (settings) {
      // ...

2. InitState

Add the initState function to listen FirebaseAuth changes.

  late StreamSubscription<User?> _sub;

  @override
  void initState() {
    super.initState();
    _sub = FirebaseAuth.instance.authStateChanges().listen((event) {
      _navigatorKey.currentState!.pushReplacementNamed(
        event != null ? 'home' : 'login',
      );
    });
  }

3. Dispose

⛔️ Don't forget to dispose your last subscription.

  @override
  void dispose() {
    _sub.cancel();
    super.dispose();
  }

Done ✅

Now all code available here :

import 'dart:async';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late StreamSubscription<User?> _sub;
  final _navigatorKey = new GlobalKey<NavigatorState>();

  @override
  void initState() {
    super.initState();

    _sub = FirebaseAuth.instance.userChanges().listen((event) {
      _navigatorKey.currentState!.pushReplacementNamed(
        event != null ? 'home' : 'login',
      );
    });
  }

  @override
  void dispose() {
    _sub.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HelloWorld',
      navigatorKey: _navigatorKey,
      initialRoute:
          FirebaseAuth.instance.currentUser == null ? 'login' : 'home',
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case 'home':
            return MaterialPageRoute(
              settings: settings,
              builder: (_) => HomePage(),
            );
          case 'login':
            return MaterialPageRoute(
              settings: settings,
              builder: (_) => LoginPage(),
            );
          default:
            return MaterialPageRoute(
              settings: settings,
              builder: (_) => UnknownPage(),
            );
        }
      },
    );
  }
}

class UnknownPage extends StatefulWidget {
  const UnknownPage({Key? key}) : super(key: key);

  @override
  _UnknownPageState createState() => _UnknownPageState();
}

class _UnknownPageState extends State<UnknownPage> {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red);
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      padding: EdgeInsets.all(32),
      children: [
        ElevatedButton(
          onPressed: () {
            FirebaseAuth.instance.signOut();
          },
          child: Text('Sign Out'),
        )
      ],
    ));
  }
}

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      padding: EdgeInsets.all(32),
      children: [
        ElevatedButton(
          onPressed: () {
            FirebaseAuth.instance.signInAnonymously();
          },
          child: Text('Sign In'),
        )
      ],
    ));
  }
}

One more thing

There is many level of details for auth changes.

  /// Notifies about changes to the user's sign-in state (such as sign-in or
  /// sign-out).
  Stream<User?> authStateChanges() =>
      _pipeStreamChanges(_delegate.authStateChanges());

  /// Notifies about changes to the user's sign-in state (such as sign-in or
  /// sign-out) and also token refresh events.
  Stream<User?> idTokenChanges() =>
      _pipeStreamChanges(_delegate.idTokenChanges());

  /// This is a superset of both [authStateChanges] and [idTokenChanges]. It
  /// provides events on all user changes, such as when credentials are linked,
  /// unlinked and when updates to the user profile are made. The purpose of
  /// this Stream is for listening to realtime updates to the user state
  /// (signed-in, signed-out, different user & token refresh) without
  /// manually having to call [reload] and then rehydrating changes to your
  /// application.
Stream<User?> userChanges() => _pipeStreamChanges(_delegate.userChanges());

See you soon 🐼

Singleton, return to javascript basics

Alexandre — Thu, 19 Dec 2019 07:52:34 +0000

Simple example of singleton

var MySingleton = (function MySingleton() {
 return {
   // YOUR PUBLIC CODE
   myFunction: function() {},
   myVariable: 2020
 };
})();

MySingleton.myVariable; // Outputs: 2020
MySingleton.myFunction(); // Outputs: void

Combine reactive code and singleton with Rxjs

var MySingleton = (function MySingleton(rxjs) {
 var user$ = new rxjs.BehaviorSubject(null);
 return {
   user$
 };
})(rxjs);

MySingleton.user$.subscribe(function(user) { });

Simple ;)

Angular Router • Popstate blocked

Alexandre — Mon, 09 Dec 2019 11:04:00 +0000

There is my solution to block the popstate event in Angular world.

import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private location: Location,
    private router: Router
  ) {
    this.router.events
      .pipe(
        filter(
          (event: NavigationStart) => event.navigationTrigger === 'popstate'
        )
      )
      .subscribe(() => {
        this.router.navigateByUrl(this.router.url);
        this.location.go(this.router.url);
      });
  }
}

How it works ?

First of all, listen router events and filter on navigationTrigger (only NavigationStart). If "popstate" value, apply the logic.

Wait, why two actions ? 🤔

this.router.navigateByUrl(this.router.url);

Angular navigates on the last route without reloading the page (no guards triggered again)

But browser perform real navigation !
If you click again on back button, browser navigation continues

How to freeze browser URL when popstate ?

this.location.go(this.router.url);

location.go method rewrite browser URL WITHOUT reloading the page.

ENJOY !! 🔥🚀

What's your github labels?

Alexandre — Wed, 20 Nov 2019 13:59:03 +0000

There is my Github Gist with all labels that I use !

Always, keep it simple.

Labels need to be explicit, Github give us so much labels on repository creation.

I use only simple names and colors.

About Github Gist, see more gists here

VSCode plugins

Alexandre — Mon, 18 Nov 2019 08:17:52 +0000

🚀 Keep it simple, always.

Extensions for web developments

TSLint for code checkup and best practices.
Prettier for beautify code style (indent and more).
Debugger for Chrome for debug code in chrome from VSCode IDE.
Angular Language Service for better communication between html and ts.

Extensions for better organization

Better Comments, this is my favorite extension, add style to your comments.

Extensions for Mobile development (Flutter)

Flutter for running, debugging and develop flutter app.
Dart for dart-lang autocompletion and more.

⚠️ I install extension only when I need it.