Forem: Fabusuyi David Oluwasegun

GUILD LINES TO LEARNING HOW TO CODE IN 2021

Fabusuyi David Oluwasegun — Tue, 12 Jan 2021 01:16:21 +0000

Disclaimer: This article is subjective to my view, and it's also the guild lines I followed into becoming a better software engineer. It may work for you but I strongly believe everybody is unique, and what works for me might not work for you. So, keep this to mind while you read.

INTRODUCTION.

My name is David, I am a software developer who is also learning how to become a better writer. I also enjoy teaching kids how to code.

I co-founded Skill-Connect and I currently work for Bitnob (a crypto-currency company in Nigeria). I started this journey five years ago, web development precisely, Now I do both mobile development (flutter) and web (Angular/React).
Enough of me, let's dive right in.

WRITE DOWN YOUR GOALS AND JUMP ON THEM.

I believe one mistake newbies make is not setting realistic and achievable goals before jumping into any language or framework. I am also a victim of this. The reality is no one can master a language or framework 100%, you can master the ins & out for sure, but you can't know everything, that is impossible, even the almighty Linus Torvalds (the creator of Git/Linux) uses google to search for solutions somethings, (so I heard lol).

I see many people trying so hard to grasp every concept of the tool they use, this is not just overwhelming, but this will also clutter your brain with some information you might never use.
For example, let's say you want to learn angular, my advice would be jotting down something similar to this.

i. Learn what components, directives, services are.
ii. Learn data binding and How to make http request, intercept request with interceptors in angular.
iii. Learn state management, Rxjs, observables etc.
iv. Learn Authentications and Authorizations
v. Learn Angular architectural patterns. etc.

There are other things too, but the point is. Notice the above are realistic, achievable and also fundamental, I would strongly advise you build a small project after you've learnt the theoretical aspects, this helps you solidify what you've learnt and as you know getting your hands always dirty cannot be overemphasized in this industry.

PICK A FRAMEWORK AND STOP PROCRASTINATING.

I was stuck on this for weeks trying to choose which framework is best for me to learn, and also there is this funny question I see many people asking now "What is the best programming language or framework to learn?". I now find this funny, because the truth is there is no best programming language.

It's just like asking a carpenter, what is his best tool? Well, I'm no carpenter, but I'm sure the carpenter would say, every tool he uses has its own function and when it's best for him to use it.

Let say a carpenter wants to divide a wood, he would use a saw, right? If he wants to join two woods together, he uses a drill and screw, or nail and hammer, right? of course he can decide to use a hammer to divide a wood, but would that be efficient. you get my point? The same principles applies to programming, every language or framework has where its scales high, and where its scales low. I think the question should be, which language is more beginner friendly? then my answer would be JavaScript or python.

Also, it's very important you choose your path from onset, the reality is that Tech Industry is very huge, there is devOps, Artificial Intelligence, Machine Learning, Mobile Development, Game Development, Desktop Development, Web Development you name it. Just choose one path and learn it prerequisite, then you are good to go.

For a beginner I would strongly advise you choose Web Development or Mobile Development. it's more beginner friendly, and its job opportunities are countless. You should also consider the community behind tool you are learning, Its more easy for you to find help or resources when you get stuck if the community is big.

LEARN DAILY AND CODE DAILY

I hear a lot of people say, "practice makes perfect", well, I disagree. I believe practice makes you good, but obsession makes you perfect. I believe if you really want to be perfect at what you do, you need to be obsessed with what you do. Perfection is way beyond just practice.

let's look at the almighty Cristiano Ronaldo for example. You see him score goals, set records that are just so crazy for anyone to beat (Some even call him immortal, lol). But the truth is, he is very hard working, Ronaldo is said to be the most hard-working football player of his time, even his teams-mates don't like paying him a visit, because he is always training when they get there, and he forces them to join him.

I strongly believe he is obsessed with training. That is why we all see him as a perfect player. The same applies to all these great geniuses: Elon Musk, Michael Jordan, Linus Torvalds, etc.
So, for you to really stand out as a developer, you have to learn daily, code daily. This forces your brain into making it a habit, and once it becomes a habit, you see yourself doing it without feeling stressed out, or forcing yourself to do it. I can guarantee you; you would scale up in no time.

LEARN TO ENJOY THE PROCESS

