I have an API on a local server, and I’m locally calling it from my application, yet it returns the error below

Welcome:1 Access to fetch at ‘http://192.168.70.19:8000/’ from origin ‘http://10.14.0.2:3001’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I don’t have access to the sever but I know who does, Do I at all cost need to contact him to install the said CORS?

I wanted to try out Wiki.js on my local pc. Once the setup was complete i logged in with the admin account but i can’t create a home page or go into administration.

All i get is the unauthorized page. I changed the port from 80 to 4001 but i don’t think this should change anything.

Help is greatly appreciated!

I’m trying to put a new map onto the planet Serpulo, but when I do, it doesn’t start waves.

The map code is this:

var map1 = SectorPreset('ventos-gelidos', Planets.serpulo, 145)
map1.localizedName = "Ventos Gélidosjkjjkjk"
map1.description = "Um lugar que, diferente de outros setores vanilla, contém a fruta Manga, com poucos inimigos."
map1.alwaysUnlocked = false
map1.difficulty = 4.5
map1.captureWave = 25
map1.startWaveTimeMultiplier = 3
map1.rules = Rules()
map1.rules.canGameOver = true
map1.rules.coreIncinerates = true
map1.rules.waves = true
map1.rules.waveSending = true
map1.rules.winWave = 25
map1.rules.dropZoneRadius = 25

I’m encountering an issue in my Node.js (8.5.3) application related to JSON Web Token (JWT) verification using RSA key pairs. The error message is as follows:

I have also attached the crypto.ts file that handles the JSON Web Tokens for my application.

import crypto from 'crypto';
import { readFileSync } from 'fs';
import { JwtPayload, sign, verify } from 'jsonwebtoken';
import { logger } from './app';

export function generateRSAKeyPair() {
    const { privateKey, publicKey } = crypto.generateKeyPairSync('rsa', {
        modulusLength: 512,
        publicKeyEncoding: { type: 'pkcs1', format: 'pem' },
        privateKeyEncoding: { type: 'pkcs1', format: 'pem' }
    });

    return { privateKey, publicKey };
}

export function generateJWTToken(admin: boolean, username: string) {
    const key = readFileSync('private.key', { encoding: 'utf-8', flag: 'r' });
    return sign({
        admin,
        username
    }, key, { algorithm: 'RS256' });
}

export function verifyJWTToken(token: string) {
    try {
        const key = readFileSync('public.key', { encoding: 'utf-8', flag: 'r' });
        const verifiedToken = verify(token, key, { algorithms: ['RS256'] }) as JwtPayload;
        if (!verifiedToken) return false;
        return verifiedToken

    } catch (error) {
        logger.fatal(error);
        return false;
    }
}

I have confirmed the following:

• The key variable is not undefined and is fetching the contents of the file.
• readFileSync does not use caching.
• The values that get passed into the function are valid.
• The attempted JWT is indeed valid confirmed by JWT.io

I suspect there might be an error in how I’m handling the keys or in the JWT library version.

Can someone help me identify the root cause of the “invalid signature” error and suggest potential solutions? Any insights or advice would be greatly appreciated.

My problem is that I am not getting an event about my transaction when tracking a smart contract. In my code below is an example of my WalletService class in which I create an instance of new TronWeb(...) class. In this code we are interested in the updatePayment() function, in this function I connect to the Tether USDT smart contract (TRC20) through the tronweb library, put an event listener on the Transfer method.

When I compile and run the code, I can see in the console a lot of addresses of other people’s wallets to which USDT tokens have been sent, but when I send a dollar to the wallet I’m tracking (check via if) I can’t even see my wallet in the console….

Any help would be greatly appreciated

Сode:

import TronWeb from 'tronweb';
import crypto from 'crypto';
import base58 from 'bs58';

class WalletService {
    fullNode: string;
    solidityNode: string;
    eventServer: string;
    usdtContractAddress: string;
    privateKey: string;
    walletAddress: string;
    tronWeb: TronWeb;
    tronClass: TronWeb;
    headers: { 'TRON-PRO-API-KEY': string };

