DEV Community: Sumanth

🌻 Isolating Go Slices: How to Create Independent Slices from an Array Safely

Sumanth — Tue, 08 Oct 2024 03:01:19 +0000

Be careful with slices — modifying a slice can also change the original array.

arr := [...]int{1, 2, 3, 4, 5}
fmt.Println(len(arr), arr) // 5 [1 2 3 4 5]

// slicing the above array
s1 := arr[2:5] // index 2 (inclusive) to index 5 (exclusive)
fmt.Println(len(s1), cap(s1), s1) // 3 3 [3 4 5]

s2 := arr[1:4]
fmt.Println(len(s2), cap(s2), s2) // 3 4 [2 3 4]

s1[0] = 99 // this will modify both the slices and array as well

fmt.Println("arr:", len(arr), arr) // arr: 5 [1 2 99 4 5] 🤯
fmt.Println("s1:", len(s1), cap(s1), s1) // s1: 3 3 [99 4 5]
fmt.Println("s2:", len(s2), cap(s2), s2) // s2: 3 4 [2 99 4] 🤯

The capacity of each slice is calculated from the specified starting point to the end of the underlying array

s1 starts at index 2, so capacity is 3
s2 starts at index 1, so capacity is 4

Modifying s1

s1[0] = 99

Since both s1 and s2 pointing to the same underlying array, modifying s1 affects arr and s2 slice as well.
Slice is a view of an underlying array. When we create a slice from an array, data will not be copied. It will just create a reference to array. So modifying the array via slice will be visible to all other slices that share the same underlying array.

Solution: Create independent slices using `copy` func

arr := [...]int{1, 2, 3, 4, 5}

s1 := make([]int, 3)
copy(s1, arr[2:5]) // s1 is now a copy of arr[2:5]

s2 := make([]int, 3)
copy(s2, arr[1:4])

s1[0] = 99

fmt.Println("Original array:", arr) // [1 2 3 4 5] 😌 array is safe now
fmt.Println("s1:", s1)              // [99 4 5]
fmt.Println("s2:", s2)              // [2 3 4]

When slice is created using make with specified size, it will be initialized with zero values.
copy function will copy data from array into the slice. So new slice will have their own independent memory and not linked with the original array anymore.

Different ways to create a deep copy of slice

original := []int{1, 2, 3, 4, 5}

// 1️⃣ using append()
duplicate := []int{}
duplicate = append(duplicate, nums...)

// 2️⃣ using copy()
duplicate2 := make([]int, len(nums))
copy(duplicate2, nums)

Does Go supports Pass By Ref ?
new vs make in Go
Does Go supports Inheritance ?
How to create a simple web server in Go ?

To learn more about such topics along with code examples, feel free to checkout my Github repo where I regularly commit about Go core-concepts & best practices.

Sai7xp / learn-golang

GoLang Basics to Advanced. Including Design Patterns, SOLID Principles & more

Go Basics: Why nil Slices accept new values, but nil Maps don't

Sumanth — Mon, 30 Sep 2024 18:07:56 +0000

New values can be added to Nil Slice but adding new values to Nil Map throws a runtime error. Let's see why

var slice []int // nil slice
slice = append(slice, 1) // append works as expected
fmt.Println(slice) // [1]

var m map[string]int // nil map
m["one"] = 1 // 🚨 Runtime panic: assignment to entry in nil map

Why appending to a Nil Slice works:
Slice is a reference to an underlying array and dynamically-sized data structure. It consists of 3 components

Pointer to underlying array
Length of slice
Capacity of slice

When we declare a nil slice, the length and capacity will be zero and it doesn't point to any underlying array. Basically append operation checks the capacity and if it's not sufficient then it allocates new underlying array with enough capacity to store the new elements and returns a new slice that points to newly created array. So append works as expected.

Why adding to a Nil Map doesn't work:
Map in golang basically acts as a hash table and the internal data structures needs to be initialized first before we can store the key-value pair.

When we declare a map as nil (var m map[KeyType]ValueType), it is uninitialized and not yet ready to store key-value pairs. So this will create a runtime error when we try to add values to a nil map. To avoid such errors create map using make

