Google Connexion on Web

Introduction

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

Using Google Connexion on the web

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

1. Créer a web client in the Google Console

   If you have already configured Google Connexion 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 Recherche 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 Initialiser. 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',
         }
       })
      })

   Web Redirect Handling

   When using Google login on web, you MUST call any function from the plugin when the redirect happens to initialize the plugin so it can handle the redirect and close the popup window. You can call either isLoggedIn() OR initialize() - both will trigger the redirect handling:

   // Option 1: Call isLoggedIn when the redirect page loads
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Ignore the result, this is just to initialize the plugin
   });
   
   // Option 2: Call initialize when the redirect page loads
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Ignore any errors, this is just to handle the redirect
   });

   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));