    constructor() {
        this.fullNode = 'https://api.trongrid.io';
        this.solidityNode = 'https://api.trongrid.io';
        this.eventServer = 'https://api.trongrid.io';
        this.usdtContractAddress = 'TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t';
        this.privateKey = 'EFF6787DC...B3BF742';
        this.walletAddress = 'TV1qVqWSJ...E68Qq9FL';
        this.headers = { 'TRON-PRO-API-KEY': '4f01...19c309e' };
        this.tronWeb = new TronWeb(
            {
                fullNode: this.fullNode,
                solidityNode: this.solidityNode,
                eventServer: this.eventServer,
                headers: { 'TRON-PRO-API-KEY': '4f01...19c309e' }
            },
            this.privateKey
        );
        this.tronWeb.setAddress(this.walletAddress);
    }

    async updatePayment(): Promise<void> {
        try {
            const contract = await this.tronWeb.contract().at(this.usdtContractAddress);

            contract.Transfer().watch((err: any, event: { result: { to: string; from: string; value: string } }) => {
                if (err) {
                    return console.error('Error with "Transfer" event:', err);
                }

                const addressTo = TronWeb.address.fromHex(event.result.to);
                console.log(addressTo);
                if (addressTo == this.walletAddress) {
                    console.log('Received USDT!', event.result.value);
                }
            });
        } catch (error) {
            console.error('Ошибка при ожидании платежа:', error);
        }
    }
}

new WalletService().updatePayment();

export default WalletService;

I tried with and without api keys, tried to track the wallet from which I send coins, the result is the same….

Important Mention!!! I have many wallets that need to be checked at once and their number is mastabitized

Here I have written a program that will find the first palindromic string in an array, like if the array is [“abs”, “car”, “ada”, “racecar”, “cool”], and I want output like “ada” so I have written a program that represents the palindromic logic representation, so here the output is not coming as expected. Can you please rectify and modify that program?

function isPalindrome(str) {
let left=0,right=str.length
while(left<right){
    if(str.charAt(left)!=str.charAt(right)){
        return false
    }
    left++;
    right--;
}
return true
}
function firstPalindrome(words) {
  for (let i=0;i<words.length;i++) {
    if (isPalindrome(words[i])) {
      return words[i];
    }
  }
  return "";
}

console.log(firstPalindrome(["abc", "car", "ada", "racecar", "cool"]));

I followed a tutorial on YouTube and changed the CSS code a little so that the navbar was fixed, but that made the content in the form of a collection of cards underneath become squeezed and attached, following is the coding and results

How do I make it look neater by giving a distance between the navbar and the content?