var m map[string]int // nil map

m = make(map[string]int) // initialize it
m["one"] = 1 // map is now initialized, so we can add values
print(m) // map[one:1]

Does Go supports Pass By Ref ?
new vs make in Go
Does Go supports Inheritance ?
How to create a simple web server in Go ?

To learn more about such topics along with code examples, feel free to checkout my Github repo where I regularly commit about Go core-concepts & best practices.

Sai7xp / learn-golang

GoLang Basics to Advanced. Including Design Patterns, SOLID Principles & more

What are Module Bundlers ? How to configure Webpack ?

Sumanth — Wed, 16 Jun 2021 17:41:58 +0000

Hey! 🐱

How can we take advantage of Module Bundlers to build large scale applications.

First let's understand when Module Bundlers can be used and why should we use them.

Def :- Module Bundlers can be used to bundle our JavaScript files, images, styles, and fonts together into single folder.

Clone this repo and write your code on new branch.

Sai7xp / Webpack-Template

Webpack-Template

This repo created to explain webpack and the article published on dev.to read it here -> https://dev.to/movingmelody/what-are-module-bundlers-how-to-configure-webpack-75h

View on GitHub

🌼

When we are beginners in Web Development World we use these basic 3 things : HTML, CSS, JS. But when we dive into it we might replace JS with TypeScript, HTML with Library like ReactJs, CSS with Sass.

In addition to the above things we might also inject things like firebase, npm packages, D3 Js etc. Many of the injected dependencies might use common Js which isn't going to work with modern es syntax. And we get errors like - Uncaught Reference Error : require is not defined. Some of the old browsers can't understand the new Js syntax.

So even if we try to manage the things to get it work we might end up with a massive JS file which then needs to be minified and broken into smaller files to reduce the load time.

So to solve all the above problems module bundlers like Webpack, parcel, rollup, snowpack etc., came into existence to make the process easy and error free.
Okay, now we know why these are introduced but the basic thing they do is taking multiple JS files and combine them into a single large file. which can be used later to load our app in browser.

Okay enough theory! Let's 🛠️ configure Webpack from scratch and write some code (>‿◠)✌

🌻 Follow the below steps to configure Webpack.

1. Create an entry Javascript file

Create index.js in the src folder. This src/index.js will be the entry file because everything starts from here.

// src/index.js
console.log(
"lets use lodash package to convert this plain text to kebab-case text"
);

Now create public/index.html file and import the index.js file in it.
Folder structure 👇🏻

index.html

<!-- public/index.html -->
<head>
    <meta charset="UTF-8">
    <title>Configure Webpack</title>
    <script src="../src/index.js"></script>
</head>
<body>
    <p>and some text here</p>
</body>

Open the html file and you should see the console :

2. Install `lodash` npm package

Before installing the lodash package let's first create package.json file in the project folder using the command npm init -y.
🌻
Now, Install lodash using command npm i lodash.
So now import any dependency from lodash. Let's import kebabCase to convert the normal string into kebabCase.

// src/index.js
import { kebabCase } from "lodash";

console.log(
kebabCase("lets use lodash package to convert this plain text to kebab-case text")
);

When you hit the refresh button in the browser you should see the below error.

So this is where webpack came to the rescue and solves the above error.

3. Installing & Configuring Basic `webpack`

So to solve the above error we need to use bundlers like webpack, Parcel. Let's see how we can use webpack to clear the above error. Install it using the command
npm install --save-dev webpack webpack-cli.
After install webpack lets change the build command in the package.json file. Build command simply calls the webpack.

