:Google Sign-In with Flutter Web:

Social Media login is an essential part of any Mobile App & Web App nowadays. In this article, I am integrating Google Sign In in Flutter web without firebase. Please follow the below steps :

1. Getting OAuth client ID
2. Integrating Google Sign In code into your flutter web app.

Now Let's get started…

For us to get OAuth client ID, we first need to go to the Google developer console page.

Create a new Project :

Go to the OAuth consent screen and Select option External and then create.

Please fill in the required App information. All this information will display on starting popup Sign in window. Please make sure you don’t use google sign in as an app name otherwise it will show an error on the OAuth consent screen.

Next Steps..

Continue with the Scopes section just click save and continue

Add test user email to test the Google signIn demo. Please make sure Whatever email you have added here that only able to access the app.

Next, go to the Credentials tab and Make sure that the correct project is selected and then click on credentials.

Select Web Application from Application type.

Enter a name for your OAuth client and then click on create

Click to Add URI

For this client to work correctly, the last step is to configure the Authorized JavaScript origins, which identify the domains from which your application can send API requests. When in local development, this is normal localhost and some port. Here, I have created a sample port as 1234

Normally flutter run starts in a random port. In the case where you need to deal with authentication like the above, that's not the most appropriate behavior.

You can tell flutter run to listen for requests in a specific host and port with the following:

for to run localhost with a particular port.

In Android Studio, Go to Main.dart tab on the top bar and then click on Edit configuration and then add Additional run args :

Now it’s time to integrate code in Flutter file

1. Add dependency to your package’s pubspec.yaml file and then run pub get.
2. I have created a simple Main.dart file where I have created a HomePage class and in that is just called Scaffold,appbar and in body, I have added a Column and added one Material Button.

import 'package:flutter/material.dart';

import 'google_signin_api.dart';
import 'profilePage.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,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {


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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google sign in web app'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MaterialButton(
              color: Colors.blueAccent,
                onPressed: SignIn,
            child: Text('Google sign in'),
            ),

          ],
        ),
      ),
    );

  }

Future SignIn()async{

final user = await GoogleSignInApi.Login();

  if(user == null) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Sign in failed')));
  }
  else{
    Navigator.push(context, MaterialPageRoute(builder: (_)=>ProfilePage(user:user)));
  }

  }

Create SignIn method in which we are calling GoogleSignInApi.Login()

Create new file google_SighnIn_api.dart within that create GoogleSignInApi class and then do the following:

1. First create _googleSignIn object.Initialize GoogleSignIn with the scopes you want:
2. Create login methode and call the __googleSignIn object with signIn method which return the GoogleSignInAccount which held the all the information about Google Sign in user account .
3. Now add SignOut method as well like below.

import 'package:google_sign_in/google_sign_in.dart';

class GoogleSignInApi{
  static final _googleSignIn = GoogleSignIn(
clientId: "you can enter your clientId.apps.googleusercontent.com",
scopes: <String>[
    'email',
    'https://www.googleapis.com/auth/contacts.readonly',
  ],);


  static Future<GoogleSignInAccount?> Login() => _googleSignIn.signIn();
  static Future<GoogleSignInAccount?>SignOut() => _googleSignIn.signOut();
}

I have created a profile page to show username and email which we got through google sign in and created Signout button for to Signout.

import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:google_signin_flutter_web/main.dart';

class ProfilePage extends StatefulWidget {
  final GoogleSignInAccount user;

   ProfilePage({required this.user}) ;


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

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Profile Page"),
      ),
      body: Center(

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(widget.user.displayName.toString(),style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 30
            ),),
            Text(widget.user.email.toString(),style: TextStyle(
                fontWeight: FontWeight.w400,
                fontSize: 20
            ),),
            MaterialButton(
              color: Colors.blueAccent,
              onPressed: SignOut,
              child: Text('Sign Out'),
            ),

          ],
        ),
      ),
    );
  }
  Future SignOut()async{

    Navigator.push(context, MaterialPageRoute(builder: (_)=>HomePage()));


  }
}

I hope you all find this document very useful and get a clear idea about how to integrate Google SignIn/Signout with flutter Web!

You can find the Github link of the above program here! If you like this article, then do not forget to give your likes & claps! :-)

Thank you!