Here I have written a program that will find all the subsets array, like if the array is [1, 2, 3], and I want output like [[], 2],, 2, , [2, 1], 3, , [3, 1], [3, 2], [3

I have written a program that represents the binary logic representation. The output is not coming as expected.

Can you please rectify and modify that programme?

const getAllSubsets = arr => {
    let n = arr.length
    let add = []
    for (let i = 0; i < (1 << n); i++) {
        for (let j = 0; j < n; j++) {
            if ((1 << j) & i) {
                add.push([arr[j]])
            }
        }
    }

    return add
}
      
console.log(getAllSubsets([1,2,3]))

I am trying to do a spread with renaming. Please see my code below:

  console.log('request:', req.body);
  const {
    coupon_id: couponId,
    business_type: businessType,
    incorporated_state: incorporatedState,
    years_in_business: yearsInBusiness,
    months_in_business: monthsInBusiness,
    business_nature: businessNature,
  } = req.body;

  console.log('business type:', businessType);
  console.log('yearsInBusiness:', yearsInBusiness);

The code prints the below:

request: {
    coupon_id: 1,
    business_type: "LLC",
    incorporated_state: "NY",
    address_state: "NY",
    years_in_business: 1,
    months_in_business: 6
}
business type: undefined
yearsInBusiness: undefined

Clearly, my constants are known to the compiler, yet the values are undefined.
What am I doing wrong?

Problem with iframe Elementor in Frontend editor, library not find element, when i create canvas. Any idea? Thanks!

function setup() {

const canvasAudio = createCanvas(windowWidth, windowHeight);
canvasAudio.parent('audio_visualizers');

if (audioButton == true) {

    toggleBtn = createButton("play");

    toggleBtn.addClass("toggle-btn");

    toggleBtn.parent('audio_visualizers');
    
    toggleBtn.mousePressed(toggleAudio);

} else {
    audio.loop()
}

fft = new p5.FFT();

}

enter image description here

In Elementor , DOM elements are created in an external window (iframe).

Im not good at programming in PHP and JS, but im trying to make a button that changes the background image from an ID element that is inside of a incorporated style ( element) using this code:

My PHP/HTML code and button:

 <?php 
    $old-img-url = 'old-image.png';
    $new-img-url = 'new-image.png';
 ?>
 
 <style> #my-div-id *{ background-image: url('<?php echo $old-img-url ?>'); } </style>

 <div id='my-div-id'>
  // my extra code...
 </div>

 <?php
    echo "<button onclick='changeImage()'>Change image</button>";
 ?>

My script (out of the PHP code):

 <script>
 function changeImage() {
    const Imagechange = document.querySelector('#my-div-id');
    Imagechange.style.backgroundImage = "url('<?php echo $new-img-url ?>')";
 }
 </script>

Welp, my problem is that the button works and loads the url of the new background image for the ID, but it doesn’t replace it. It appears like this:
Error screenshot

It’s there any way to fix this? And if not, is there an alternative for give a solution to this? Thanks and cheers.

Note: I tried quitting some PHP line codes to convert then in HTML elements, because i know that PHP renders all the elements written inside of it into the page and doesn’t allows you to do more changes when it is rendered, so then, i tried to do that to see if there was a difference, but there wasn’t. So it stills with the same problem.

Hello Stack Overflow community,

I am currently participating in a hackathon, and my project involves developing an e-commerce android app that addresses the challenge of high delivery costs for small buyers. To mitigate these costs, I am opting for an open-source approach, and I need your guidance on choosing the most suitable open-source map for my application.

I have narrowed down my options to Mapbox, Leaflet, and OpenStreetMap. However, I’m unsure which one would be the best fit for a unique feature I want to implement. The app aims to allow users to define the delivery route for drivers, providing a solution to the common problem of drivers receiving incorrect directions.

Here are my key considerations:

Map Options: Mapbox, Leaflet, OpenStreetMap – Which one would be most suitable for integrating user-defined routes effectively?

Real-Time Traffic Data: I also want to enhance the app by integrating real-time traffic data. Where can I access reliable real-time traffic data for this purpose?

I appreciate any insights or recommendations from your experiences. Thank you in advance!

My projects include some bootstrap accordion. I use collapse and show to allow the user to close each accordion by themselves. But now, when I close one of the accordions and reopen it, the others close in on it.

I added the bootstrap collapse and show classes so that the user can manually close each accordion. Initially, the entire accordion will remain open. I anticipate that all of the accordions will be turned on and off manually by the user. If I close or turn off any of the accordions manually, I don’t want any other accordions to have any interaction (on/off). So if I turn off or open one accordion, the others should remain the same.

My code –

@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap’);

   .new-listing-head h1 {
       color: #000;
       font-family: Inter;
       font-size: 40px;
       font-style: normal;
       font-weight: 600;
       line-height: normal;
   }
   .listing-head-dropdown .dropdown-one .btn {
       padding: var(--25, 10px) var(--6, 24px);
       border-radius: var(--rounded-full, 1000px);
       border: 1px solid var(--primary-700, #1A56DB);
       background-color: transparent;
       color: #1A56DB;
       font-family: Inter;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
       line-height: 150%;
   }
   .listing-head-dropdown .dropdown-one:nth-child(2) {
       margin-left: 16px;
   }
   .dropdown-one .dropdown-toggle::after {
       display: none;
   }
   .listing-head-dropdown .btn {
       padding: var(--25, 10px) var(--6, 24px);
       border-radius: var(--rounded-full, 1000px);
       background: var(--primary-600, #1C64F2);
       font-family: Inter;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
       line-height: 150%;
   }
   .listing-head-dropdown .btn:nth-child(3) {
       margin-left: 16px;
   }
   .new-listing-head {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .listing-head-dropdown {
       display: flex;
       align-items: center;
   }
   .listing-accordion {
       margin-top: 32px;
   }
   
   .listing-accordion .accordion-button:not(.collapsed)::before {
      transform: var(--bs-accordion-btn-icon-transform);
   }
   .accordion-button:not(.collapsed) {
       background-color: transparent;
       border: none;
       box-shadow: none;
   }
   .accordion-button:focus {
       box-shadow: none;
   }

   .listing-accordion .accordion-item {
       border: 0;
   }
   .listing-accordion .accordion-item .accordion-header {
       display: inline-block;
   }
   .listing-accordion .accordion-item .accordion-header .accordion-button {
       align-items: center;
       cursor: pointer;
       padding: 0;
   }
   .listing-accordion .accordion-item .accordion-header .accordion-button .listing-accord-head span:first-child {
       color: #000;
       font-family: Inter;
       font-size: 24px;
       font-style: normal;
       font-weight: 600;
       line-height: normal;
       display: block;
   }
   .listing-accordion .accordion-item .accordion-header .accordion-button .listing-accord-head span:last-child {
       color: #6B7280;
       font-family: Inter;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
       line-height: normal;
   }
   .listing-accordion .accordion-item .accordion-body {
       border-radius: var(--rounded-2xl, 16px);
       border: 1px solid var(--gray-200, #E5E7EB);
       background: var(--white, #FFF);
       margin-top: 16px;
   }
   .listing-search .form-control {
       border-radius: var(--rounded-lg, 8px);
       border: 1px solid var(--gray-300, #D1D5DB);
       background: var(--gray-50, #F9FAFB);
       border-left: 0;
       padding-left: 0;
   }
   .listing-search .form-control::placeholder {
       color: var(--gray-500, var(--gray-500, #6B7280));
   }
   .listing-search {
       display: flex;
       align-items: center;
   }
   .listing-search .btn {
       border-radius: var(--rounded-lg, 8px);
       border: 1px solid var(--primary-600, #1C64F2);
       background: var(--primary-700, #1A56DB);
       color: #fff;
       white-space: nowrap;
       margin-left: 12px;
   }
   .listing-search .form-control:focus {
       box-shadow: none;
       border-color: #D1D5DB;
   }
   .listing-search .input-group-text {
       background: var(--gray-50, #F9FAFB);
       border: 1px solid var(--gray-300, #D1D5DB);
       border-radius: var(--rounded-lg, 8px);
       border-right: 0;
       border-top-right-radius: 0;
       padding-top: 10px;
       padding-bottom: 10px;
       border-bottom-right-radius: 0;
       padding-left: 14px;
   }
   .title-listing label {
       font-family: Inter;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
       line-height: 150%;
       color: var(--gray-900, var(--gray-900, #111928));
       margin-top: 18px;
   }
   .title-listing .form-control {
       border-radius: 8px;
       border: 1px solid var(--gray-300, #D1D5DB);
       background: var(--gray-50, #F9FAFB);
       padding: var(--3, 10px) var(--4, 16px);
       margin-top: 6px;
   }
   .title-listing .form-control:focus {
       box-shadow: none;
   }
   .description-listing {
       border-radius: 8px;
       margin-top: 20px;
   }
   .description-listing-btntwo .form-control {
       border: 0;
       width: 100%;
   }
   .description-listing-btntwo .form-control:focus  {
       box-shadow: 0 !important;
   }

   .nicEdit-panelContain {
       padding: var(--3, 7px) var(--4, 16px);
       padding-bottom: 10px;
       border-radius: 8px 8px 0px 0px;
       background: var(--gray-50, #F9FAFB);
   }
   .description-listing .form-control {
       border-bottom-left-radius: 10px !important;
       border-bottom-right-radius: 10px !important;
   }

   /* select and label */
   .listingdrop-select label {
       color: var(--gray-900, var(--gray-900, #111928));
       font-family: Inter;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
       line-height: 150%;
       margin-top: 16px;
       margin-bottom: 8px;
   }
   .listingdrop-select select {
       max-width: 348px;
       width: 100%;
       padding: var(--3, 12px);
       background-color: var(--gray-50, #F9FAFB);
       color: var(--gray-500, var(--gray-500, #6B7280));
       font-family: Inter;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
       line-height: 125%;
   }
   .listingdrop-select select:focus {
      box-shadow: none;
      border-color: #D1D5DB;
   }
   .listingdrop-description-select {
       display: flex;
       align-items: center;
   }
   .listingdrop-description-select .btn {
       padding: var(--3, 6px) var(--6, 24px);
       padding-bottom: 10px;
       border-radius: var(--rounded-lg, 8px);
       border: 1px solid var(--primary-700, #1A56DB);
       margin-left: 16px;
   }
   .nicEditors {
       width: 100%;
   }

</style>

<div class="listing-accordion">

    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <div class="accordion-header">
              <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <div style="display: block; margin-left: 16px;" class="listing-accord-head">
                    <span>General Settings</span>
                    <span>analysis of order trends in one year</span>
                </div>
                
              </div>
            </div>
            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <!-- Listing Search -->
                <div class="listing-search">
                    <div class="input-group acounts-adress-input">
                        <div class="input-group-prepend">
                          <span class="input-group-text adress-input-icon">
                            hi
                          </span> 
                        </div>
                        <input type="search" class="form-control" placeholder="Tell us about your product. Enter a keyword, UPC, or ISBN to search">
                    </div>
                    <button class="btn"> Search</button>
                </div>

                <!-- Title Listing -->
                <div class="title-listing">
                    <label for="title">Tittle</label>
                    <input type="text" class="form-control" placeholder="Bonnie">
                </div>

                <!-- Description Listing -->
                <div class="description-listing">
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
                </div>

                <!-- Description Select -->
                <div class="listingdrop-select">
                    <label for="foldersave">Save to folder</label>
                    <div class="listingdrop-description-select">
                        <select class="form-select" aria-label="Default select example">
                            <option selected>Save to Folder</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                        <button class="btn"><i class="fab fa-hippo"></i>
                        </button>
                    </div>
                </div>


                
              </div>
            </div>
        </div>

        <!-- Images -->
        <div class="accordion-item images-analysis">
            <div class="accordion-header">
              <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">
                <div style="display: block; margin-left: 16px;" class="listing-accord-head">
                    <span>Images</span>
                    <span>analysis of order trends in one year</span>
                </div>
              </div>
            </div>
            <div id="collapsetwo" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <div class="image-accordion-main">
                    <div class="images-analysis-content">
                        <img src="./image/image-a-one.png" alt="Listing Images">
                        <div class="images-analysis-btn">
                            <button class="btn">
                               hi
                            </button>
                            <button class="btn">
                                hi
                            </button>
                        </div>

                     </div>
                     <div class="images-analysis-content">
                        <img src="./image/image-a-teo.png" alt="Listing Images">
                        <div class="images-analysis-btn">
                            <button class="btn">
                               hi
                            </button>
                            <button class="btn">
                               hi
                            </button>
                        </div>
                     </div>
                     <div class="images-analysis-content">
                        <img src="./image/image-a-three.png" alt="Listing Images">
                        <div class="images-analysis-btn">
                            <button class="btn">
                                hi
                            </button>
                            <button class="btn">
                               hi
                            </button>
                        </div>

                     </div>
                     <div class="images-analysis-content">
                        <img src="./image/image-a-four.png" alt="Listing Images">
                        <div class="images-analysis-btn">
                            <button class="btn">
                                hi
                            </button>
                            <button class="btn">
                                hi
                            </button>
                        </div>

                     </div>
                     <div class="images-analysis-content">
                        <img src="./image/image-a-five.png" alt="Listing Images">
                        <div class="images-analysis-btn">
                            <button class="btn">
                               hi
                            </button>
                            <button class="btn">
                               hi
                            </button>
                        </div>

                     </div>
                     
                     <!-- Add New Image -->
                     <div class="newimage-analysis">
                        <img src="./image/addnew-image.png" alt="">
                        <div class="newimage-analysis-content">
                            <h5>Add New Image</h5>
                            <span>Max. File Size: 15 MB
                                (jpg, png, heic)</span>
                        </div>
                     </div>
                </div>
                 
                
              </div>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="//js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
<script>
    // Disable the toggling behavior of Bootstrap accordion
    document.querySelectorAll('.accordion-button').forEach(button => {
        button.addEventListener('click', function (e) {
            e.stopPropagation();
        });
    });
</script>

So, Currently if i drag an image from my website or any other website which contains images and drag and drop it to a word or an excel, it would paste the image as it is or paste the link on the application on drop.

But what i actually want is that when i do a drop of the image on word/excle file, i want to basically run a function ondrop/ondragleave that would store some data in my clipboard and finally paste it on the word/excel file.

Below code is my current implementation, which helps me know that i have dropped the element outside the browser, but i want to paste data of my clipboard instead of the image which i have actually dragged and dropped onto the word file.

  element.addEventListener("dragend", (e) => {
    e.preventDefault();
    console.log("Ended " + (outside ? "Outside" : "Inside"));
  });

  element.addEventListener("dragstart", (e) => {
    outside = false;
  });

  window.addEventListener("dragleave", (e) => {
    window.setTimeout(() => {
      if (
        (e.target === document.documentElement || e.target === document.body) &&
        e.relatedTarget == null &&
        e.buttons != 0
      ) {
        outside = true;
      }
    });
  });

  window.addEventListener("dragenter", (e) => {
    if (
      (e.target === document.documentElement || e.target === document.body) &&
      e.relatedTarget == null
    ) {
      outside = false;
    }
  });

Im trying to add google signin button to my website but for some reason im getting error and i do not understand how to fix i looked at the link that is coming with the error message but still no able to fix it also i look another topics around but nothing that can help to fix my problem

Error

code: 401, message: "Request had invalid authentication credentials. Expected OAuth 2 access 
token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.", 
status: "UNAUTHENTICATED" 

My Code:

            const apiKey = 'AIzaSyCb_LB2iFKvZGM5v31gLWPDs9G';
            const discoveryDocs = ["https://people.googleapis.com/$discovery/rest?version=v1"];
            const clientId = '259780-hj7t3cvl5q9nu7oblivmqqpih9qlqqor.apps.googleusercontent.com';
            const scopes = 'profile';
            const authorizeButton = document.getElementById('btn-google');

            if(authorizeButton){
                authorizeButton.addEventListener('click', () => {
                    gapi.load('client:auth2', initClient);
                })
            }

            function initClient() {
                gapi.client.init({apiKey: apiKey, discoveryDocs: discoveryDocs, clientId: clientId, scope: scopes, plugin_name: "chat"}).then(function () {
                    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
                    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
                    authorizeButton.onclick = handleAuthClick;
                });
            }

            function updateSigninStatus(isSignedIn) {
                if (isSignedIn) {
                    makeApiCall();
                }
            }

            function handleAuthClick(event) {
                gapi.auth2.getAuthInstance().signIn();
            }

            function makeApiCall() {
            gapi.client.people.people.get({'resourceName': 'people/me', 'personFields': 'names,emailAddresses'}).then(function (resp) {

                try{
                    const formData = new FormData();
                    formData.append('email', resp.result.emailAddresses[0].value);
                    formData.append('firstname', resp.result.names[0].givenName);
                    formData.append('lastname', resp.result.names[0].familyName);
                    formData.append('password', '');

                    fetch('index.php?route=extension/module/google_login/login', {
                        method: 'POST',
                        body: formData,
                    })
                    .then(response => response.json())
                    .then(json => {
                        if(json.success == true){
                            updateHeader();
                        }
                    })
                }
            });
            }