{
.
.
.
 "scripts": {
    "build": "webpack"
  },
.
.
.

🙌🏻 Now let's run the build command npm run build from the command line. It will analyze the index.js code and then it will compile it to dist/main.js file. So to use that main.js file we need to change the script tag in html file to <script src="../dist/main.js"></script>.
Now the error in the browser should be gone and the console output should be look like this.

🎉 And that's it we just completed configuring basic Webpack.

4. Customize the Webpack Config

Till now we are using the default Webpack config. Default config will look for src/index.js file by default. So if the name of the file is other than index.js things will not work.
So to craft our own configuration we need a file. Create webpack.config.js file in the root directory. Then you can start customizing the behavior of Webpack.

const path = require("path");
module.exports = {
  // define your entry point here
  entry: "./src/index.js",
  output: {
    filename: "otherThanMain.js",
    path: path.resolve(__dirname, "dist"),
  }
};

Now run the build command again and otherThanMain.js will be created inside the dist folder. Because we changed the output file name in the config file.

5. Adding Sass loader

But when building the big projects we might also use the Sass. So create style.scss file inside the src folder and write some sass code and then import it insider the index.js file.

import "./style.scss";

import { kebabCase } from "lodash";

console.log(kebabCase("lets use lodash package to convert this plain text to kebab-case text"));

Since we are importing the sass file inside our js file things will not work. So to make the things work we need to install SASS Loader*. Loaders can be used to process the files that aren't Javascript.

Run the command npm i --save-dev css-loader style-loader sass-loader. Right after installing them modify the webpack config file like this :

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "awesome.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

Now run the build command again and everything will be alright.

Learn more about module bundlers and webpack here.
My twitter handler - @movingmelody
Tutorial video ref.
Access files from here -

Sai7xp / Webpack-Template

Webpack-Template

This repo created to explain webpack and the article published on dev.to read it here -> https://dev.to/movingmelody/what-are-module-bundlers-how-to-configure-webpack-75h

View on GitHub

What are SYMBOLS in Javascript ?

Sumanth — Mon, 17 May 2021 12:43:06 +0000

Introduction

1. What exactly is a Symbol in Javascript ?

It's a primitive data of Javascript, along with String, Number (Integers, Floats, Infinity, NaN), Boolean, null, and undefined. And it represents a "unique" Identifier. Introduced in ECMAScript 2015, ES6.

2. How `symbols` can be used ?

They bring a few benefits to the language and are particularly useful when used as object properties. But, what can they do for us that strings cannot? Usually, we use strings as object properties.

Bird's Eye View

Once you create a symbol, its value is kept private and for internal use.
You create a symbol by calling the Symbol() global factory function.
Every time you invoke Symbol() we get a new and unique symbol, guaranteed to be different from all other symbols

Symbol() === Symbol() //false

Symbols are used to identify Object Properties.
And to avoid name clashing btw properties, since no symbol is equal to another.
Symbols are not enumerated, which means that they do not get included in a for..of or for..in loop ran upon an object.

const NAME = Symbol()
const person = {
  [NAME]: 'Jonathan'
}

person[NAME] //'Sumanth'

const RUN = Symbol()
person[RUN] = () => 'Person is running'
console.log(person[RUN]()) //'Person is running'

Creating Symbols

A value of this type can be created using Symbol():

let id = Symbol();
// here id is the new symbol
consolo.log(id); // Symbol()

Since a symbol is a primitive value, if you attempt to create a symbol using the new operator, you will get an error:

let s = new Symbol(); // TypeError
let arr = new Array(); // Totally acceptable

We can also give symbol a description in string format as a first argument while instantiating a Symbol and it is optional and it doesn't affect the symbol itself.

This description is mostly useful for debugging purpose.

let id = Symbol(); // without description
let id2 = Symbol("firstname"); // symbol with desc "firstname"
console.log(id2); // Symbol("firstname")
console.log(id2.description); // "firstname"

The Symbol() function creates a new unique value each time you call it:

console.log(Symbol() === Symbol()); // false

const s1 = Symbol();
const s2 = Symbol();
console.log(s1 === s2); // false

Even if we give the same description to different symbols they are totally different and that's why Symbol is a unique Identifier.

let id1 = Symbol("desc");
const str = 'desc';
let id2 = Symbol("desc");
console.log(id1 == id2); // false
console.log(s1 === str); // false

let value1 = "Sumanth"; // primitive type string
let value2 = "Sumanth";
console.log(value1===value2); // true

Why Symbols are Introduced

Basically, primitive values are Immutable. They can't be changed. Of course, a variable with a primitive assigned can be reassigned. For example, when you write the code let x = 1; x++; you've reassigned the variable x. But, you haven't mutated the primitive numeric value of 1.
However, if you modify a non-primitive value, the modified value will also be modified where it has been called from.

function primitiveMutator(val) {
  return val = val + 1;
}
let x = 1;
primitiveMutator(x); // 2
console.log(x); // 1 (value not changed)

function objectMutator(obj) {
  obj.prop = obj.prop + 1;
}
let obj = { prop: 1 };
objectMutator(obj);
console.log(obj.prop); // 2

Primitive values are equal to another primitive with an equivalent value.

const first = "abc" + "def";
const second = "ab" + "cd" + "ef";
console.log(first === second); // true

But, equivalent non-primitive values will not result in values which are exactly equal.

const obj1 = { name: "Intrinsic" };
const obj2 = { name: "Intrinsic" };
console.log(obj1 === obj2); // false

// Though, their .name properties ARE primitives:
console.log(obj1.name === obj2.name); // true

Objects play an elemental role in the JavaScript language. They’re often used as collections of key/value pairs. However, this is a big limitation of using them in this manner: Until symbols existed, object keys could only be strings. If we ever attempt to use a non-string value as a key for an object, the value will be coerced to a string.

NOTE: Map data structure was created in part to allow for key/value storage in situations where a key is not a string. Whereas in Objects we can use only strings as keys

Where can we use `Symbols` (Symbols actual Use-case)

There are the ways to add new properties to an Object:

let obj = {name:"sumanth"};
obj["Native"] = "Mars"; // using square brackets
console.log(obj["Native"]); // "Mars"

obj.phno = 96584; // using dot operator
console.log(obj.phno) // 96584
console.log(obj); // {name: "sumanth", Native: "Mars", phno: 96584}

And the another way using Symbols as object Properties:

let obj = {}; // new object
let sym = Symbol("name"); // new symbol
obj[sym] = 'foo'; // adding new property to obj

 obj = {
[sym]:"foobar", // another way of using symbols // not as "sym": 123
[Symbol('name')]: 'foo' // directly creating symbols here
}

What’s the benefit of using Symbol("name") as property name or key over a string "name"?

Properties with a symbol key don't appear in the JSON representation of your object. Not even the for-in loop or Object.keys can enumerate them:

let id= Symbol('name'); // new symbol
var newObj = {
  [id]:369, // symbol property
  okay:"A text"
}
JSON.stringify(newObj) // {"okay":"A text"}

for( var prop in newObj) {
    console.log(newObj[prop]); // A text
}

console.log(Object.keys( newObj)); // ['okay']

If you can observe in the above examples symbol properties are not appeared when we try to access them. In this way they allow us to create some "HIDDEN" properties of an object.

But these properties are not fully private in a strict sense. We can access them using Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols(newObj)[0] // Symbol(name)
newObj[Object.getOwnPropertySymbols(newObj)[0]]; // 369

Let's say we imported one user object from another code

let user = { name: "John" }; // imported code

// Our script wants to create "id" property or identifier
user.id = "Our id value";

// ...Another script also wants "id" for its purposes...
user.id = "Their id value"
// Boom! overwritten by another script!

So, to overcome this conflict we can use Symbols as property names.

let user = { // belongs to another code
  name: "John"
};

let id = Symbol("id");
user[id] = 1;

Also, imagine that another script wants to have its own identifier inside user, for its own purposes. That may be another JavaScript library, so that the scripts are completely unaware of each other.

Then that script can create its own Symbol("id"), like this:

// ...
let id = Symbol("id");
user[id] = "Their id value";

There will be no conflict between our and their identifiers, because symbols are always different, even if they have the same name.

…But if we used a string "id" instead of a symbol for the same purpose, then there would be a conflict as we seen above.

Summary

To avoid conflicts in identifier names we can use Symbols. If one imported object has a property as "name" and if we accidentally create our property with same "name" then the previous property will be overridden.

How to change commit message in Git ?

Sumanth — Wed, 17 Mar 2021 17:45:50 +0000

Sometimes we need to change the git commit message which can be either pushed/not-pushed commit, here is how we can change the git commit message.

To change commits which are not pushed

git commit --amend

commits which are already pushed

git commit --amend
git push origin master --force

By using --force we can update our commit message on remote repo also

Build a Captcha Code generator (Mock) using JavaScript.

Sumanth — Sun, 20 Dec 2020 19:40:08 +0000

The better way to learn any programming language or framework is by building projects. Get out of the tutorial hell and build projects on your own.

Introduction

Basically, CAPTCHA tools are used to differentiate between real users and bots. Have you ever wondered how they work?
Let's try to build a captcha generator on our own and understand what exactly happens under the hood. If you are a beginner in javascript then this small project will help you a lot.

Demo of the application

Let's write some code 😎

A captcha generator typically consists of 4 elements verify button, generate new button, an input field to enter the code, captcha code in image format.

HTML, CSS are pretty simple here. So let's try to understand the JavaScript part.
Mainly the captcha code consists of alphabets and numbers.

// declaring and initializing some variables
let alphabets = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
let status = document.getElementById('status');
// we'll use this status dom element to display the response while verifing the code
status.innerText = "Captcha Generator";
let captcha;

Next let's create a two functions generate() and check(). Using the generate() function we'll generate a new captcha code. And we'll validate the user entered code and the generated captcha code using the check() function.

generate = () => {
let first = alphabets[Math.floor(Math.random() * alphabets.length)];
let second = Math.floor(Math.random() * 10);
let third = Math.floor(Math.random() * 10);
let fourth = alphabets[Math.floor(Math.random() * alphabets.length)];
let fifth = alphabets[Math.floor(Math.random() * alphabets.length)];
let sixth = Math.floor(Math.random() * 10);
captcha = first.toString()+second.toString()+third.toString()+fourth.toString()+fifth.toString()+sixth.toString();
// console.log(captcha);
// . . . . . 
}

We've used the Math.random() built-in function to generate a random number. Read more about Math.random() here.
Now the captcha variable holds the 6 digit captcha code.
Now display the captcha code to the user using the below snippet.

generate = () => {
// . . . . 
document.getElementById('generated-captcha').value = captcha;
document.getElementById("entered-captcha").value = '';
status.innerText = "Captcha Generator"
}

The next task is to verify the user entered code with the generated captcha code. So using the check() function we'll do that.

check = () => {
    let userValue = document.getElementById("entered-captcha").value;
    if(userValue == captcha){
    // navigate him to next page or do anything
    status.innerText = "Correct!!"
}else{
    // tell user to enter the code again
    status.innerText = "Try Again!!"
    document.getElementById("entered-captcha").value = '';
}
}

And that's simple. Now add some more features to this simple project like:

Using special characters (%, $, &...) in captcha code
Using the different font
Changing the length of captcha code dynamically

Additional info

You can also use PHP language to implement this captcha verification.
If you want to implement the captcha code verification in your own website, you can use any API service without implementing it from the scratch. API handles the rest of the things.
Learn more about API's here.

Flutter - Firebase Google Sign-in Auth + SplashScreen using updated API

Sumanth — Fri, 29 May 2020 07:19:21 +0000

0.Introduction

Have you ever wanted to implement user authentication in your flutter Application? Well, you've come to the right place..!
Let's see how to add GoogleSignIn() auth using Firebase Authenticationn.

What you'll learn

Adding SplashScreen to your app

Navigating user from the SplashScreen to AuthScreen or HomeScreen

GoogleSignIn Authentication

Demo of the final implementation...

What is Firebase? (quick intro..)

Firebase is Google's mobile platform with a variety of services to build & ship our apps quickly. It is categorized as a NoSQL database and stores data in JSON like documents.

1.Setup Firebase Project

Head over to Firebase Console then add a new project.
To keep things simple and short I'm not explaining every step here. Trust me next steps are pretty clear to add your app to firebase.

Make sure to set up a sign-in method in the Authentication section of firebase console. Otherwise, things are not gonna work as expected.

At a particular step, it asks you to enter SHA-1 Key to complete the process. Run this command in your cmd to get the SHA-1 key.

keytool -list -v -alias androiddebugkey -keystore C:\Users\YOUR_USER_NAME_HERE\.android\debug.keystore

2.Write some Code

Before writing code let's understand what we are going to build.

When the user opens app for the first time we should navigate user from SplashScreen to AuthScreen.
Next time when the user opens the app we should check if user is already logged in or not.
If user = loggedIn then navigate to HomeScreen by skipping AuthScreen. ELSE navigate user from SplashScreen to AuthScreen.

Let's write some code🥳

Packages that we'll use:

firebase_auth: ^0.18.3

firebase_core: ^0.5.2

google_sign_in: ^4.5.6

Add the above 3 packages to your pubspec.yaml file
And for every flutter app using Firebase, we must use the firebase_core package. And then you must initialize the app.
await Firebase.initializeApp();
If you don't initialize the app you may get the below error.

[core/no-app] No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp()

Fire-up your preferred code editor and open your main.dart file. Remove all the boiler-plate code in main.dart file and add the below code.

import 'package:YOUR_PROJECT_NAME/screens/splashscreen.dart';
import 'package:YOUR_PROJECT_NAME/screens/authscreen.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

// Defining routes for navigation
var routes = <String, WidgetBuilder>{
  "/auth": (BuildContext context) => AuthScreen(),
};

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'FaceBase',
    routes: routes,
    home: SplashScreen(),
  ));
}

