Sign in with google (problem with Firefox)

mattiabilla

Hi everybody, I want to let users sign in my application with their google accounts.
I searched on google and I found this example that works fine on all browsers: https://jsfiddle.net/phanan/a4qyysrh/

So I created a new component called gsigninbutton:

<template> 
	 <div ref="signinBtn" class="btn-sign-in">Sign In</div>
</template>

<script>
export default {
  name: 'gsigninbutton',
 
  data(){
	return{
	}
  },
  mounted () {

    window.gapi.load('auth2', () => {

      const auth2 = window.gapi.auth2.init({
        client_id: 'myclientid.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin'
      })
      auth2.attachClickHandler(this.$refs.signinBtn, {}, googleUser => {
        
        this.$emit('done', googleUser)
      }, error => console.log(error))
    })
  },
  methods: {	
  }
}
</script>
<style lang="stylus">
</style>

Instead of myclientid I insert, obviously, the client id that google gave me.
And included this script in the index.html

<script src="https://apis.google.com/js/platform.js" async defer ></script>

It works on Chrome,Opera and Safari but on Firefox doesn’t. (sorry for my bad english)

benoitranque

Does not work? Please be more specific. Do you get an error? What is the error? Are you sure this is a quasar issue and not a javascript/vue issue?

mattiabilla

I’m quite sure that is a quasar issue because the example works on firefox. On firefox when I click the button it doesn’t show me anything, In the console there are no errors except three warnings that appear also in the example.

Content Security Policy: Ignoring “‘unsafe-inline’” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified

So I don’t think that the problem is related to these messages.
Maybe there is a problem with the attachClickHandler but in the example it works.

benoitranque

Your example code does not include anything Quasar, and is mostly raw JavaScript inside a Vue mounted function. There is no reason Quasar would interfere with any of that.
Furthermore, the error you get suggests Firefox is blocking part of the script from running, due to Firefox security policies. Maybe this can help during development

mattiabilla

I’ve just tried what you said but it still doesn’t work.
I still don’t understand why the example works on firefox and my code, that it is almost the same, doesn’t. I have the same warning messages of the example but it doesn’t works.

benoitranque

I’ve just noticed that the example you posted requires the following file, not the one you mentioned. Also, putting async/deffer may be a bad idea

https://apis.google.com/js/api:client.js

mattiabilla

You are right, in fact I tried all the files mentioned by Google. I’ve been trying for 4 days with all possible combinations.

Zrama

I have the same issue too. It works with Vuejs, not with Quasar.

jpg

I used this and it worked without issues on a PWA.

https://github.com/phanan/vue-google-signin-button

Yes, you would need to add the api:client.js inside the index-template file just before end of the body tag and use async defer in order for it to work.

Now, if only it could work like that on an Android/iOS build then it is perfect but unfortunately the login window event is not firing at all.

No More Posting New Topics!

Sign in with google (problem with Firefox)