what config to make google auth works ?

[frederic117]

Hello,

I need assistance with enabling Google Sign-In. When I activate Nuxt Security, the Google authentication modal appears blank, but it works fine when Nuxt Security is not activated. Could you help me configure this correctly?

Thank you very much in advance.

[vejja]

Sounds like it could be a COEP/COOP restriction.
Can you give us more details :

• version of Nuxt Security
• how you load Google Auth
• screenshot of your console logs in browser dev tools

[Baroshem]

I would guess the same headers but having more reproduction details would allow us to be more sure about the answers :)

[frederic117]

hello thanks for your response :)
"nuxt-security": "1.0.0-rc.5",
I load google script in app.vue like that :
useHead({
script: [
{
src: 'https://accounts.google.com/gsi/client',
defer: true,
async: true,
},
],
noscript: [
{
innerHTML: 'This website requires JavaScript.',
},
],
})
and then in my component : onMounted(() => {
if (!document.getElementById('googleButton')) {
console.error('Élément Google Button introuvable dans le DOM')
return
}
google.accounts.id.initialize({
client_id:
'xxxxxxxxxxxxxxx',
callback: handleCredentialResponse,
context: 'signin',
})
google.accounts.id.renderButton(document.getElementById('googleButton'), {
type: 'standard',
text: 'continue_with',
logo_alignment: 'center',
size: 'large',
width: '400',
theme: 'filled_blue',
})
google.accounts.id.prompt()
})

[Baroshem]

@frederic117

Do you have any nuxt security configuration in nuxt.config.ts file? Also what rednering does your application use? Ssr or SSG?

The error in the console seems unrelated to headers, more like that some scripts are not being being rendered correctly.

@vejja

Do you think it could be related to either nonce or SRI?

[frederic117]

No configuration in nuxt config for nuxt-security. If i remove nuxt-security from modules in nuxt-config.js it works perfectly. I use ssr but this part is wrapped in ClientOnly

[vejja]

No configuration in nuxt config for nuxt-security. If i remove nuxt-security from modules in nuxt-config.js it works perfectly. I use ssr but this part is wrapped in ClientOnly

With rc.5, can you try

defineNuxtConfig({
  security: {
    headers: {
      crossOriginEmbedderPolicy: false,
      crossOriginOpenerPolicy: false
    }
  }
})

Edit: Can you also try to access the logs of the Google modal ?

[vejja]

@frederic117

Do you have any nuxt security configuration in nuxt.config.ts file? Also what rednering does your application use? Ssr or SSG?

The error in the console seems unrelated to headers, more like that some scripts are not being being rendered correctly.

@vejja

Do you think it could be related to either nonce or SRI?

I don't think so, but we don't have much information at this stage

[frederic117]

with headers: {
crossOriginEmbedderPolicy: false,
crossOriginOpenerPolicy: false
}
the modal is now working
Bravo

[vejja]

Nice !
@frederic117: This solution completely disables COEP/COOP on your site, so maybe this is not what you want.

I am surprised to hear that Google Sign-In forces you to disable cross-isolation.

As an alternative, would you be Ok to make an additional test:

defineNuxtConfig({
  security: {
    headers: {
      // crossOriginEmbedderPolicy: false,
      crossOriginOpenerPolicy: 'same-origin-allow-popups'
    }
  }
})

I think it would be safer

[frederic117]

yes it works :) thanks a lot

[vejja]

@frederic117

Please note that I am not a COOP/COEP expert.
I would recommend that you carefully audit your security requirements in terms of cross-origin isolation to ensure that this setup meets your goals.

Thank you very much for carrying out these tests, this is extremely helpful for us and for other users.
@Baroshem maybe we can add a section on Google Sign-In in the FAQ ?

[Baroshem]

That is a briliant idea!

Let's create a PR for 1.0.0 with the example and a link to this issue :)

@vejja

Would you like to do it or should I create a PR? I have some time so I can do it :)

[vejja]

That is a briliant idea!

Let's create a PR for 1.0.0 with the example and a link to this issue :)

@vejja

Would you like to do it or should I create a PR? I have some time so I can do it :)

@Baroshem if you have some time that would be wonderful as I am currently fighting with the tests on #326 !

[vejja]

That is a briliant idea!
Let's create a PR for 1.0.0 with the example and a link to this issue :)
@vejja
Would you like to do it or should I create a PR? I have some time so I can do it :)

@Baroshem if you have some time that would be wonderful as I am currently fighting with the tests on #326 !

@Baroshem As a side note, I understand that this setup preserves cross-origin isolation so it should be secure from that perspective. It’s just that SharedArrayBuffers are disabled to protect against Spectre.
However as I said I’m not an expert and I struggle to clearly understand the implications of COOP same-origin vs COOP same-origin-allow-popups
Do not hesitate to correct me if I’m wrong !

[Baroshem]

@frederic117

Added in f921347

[Baroshem]

@vejja

I think that you are correct. I just looked at the documentation and we have a FAQ entry about Firebase Auth where I have recommended to disable both COOP and COEP headers instead of setting same-origin-allow-popups.

[vejja]

@vejja

I think that you are correct. I just looked at the documentation and we have a FAQ entry about Firebase Auth where I have recommended to disable both COOP and COEP headers instead of setting same-origin-allow-popups.

Yes, from what I read it is probably safer to keep COEP default require-corp and set COOP to same-origin-allow-popups