[Bug]: login button is not working cause of javascript

[amogh007]

What happened?

when i run application application runs properly login page will open but login button is not working

Relevant log output

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword

Twitter / LinkedIn details

No response

[dosubot]

Hey there, @amogh007! 👋 I'm Dosu, a bot here to lend a hand with bugs, answer your questions, or help you dive into contributing while you're waiting for a human maintainer to swing by. Think of me as your friendly neighborhood assistant in the digital realm! I've caught sight of your issue about the login button not working due to a JavaScript hiccup, and I'm rolling up my virtual sleeves to dig into it. I'll be back with a more detailed response in a jiffy!

[amogh007]

ok

[amogh007]

this is the i error i am getting in console "Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword" i changed it to use inline script in next.conf.js but still error exists

[dosubot]

The error you're encountering is due to the Content Security Policy (CSP) blocking the execution of an inline script because of the directive default-src 'self'. To address this issue in your next.config.js, you might have tried to allow inline scripts, but if the problem persists, consider the following steps:

1. Ensure Correct CSP Configuration: Double-check that the CSP header is correctly configured to include 'unsafe-inline' in the script-src directive. This should be done in your next.config.js file.

2. Inspect Response Headers: Use your browser's developer tools to inspect the response headers and verify that the CSP header is being sent correctly with each request.

3. Check for Conflicting Policies: Look for any other meta tags, headers, or configurations that might be setting a conflicting CSP.

4. Use Hashes or Nonces: As a more secure alternative, consider specifying the hash or nonce of the inline script in the script-src directive. This involves generating a hash or nonce for each inline script and including it in both your CSP and your inline script tags.

For example, to allow a specific inline script using a hash:

"script-src": [
  "'sha256-Base64EncodedHashOfTheScript'",
  // other sources...
],

Or, using a nonce:

"script-src": [
  "'nonce-RandomValue'",
  // other sources...
],

This approach requires dynamically generating the hash or nonce for each request.

These steps are aimed at troubleshooting and potentially resolving the CSP issue related to inline scripts in your Next.js application. If you're still facing issues, providing the exact JavaScript code for the login button and any specific error messages from the console when the issue occurs could help pinpoint the problem more accurately.

Details

Sources

• frontend/next.config.js
• frontend/app/(auth)/login/page.tsx
• frontend/app/(auth)/login/components/GoogleLogin/index.tsx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.