Google Login on Web

Introduction

In this guide, you will learn how to setup Google Login with Capgo Social Login for web applications. I assume that you have already read the general setup guide.

Using Google login on the web

Using the google login on the web is rather simple. In order to use it, you have to do the following:

1. Create a web client in the Google Console

   Note

   If you have already configured Google Login for Android, you can skip this step as you’ve already created a web client. You can proceed directly to step 2.

   1. Click on the search bar

      

   2. Search for credentials and click on the APIs and Services option (number 2 on the screenshot)

      

   3. Click on the create credentials

      

   4. Select OAuth client ID

      

   5. Select the Application type as Web application

      

   6. Name your client and click Create

      

   7. Copy the client ID, you’ll use this as the webClientId in your application

      

2. Configure the web client in the Google Console

   1. Please open the credentials page and click on your web client

      

   2. Now, please add the Authorized JavaScript origins. This should include all the addresses that you might use for your app. In might case, I will ONLY use localhost, but since I use a custom port I have to add both http://localhost and http://localhost:5173

      1. Please click on add URI

         

      2. Please type your URL

         

      3. Please repeat until you added all the URLs

      4. When you finish, your screen should look something like this

         

   3. Now, please add some Authorized redirect URIs. This will depend on what page do you depend to use the CapacitorSocialLogin plugin on. In my case, I am going to be using it on http://localhost:5173/auth

      1. Please click on ADD URI

         

      2. Enter your URL and click ADD URL again

         

   4. Click save

      

3. Now, you should be ready to call login from JavaScript like so:

   1. First, import SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. Then, call initialize. This should be called ONLY once.

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
       SocialLogin.initialize({
         google: {
           webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
         }
       })
      })

   3. Create a login button that calls SocialLogin.login when clicked

      const res = await SocialLogin.login({
       provider: 'google',
       options: {}
      })
      // Handle the response
      console.log(JSON.stringify(res));