This is my favorite, I remember how angry and frustrated I normally feel, each time I'm alone, on my bed coding, learning while my friends are out there having fun. I wasn't really progressing, I felt irritated, each time I saw an error, and my first thought would be "I'm not cut out for this". It was not until when I started tricking my brain into loving coding, that I started grasping concepts faster, solving bugs, writing good quality code.

You might be wondering,
who the heck tricks his brain?
How? Yeah, I did just that, Here is how.

I was watching YouTube one day then I came across this video by Mel Robbins, where she spoke about tricking your brain, (the 5 seconds rule), and also How to change your life | Affirmation to success. I would strongly recommend you check it out here and here it's worked for me. I taught about this for some minutes and developed a routine for handling my fears and irritations.

Each time I feel irritated and just want to get out and run away, I remind myself the reason I'm doing this. (mine was because I want to change my current financial status). I would imagine myself getting a good job and how happy I felt when I got things I couldn't afford now, paid my little nieces fees, how happy they were when I took them out and bought them gifts.

This sends some dopamine to my brain and switches my mood, and I continue my learning process fired up.

I hear lots of people saying "don't do it because of the money", well for me I don't think I would go down this route, if it wasn't for those 6 digits salaries. I personally think the same applies to over 60% of people in this industry. Just when the tech industries start booming up, suddenly, everyone on earth starts joining the industry. (They now suddenly enjoy coding because it's fun, Naaah!!).

Coding is very hard, like it is extremely hard, if you just started out as a beginner, you need all the motivation you can get for you to go down this route, and guess what, research has shown that money motivates man into doing the extraordinary.

My only advice would be you shouldn't let money enforce the decision you make as a beginner. What I mean is, let's say you work for a startup, whose working environment is super nice, and your growth is paramount in this startup, and you later got an offer from a bigger startup whose pay is better, but it's toxic. don't take it. (Run from a toxic environment as a beginner, it would drain your blood and motivation, lol).

I'm not saying you shouldn't take risks, of course you should do that more often, I'm just saying your growth should be more important than what you earn when starting out, because once you are above average, offers and jobs would keep coming.

How would you know?

Do your research thoroughly before joining any startup. It's easier for an experienced developer to switch between jobs, but it's not easy for a newbie to see jobs come their way if eventually you got fired for not being productive enough.

DON'T BE SCARED OFF ERRORS AND MISTAKES

This affected my learning process because I was battling Imposter Syndrome then. What is that? Well.

Imposter Syndrome is being scared of people discovering that you are a scam.

It delimits your self-confidence, and you are always scared whenever you are charged to do something new.

Confidence is everything, embrace it. Whenever you see that error, don't feel irritated, try to fix it, if you can't, google is your friend. and if you still can't find any answer, then seek help from a friend, colleague or group but not after you've tried fixing it yourself, you don't want to disturb others while they are working. it makes you a lazy programmer and disvalued how you are being pictured if you keep doing that. Trust me have been down that road.

Also, errors and bugs are your friend, embrace them every time because you would see a lot of them, I mean a lot. I remember how happy I felt when any code I wrote compiled at first trial when I was starting out, Now I'm usually very surprised if this happens, because I expect something to go wrong. The same applies to more experienced dev.

WHEN WOULD YOU BE READY TO START APPLYING FOR JOBS OR INTERNSHIPS?

I would say you start as soon as possible, but also make sure you've built like two or more projects, your recruiter would request for your port-folio. I see many folks are always scared of applying for roles, they think they are not ready yet. Just do it, let your recruiter beside who is the perfect fit for the job, you don't have anything to lose, just continue trying, if you get rejected, try again, that's life.

Just because you were rejected does not mean you are worthless or you are not a perfect fit, some recruiters don't even know what they want, I have seen a recruiter post a five years' minimum experience job for a framework that is less than 3 years (flutter precisely) and after that they choose randomly.

So, you never know where luck might find you. Just try.
Rejection is very normal, don't expect to get your first job in two to three months, its very possible though. But don't let it way you down if you've not gotten any offer yet, it would come, trust me. you have to keep trying.

I remember when I was applying for internships, and I got a technical interview, I was extremely nervous, it didn't go well, thereafter my interviewer said: "You know this coding thing isn't for everybody, right?".

No words of encouragement or whatsoever, I was completely devastated, I almost cried. I almost gave up, thank goodness I didn't, maybe I might be working as a fuel attendant in a gas station or a Bar attendant.

P.S. Please I don't have anything against these jobs.

CONCLUSION

I hope this article motivates you into being successful in your journey. Remember it's not a sprint but a marathon; coding is very hard for a beginner, but I can promise you that, it gets easier when you keep doing it.

Take every step bit by bit and continue learning, you would be amazed at how far you've gone in no time. I can promise you this.

Wishing you best of luck as you commence your coding journey, and don't forget, you can do it, you matter, don't let anybody tell you otherwise.
Cheers.

How to implement Forgot Password/Password Reset into your Flutter Apps with Firebase Auth

Fabusuyi David Oluwasegun — Fri, 25 Dec 2020 01:05:52 +0000

This is final series of our Step by Step Guide on How to Authenticate your Flutter App with Firebase Auth

You can check out the previous post here and here.

Adding Forgot password/Password functionality is very essential in every app, and with firebase_auth we already have all that done for us, all we have to do is call the method, pass the right arguments, then we are good to go.

TLDR

If you already familiar with how firebase works, feel free clone the complete project we would be building here
If you are a firebase beginner, I would highly recommend you code along. Let dive right in

FORGOT PASSWORD

Let’s start by creating our Forgot Password Screen, open Screens folder and add a new file, name it ForgotPassword.dart. import material library and add the code below.

class ForgotPassword extends StatelessWidget {
  static String id = 'forgot-password';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      body: Form(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 30.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Email Your Email',
                style: TextStyle(fontSize: 30, color: Colors.white),
              ),
              TextFormField(

                    style: TextStyle(color: Colors.white),
                    decoration: InputDecoration(
                      labelText: 'Email',
                      icon: Icon(
                        Icons.mail,
                        color: Colors.white,
                      ),
                      errorStyle: TextStyle(color: Colors.white),
                      labelStyle: TextStyle(color: Colors.white),
                      hintStyle: TextStyle(color: Colors.white),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                      ),
                      errorBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                      ),
                    ),
                  ),
              SizedBox(height: 20),
              RaisedButton(
                child: Text('Send Email'),
                onPressed: () {},
              ),
              FlatButton(
                child: Text('Sign In'),
                onPressed: () {},
              )
            ],
          ),
        ),
      ),
    );
  }
}