2.Let's build UI for the remaining screens

SplashScreen UI and Logic

Create a new dart file named splashscreen.dart inside the lib/screens folder.
Your splashscreen.dart should look like this..

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

class SplashScreen extends StatefulWidget {
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  User _user;
  @override
  void initState() {
    super.initState();
    initializeUser();
    navigateUser();
  }

  Future initializeUser() async {
    await Firebase.initializeApp();
    final User firebaseUser = await FirebaseAuth.instance.currentUser;
    await firebaseUser.reload();
    _user = await _auth.currentUser;
    // get User authentication status here
  }

  navigateUser() async {
    // checking whether user already loggedIn or not
    if (_auth.currentUser != null) {
      // &&  FirebaseAuth.instance.currentUser.reload() != null
      Timer(
        Duration(seconds: 3),
        () => Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(
                builder: (context) =>
                    HomeScreen(username: _auth.currentUser.displayName)),
            (Route<dynamic> route) => false),
      );
    } else {
      Timer(Duration(seconds: 4),
          () => Navigator.pushReplacementNamed(context, "/auth"));
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text("Design Your splash screen"),
        ),
      ),
    );
  }
}

Create a another dart file named homescreen.dart inside the lib/screens folder.
And paste the below code into your homescreen

import 'package:firebase_gsignin/screens/authscreen.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class HomeScreen extends StatefulWidget {
 final String username;
  HomeScreen({Key key, @required this.username}) : super(key: key);
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello "+ widget.username),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.exit_to_app),
            onPressed: () async {
              await FirebaseAuth.instance.signOut();
              await googleSignIn.disconnect();
              await googleSignIn.signOut();
              Navigator.of(context).pushAndRemoveUntil(
                  MaterialPageRoute(builder: (context) => AuthScreen()),
                  (Route<dynamic> route) => false);
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
                await googleSignIn.disconnect();
                await googleSignIn.signOut();
                Navigator.of(context).pushAndRemoveUntil(
                    MaterialPageRoute(builder: (context) => AuthScreen()),
                    (Route<dynamic> route) => false);
              },
              child: Text("Log Out"),
              color: Colors.redAccent,
            ),
            SizedBox(
              height: 10.0,
            ),
          ],
        ),
      ),
    );
  }
}

