Not able to use ts-react-google-login-component node package in plugin for authentication in 7.8 OSS version

Right now, I am using elastic/kibana 7.8 OSS version code
I am trying to implement authentication using Google auth by developing a plugin.
For that I have installed the 'react-google-login' package using yarn and imported in component in plugin public folder.
On running the Kibana, it is throwing content-server-policy violations in the console
Can anybody help me to solve this issue or provide code for google OAuth

Here is the code:

         import { GoogleLoginButton } from 'ts-react-google-login-component';
          
        <GoogleLoginButton
           responseHandler={this.responseGoogle}
           clientConfig={clientConfig}
           preLogin={this.preLoginTracking}
           failureHandler={this.errorHandler}
         />

throws following error:

Refused to load the script 'https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.myOGgYJo9ys.O/m=auth2/rt=j/sv=1/d=1/ed=1/am=wQE/rs=AGLTcCMR2Cg_3Iqxcgmos-E9G6cjWQG_Kw/cb=gapi.loaded_0' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval' 'self' https://apis.google.com/js/platform.js".

on changing csp.rules to the below following way also didnt work

csp.rules:
  - "script-src 'unsafe-inline' 'unsafe-eval' 'self' https://apis.google.com/js/platform.js"

I believe you need to use apis.google.com in your CSP policy, not a fully qualified URL to the platform.js file which isn't what it's attempting to load.

csp.rules:
  - "script-src 'unsafe-inline' 'unsafe-eval' 'self' apis.google.com"
2 Likes