It’s just a basic UI, I won’t walk through that. Now let’s create our Forgot Password route, open main.dart and add this code inside our routes, ForgotPassword.id: (context) => ForgotPassword(),.
We also have to create a forgot password FlatButton inside our SignIn class, and make it navigate to our newly created route.

Open SignIn Class add this code.

FlatButton(
     onPressed: () {
     Navigator.pushNamed(
     context,
     ForgotPassword.id,
 );
},
 child: Text(
'Forgot Password?',
  style: TextStyle(color: Colors.grey, fontSize: 12),
   ),
),

The above is doing nothing fancy, it’s just takes our newly created route id then it passes that into Navigator.pushNamed, and this would trigger navigation when the user presses this FlatButton. Hot restart your app and test. forgot password should now take you to the Forgot Password screen.

Now that we have successfully added the UI and navigation for ForgotPassword, lets implement the functionality.

Create a new method, name it passwordReset, then we have to create an instance of firebase_auth, so we would be able to use its functions. import import 'package:firebase_auth/firebase_auth.dart'; like so, and create an instance of it with final _auth = FirebaseAuth.instance; inside passwordReset method. We now have an instance of firebase_auth with _auth (i.e., any instance, variable or function with underscore, makes its private, that means we can't call it outside this class). Now add this line await _auth.sendPasswordResetEmail();This takes an email as an argument. Create an email String above and pass it inside sendPasswordResetEmail' like thisawait _auth.sendPasswordResetEmail(email: _email);`

We also need to prevent our code from moving to the next like when the auth request is not completed. Its an asynchronous call, we don't know how long it would take. if you are not familiar with asynchronous programming, you can check here for reference >>>. Add await to the instance and async to passwordReset method. (whew, we almost there). Now wrap your password reset method with try and catch block, should in case the request wasn't successful, it would throw an exception, so your app doesn't break. Lastly add this line.

`
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return ConfirmEmail();
}),
);

This would navigate us to our Confirm Email Screen on completion. (i.e. We created this in the previous article). Our password reset method should now look like this.

`
Future _passwordReset(String email) async {
try {
await _auth.sendPasswordResetEmail(email: email);

  Navigator.push(
      context,
      MaterialPageRoute(builder: (context) {
        return ConfirmEmail(

        );
      }
    ),
  );
} catch (e) {
  print(e);
}

}
`