Let's implement Firebase Authentication

Create a new file named authscreen.dart inside lib/screens folder in which we'll set up google sign in and AuthScreen UI.

Code for the authscreen.dart UI and logic:

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_gsignin/screens/homescreen.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';

String name;
String email;
String imageUrl;
final FirebaseAuth auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();
class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}
class _AuthScreenState extends State<AuthScreen> {
  bool isVisible = false;
  Future<User> _signIn() async {
    await Firebase.initializeApp();
    final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
    final GoogleSignInAuthentication googleSignInAuthentication =
        await googleSignInAccount.authentication;
    final AuthCredential credential = GoogleAuthProvider.credential(
      idToken: googleSignInAuthentication.idToken,
      accessToken: googleSignInAuthentication.accessToken,
    );
    // final AuthResult authResult = await auth.signInWithCredential(credential);
    // final User user = authResult.user;

    User user = (await auth.signInWithCredential(credential)).user;
    if (user != null) {
      name = user.displayName;
      email = user.email;
      imageUrl = user.photoURL;
    }
    return user;
  }
  @override
  Widget build(BuildContext context) {
    var swidth = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("assets/images/bg.png"),
                    fit: BoxFit.cover)),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Visibility(
                child: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Color(0xFFB2F2D52)),
                ),
                visible: isVisible,
              )
            ],
          ),
          Container(
            margin: const EdgeInsets.only(
              bottom: 60.0,
            ),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: SizedBox(
                height: 54.0,
                width: swidth / 1.45,
                child: RaisedButton(
                  onPressed: () {
                    setState(() {
                      this.isVisible = true;
                    });
                    _signIn().whenComplete(() {
                      Navigator.of(context).pushAndRemoveUntil(
                          MaterialPageRoute(
                              builder: (context) => HomeScreen(username: name)),
                          (Route<dynamic> route) => false);
                    }).catchError((onError) {
                      Navigator.pushReplacementNamed(context, "/auth");
                    });
                  },
                  child: Text(
                    ' Continue With Google',
                    style: TextStyle(fontSize: 16),
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  elevation: 5,
                  color: Color(0XFFF7C88C),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3.Conclusion

Well, we've successfully implemented authentication in our flutter app.

If you've any doubts, you can find the GitHub repo of this super simple project in the following link:

Sai7xp / DEV.to-FirebaseAuth-Flutter

Flutter + Firebase Google SignIn Demo

App ScreenShots

keep Fluttering!

Thank you for reading, if you found the article useful make sure to show some love.
-Moving Melody
Let's catch up on Twitter!

DEV Community: Sumanth

🌻 Isolating Go Slices: How to Create Independent Slices from an Array Safely

Solution: Create independent slices using copy func

Different ways to create a deep copy of slice

Sai7xp / learn-golang

GoLang Basics to Advanced. Including Design Patterns, SOLID Principles & more

Go Basics: Why nil Slices accept new values, but nil Maps don't

Sai7xp / learn-golang

GoLang Basics to Advanced. Including Design Patterns, SOLID Principles & more

What are Module Bundlers ? How to configure Webpack ?

Sai7xp / Webpack-Template

Webpack-Template

1. Create an entry Javascript file

2. Install lodash npm package

3. Installing & Configuring Basic webpack

🎉 And that's it we just completed configuring basic Webpack.

4. Customize the Webpack Config

5. Adding Sass loader

Sai7xp / Webpack-Template

Webpack-Template

What are SYMBOLS in Javascript ?

Introduction

1. What exactly is a Symbol in Javascript ?

2. How symbols can be used ?

Bird's Eye View

Creating Symbols

Why Symbols are Introduced

Where can we use Symbols (Symbols actual Use-case)

Summary

How to change commit message in Git ?

To change commits which are not pushed

commits which are already pushed

Build a Captcha Code generator (Mock) using JavaScript.

Introduction

Demo of the application

Let's write some code 😎

Additional info

Flutter - Firebase Google Sign-in Auth + SplashScreen using updated API

0.Introduction

What you'll learn

What is Firebase? (quick intro..)

1.Setup Firebase Project

2.Write some Code

Let's write some code🥳

Packages that we'll use:

Let's implement Firebase Authentication

3.Conclusion

Sai7xp / DEV.to-FirebaseAuth-Flutter

Flutter + Firebase Google SignIn Demo

App ScreenShots

keep Fluttering!

Solution: Create independent slices using `copy` func

2. Install `lodash` npm package

3. Installing & Configuring Basic `webpack`

2. How `symbols` can be used ?

Where can we use `Symbols` (Symbols actual Use-case)