Notice!!!, We have an error with the context, right? That is because our Class is a stateless widget, convert it into stateful widget by clicking on our ForgotPassword class and press ctrl + ..
Another way of fixing this is by calling our password reset method as a callback inside our RaisedButton with the onPressed property. Either way works, I would go with this (I don't like cluttering my UI with logic).

Now add onSaved method inside the TextFormField, add newEmail as its argument, then assign our _email variable to newEmail like is

`
onSaved: (newEmail) {
_email = newEmail;
},

`
Now call our passwordReset inside the onPressed property and pass our email variable like this.

onPressed: () { _passwordReset(); print(_email); },

Since we are using a TextformField widget as out input field, we need to wrap our entire field into a form widget and pass its key, If we don't do that our TextFormField would return null, because it’s doesn't know the current state of our form. We need to track the current state of our form. wrap the entire Column widget with a form widget. Form widget has a property key add that with a _formKey like this key: _formKey. create a new variable formKey below our email string variable like this. final _formKey = GlobalKey<FormState>();. Now inside our passwordReset, above sendPasswordReset function, add this this line. _formKey.currentState.save(); This would save the current state of our form and send the inputted values upon submission. Your passwordReset should look like this.

`
_passwordReset() async {
try {
_formKey.currentState.save();
await _auth.sendPasswordResetEmail(email: _email);

  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) {
      return ConfirmEmail();
    }),
  );
} catch (e) {
  print(e);
}

}

Run Hot restart and test your app. This should send a mail link to the provided email for resetting password and also navigate you to the confirm email screen.

(Note: remember you have to be registered before you can reset your password, since we are not handling errors, its won't prompt you or send you email if you are not registered, but you can check your terminal for invalid emails errors and so on).

Lastly, Notice our confirm email screen reads "'An email has just been sent to you, Click the link provided to complete registration'". That is not text we won't for password, lets make ConfirmEmail text dynamic. (i.e another way of fixing this is by creating a separate screen for this).

Open ConfirmEmailadd a new variable below id String message, add it inside the constructor then cut the message text and pass the message inside our Text widget.

child: Text( message, //here
Now open ForgotPassword, create a new variable message, add the text you cut into this variable, then pass it inside our ConfirmEmail. Your routing should look like this.

Navigator.push( context, MaterialPageRoute(builder: (context) { return ConfirmEmail(message: widget.message,); }), );

Do the same for our SignUp Screen.

We have finally completed this series. I might be writing another post for error handling and form validations, if you want that, feel free to comment below. If you have any question, feel free to ask them also. you can correct me if you spot any errors or typos.

Thank you for taking your time to read this.

How to add Firebase Email Verification to your Flutter App

Fabusuyi David Oluwasegun — Tue, 22 Dec 2020 23:58:19 +0000

This article is a continuation of my previous article (Step by Step guide on how to authenticate your flutter app with Firebase (PART 1)). If you want to code along, I would recommend you read it here or clone the repo here.

In our previous app, a user can sign up with an email that doesn't exist (You don't want that in your live app). Lets add email verification to our app, so as to prevent users from entering invalid emails.

EMAIL VERIFICATION

Open SignUp.dart file, Our signup method is inside the RaisedButton, lets extract that into a separate method, instead of using a callback we would call the method instead. create a new method and name it signUp, copy the extracted code into it. You would notice we have an error, the context inside our routing right?. This is because our class is a stateless widget and since we have extracted our logic from our UI, its can't get the current context, we can solve this easily by making our class a statefull widget. click on the signUp class then hold ctrl + ., then click on convert to stateful widget. (There you go). Now call your method inside the onPressed property of RaisedButton. Your SignUp method should look like this.

 Future signUp() async {
    _formKey.currentState.save();
    try {
      final new_user = await _auth.createUserWithEmailAndPassword(
          email: _email, password: _password);
      if (new_user != null) {
        Navigator.pushNamed(context, HomepageScreen.id);
      }
    } catch (e) {
      print(e);
    }
  }

Your RaisedButton should now look like this.

RaisedButton(
       onPressed: signUp,
       child: Text(
      'Submit',
       style: TextStyle(fontSize: 18),
   ),
),

You see our code now looks cleaner. Inside our signUp function, underneath CreateUserWithEmailAndPassword function add this code await newUser.user.sendEmailVerification(). This function would trigger firebase to send a confirmation email to the user upon signup, all this are done under the hood, easy right? lolx. lets move on.

We need to prevent users from signing in, if they haven't verified their email. We also have to navigate them to Confirm Email Screen instead of the Homepage, So they don't have access to our app until they are verified. Now open the SignIn Class, extract the signin method like we did above, or if you like leave it like that. Instead of checking if user exist, we would be checking if the user is verified. delete if (user != null)' replace with if (user.user.emailVerified). Now lets create our Confirm Email Screen. Create a new file and name it ConfirmEmail then add this code.

import 'package:flutter/material.dart';
static String id = 'confirm-email';

class ConfirmEmail extends StatelessWidget {
  const ConfirmEmail({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: Text(
        'An email has just been sent to you, Click the link provided to complete registration',
        style: TextStyle(color: Colors.white, fontSize: 16),
      )),
    );
  }
}

Its just a basic screen no styling or whatsoever, lolx. Moving On, We have to add our ConfirmEmail route, open main.dart underneath our routes add this ConfirmEmail.id: (context) => ConfirmEmail(),

Now go back to your signin method and change HomepageScreen.id to ConfirmEmail.id. Your SignIn method should look like this.

Future signIn() async {
    _formKey.currentState.save();
    try {
      final user = await _auth.signInWithEmailAndPassword(
          email: _email, password: _password);
      if (user.user.emailVerified) {
        Navigator.pushNamed(context, ConfirmEmail.id);
      }
    } catch (e) {
      print(e);
    }
  }

Restart your app and test, A confirmation email should be sent to you after registration, Try signing In before confirmation to check if the verification is working, All this should work fine if you follow along correctly.

Feel free to check my future articles where I would walk you through on How to add Forget Password and Reset Password to your Flutter Apps. Thanks for reading, I hope its helps.

Step By Step Guide On How to Authenticate your Flutter App with FireBase Auth

Fabusuyi David Oluwasegun — Thu, 17 Dec 2020 01:49:20 +0000

In this post, I will be walking you through how to authenticate your flutter app with firebase. we won't be building anything fancy. just a demo app with three screens (Sign-Up, Sign-In and Homepage). This post assumes you've already setup your IDE with Flutter, we won't do that here, if you ready, Lets dive right in.

TLDR
If you already familiar with Flutter and Firebase and this post is too long for you to read, you can download the final project we would be building here on github

If you are not fully familiar with Flutter and Firebase, I would highly recommend you read through or better still code along so as to fully understand how things work.

Firstly let create our Flutter App.

if you are using VSCode, Open the Command Palette ( Ctrl + Shift + P) for windows and ( Cmd + Shift + P) for mac. click on New Project and feel free give the project any name you want. (Note: all letters has to be lower case). If you are using Android Studio as your IDE. click on file, then navigate to new flutter project. select flutter application then name the project and choose any folder path you want your project to be saved in. set package name is your app domain name, if you don't have that feel free to add this (com.example.yourappname) P.S: Write this down, we would be need it when we are ready to initialize our app with firebase, also Don't forget to tick all boxes then click finish.

Lets start creating our screens.

(Note: I would be using VSCode for this article, if you're using Android Studio you can click the play button to run your app.)
open your terminal then navigate to your newly created flutter project then run your app with flutter run. open lib/main.dart file and delete MyHomePage class, we would be creating ours shortly. Create a new folder, I will name mine screens. Now click on new file and name the file SignUp.dart, do same for SignIn.dart and Homepage.dart respectively.

Open our newly created SignUp.dart file import material Design with import 'package:flutter/material.dart' then create your signup class (Stateless Widget), you can do that by just typing stl an auto create would popup, just click it (there you go 😉). Name it signup class, lets make the class return a text widget with "Sign Up" text temporarily, while we create our routes. Your SignUp class should look like this.

import 'package:flutter/material.dart';

class SignUpScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Sign Up'),
    );
  }
}

feel free to do the same for SignIn and Homepage files.

Open the main.dart file, you would notice the myHomePage class we deleted is already prompting us of an error, delete the entire line. we would be creating ours shortly. Now add this initialRoute: SignUp.id.
Note: we could use any of this Material App properties (home or initialRoute) as our base route, but I prefer using initial route so as to make the naming convention the same, its doesn't really matter in our case, you could use either of the two.
PS: home takes a widget as its property, while initialRoute takes a string. Notice that its prompt an error, that is because we have not added the route to our SignUp class. Open SignUp and add this line static String id = 'sign-up';, Do the same for both SignInScreen and HomepageScreen.

We've added our initial route, Our app would navigate to signup screen upon launch. Now lets create our routes, this takes Map as argument. now add this lines SignUpScreen.id: (context) => SignUpScreen(), Do same for both SignIn and Homepage route.
Your code should now look like this.

import 'package:flutter/material.dart';
import 'package:flutter_practice/Screens/Homepage.dart';
import 'package:flutter_practice/Screens/SignIn.dart';
import 'package:flutter_practice/Screens/SignUp.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // home: SignUpScreen(),
      initialRoute: SignUpScreen.id,
      routes: {
        SignUpScreen.id: (context) => SignUpScreen(),
        SignInScreen.id: (context) => SignInScreen(),
        HomepageScreen.id: (context) => HomepageScreen(),
      },
    );
  }
}

Now hot restart you your app with capslock R. You should see a black screen with a huge 'Sign Up' red text, (😞 Our screen is ugly, lets style it up a little). Im not going to walk through the styling process just copy and paste the below code, if you are following along.

import 'package:flutter/material.dart';

class SignUpScreen extends StatelessWidget {
  static String id = 'sign-up';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      body: Container(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(50.0),
            child:
                Column(mainAxisAlignment: MainAxisAlignment.center, children: [
              Text(
                'Sign Up Here',
                style: TextStyle(fontSize: 30, color: Colors.white),
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(
                obscureText: true,
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                  labelText: 'Email',
                  icon: Icon(
                    Icons.mail,
                    color: Colors.white,
                  ),
                  errorStyle: TextStyle(color: Colors.white),
                  labelStyle: TextStyle(color: Colors.white),
                  hintStyle: TextStyle(color: Colors.white),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                  errorBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                ),
              ),
              TextFormField(
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                  labelText: 'Password',
                  icon: Icon(
                    Icons.lock,
                    color: Colors.white,
                  ),
                  errorStyle: TextStyle(color: Colors.white),
                  labelStyle: TextStyle(color: Colors.white),
                  hintStyle: TextStyle(color: Colors.white),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                  errorBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                ),
              ),
              RaisedButton(
                onPressed: () {},
                child: Text(
                  'Submit',
                  style: TextStyle(fontSize: 18),
                ),
              )
            ]),
          ),
        ),
      ),
    );
  }
}

You can replicate that for the Signin screen as well, but if you like, feel free to style it to your own taste. We now have our auth screens styled up, we can now initialize our app with Firebase. Our SignUp Screen should look like this

Initializing App to Firebase

visit the firbase console here.
P.S: You need to have a google account, SignUp if you don't have one.
click on Add Project, enter the project name, then create new project, this should take less than 20seconds.( We would be building for Android on this post). incase you forgot your package name, open android/app/build.gradle scroll downwards you would see applicationId thats you package name, Now click continue and download your google.services.json file.
P.S: Make sure to click the download button just once, so as to prevent duplicate files been downloaded, if you've download this particular file before, delete it from your downloads folder. Now move the google.services.json file you just downloaded into android/app root folder. make sure its the right folder, if not its might prevent our app from running.

Once you've done click on next then open android/build.gradle and add this line under dependencies classpath 'com.google.gms:google-services:4.3.4' and this google() under all project repositories if its not already added. Now open android/app/build.gradle. and add this line apply plugin: 'com.google.gms.google-services' under app plugin then this implementation 'com.google.firebase:firebase-analytics' under dependencies. (😫phew!! we are almost there).

We need to install some Firebase packages into our app namely firebase_auth and firebase_core. open pubspect.yaml file and add this lines firebase_auth: ^0.18.0+1 and firebase_core: ^0.5.0, make sure its properly aligned (pubspect.yaml could be funny at times, lolx).Once you've done that, click on Get Packages this should install these packages into our app.

Now open main.dart file and add this lines.
WidgetsFlutterBinding.ensureInitialized();
and await Firebase.initializeApp();.

Your main.dart file should now look like this

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

P.S: don't forget to import package:firebase_core/firebase_core.dart;

Close and rerun your app on the terminal, ctrl c and flutter run. If your app runs successfully, Congratulations!!! you have successfully initialized your flutter app with firebase.

if you encounter build errors. click here for fix.

Now that we've successfully created our screens and initialized our app with flutter, its time we start writing our authentication logic.

Authenticating our App with Flutter.

Open the SignUp file, since we using TextFormField we would have to wrap our entire column into a form widget. click the column widget and also click the yellow lightbulb that shows at the left side, select wrap with widget, then rename widget to Form.

Form has a property called key add this key: _formKey. This creates a container for form fields and make us get the form values upon save. We would have to create an instance for GlobalKey, which is the _formKey we added. add this line below our static id String final _formKey = GlobalKey<FormState>();. Now create create email, password variable. String _email; String _password;. We now have to add a call back inside our TextFormField to bind our email and password variable inside our callback. Add this line inside our TextFormField

onSaved: (emailValue) {
    _email = emailValue;
  },

Do same for password TextFormField. Now lets test and see if our binding works correctly. Inside our RaisedButton add this line.

 onPressed: () {
     _formKey.currentState.save();
     print(_email);
     print(_password);
   },

Type in a dummy email and password inside the text field and click submit, you should see the text you typed inside your terminal. Lets move on.

Now add this line inside the onPressed callback

onPressed: () async {
      _formKey.currentState.save();
      try {
    final new_user = await _auth.createUserWithEmailAndPassword(
    email: _email, password: _password);
    if (new_user != null) {
    Navigator.pushNamed(context, HomepageScreen.id);
             }
      } catch (e) {
         print(e);
       }
    },

The above code takes our _auth instance from firebase and pass our email and password values into the createUserWithEmailAndPassword function from firebase. its also check if user is not available, if so its navigate us to the homescreen page. if there is an error, its catches the error and print it on the terminal.

We have to enable email and password authentication from firebase console

Now visit the firebase console here then click on your project, on the left, click on authentication, click on sign in methods, You can see Email/Password is disabled. enable it and save.

Before we test, lets go to our Homepage screen and add some contents to it, so its doesn't show a complete blank screen. Inside the Homepage screen, delete the entire class and add this


class HomepageScreen extends StatelessWidget {
  static String id = 'homepage';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: null,
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
              }),
        ],
        title: Text(
          'Homepage',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.lightBlueAccent,
      ),
      body: Center(child: Text('Homepage'),),
    );
  }
}

Open terminal and run hot restart. Now test sign up, its should sign the user up and navigate to Homepage Screen. You can click on users on firebase console, to see the list of registered users.
P.S: When testing make sure your password is 6 characters or above, firebase won't accept anything lower than that.

Lets implement signOut on our app.

Inside the method in our IconButton widget, add this
_auth.signOut(); Navigator.pop(context);. also import firebase auth import 'package:firebase_auth/firebase_auth.dart'; and create its instance like so final _auth = FirebaseAuth.instance; . Your Homepage screen should now look like this.

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

class HomepageScreen extends StatelessWidget {
  static String id = 'homepage';
  final _auth = FirebaseAuth.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: null,
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
                // Implement logout functionality
                _auth.signOut();
                Navigator.pop(context);
              }),
        ],
        title: Text(
          'Homepage',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.lightBlueAccent,
      ),
      body: Center(child: Text('Homepage')),
    );
  }
}

Now run hot reload r and test the log out functionality. its should take you back to the SignUp Screen. We are almost there, lets implement the SignIn functionality

Underneath the RaisedButton create a FlatButton and give it Text widget like so.

FlatButton(
    onPressed: () {
    Navigator.pushNamed(context, SignInScreen.id);
},
     child: Text('Sign In'),
    )

The navigator.pushNamed line would make our app navigate to the Sign In Screen. Now test and see if its working.

Open the SignIn Screen and wrap the column widget with a form widget add the key property also. Create an email and password variable like we did when implementing the Sign Up functionality, I wont walk through that again, you can check the SignUp Screen or scroll up for reference.

Inside the onPressed callback in our RaisedButton add this line

  onPressed: () async{
_formKey.currentState.save();
   try {
      final user = await _auth.signInWithEmailAndPassword(
      email: _email, password: _password);
      if (user != null) {
      Navigator.pushNamed(context, HomepageScreen.id);
       }

       } catch (e) {
        print(e);
      }
   },

This should navigate you into HomepageScreen, if you entered your correct credentials. (phew 😌! Finally, haha). We have successfully authentication our app with firebase auth. Congratulations!!!.

Feel free to correct me if you spot any errors, you can also checkout my future posts where I would be walking you through how to add forget password, reset password with firebase.

Your feedbacks and comments would be greatly appreciated. Thanks for your time.