Got cors error on chrome in localhost env

Senbonzakura1234 commented 1 year ago

I follow the instruction in Theo's promotion video of this project I use google provider thou, did change the auth strategy in SignInWithOAuth.tsx I run the dev script and face cors error

perkinsjr commented 1 year ago

Can you provide the logs produced by Turbo repo?

Senbonzakura1234 commented 1 year ago

Can you provide the logs produced by Turbo repo?

Here is the log i got

pnpm dev

> t3-turbo-and-clerk@ dev E:\vscode\PlayGround\cherry-wifi
> turbo dev --parallel

 WARNING  failed to contact turbod. Continuing in standalone mode: connection to turbo daemon process failed. Please ensure the fol
lowing:
        - the process identified by the pid in the file at C:\Users\SENBON~1\AppData\Local\Temp\turbod\a7a64960d106ccf1\turbod.pid
is not running, and remove C:\Users\SENBON~1\AppData\Local\Temp\turbod\a7a64960d106ccf1\turbod.pid
        - check the logs at C:\Users\senbonzakura\AppData\Local\turborepo\logs\a7a64960d106ccf1-cherry-wifi.log
        - the unix domain socket at C:\Users\SENBON~1\AppData\Local\Temp\turbod\a7a64960d106ccf1\turbod.sock has been removed
        You can also run without the daemon process by passing --no-daemon
• Packages in scope: @acme/api, @acme/db, @acme/expo, @acme/nextjs, @acme/tailwind-config
• Running dev in 5 packages
• Remote caching disabled
@acme/expo:dev: cache bypass, force executing bbfc1235da8de129
@acme/nextjs:dev: cache bypass, force executing 154f4fdf93b3fde1
@acme/db:dev: cache bypass, force executing 1319ad7a6e519d45
@acme/nextjs:dev: 
@acme/nextjs:dev: > @acme/nextjs@0.1.0 dev E:\vscode\PlayGround\cherry-wifi\apps\nextjs
@acme/nextjs:dev: > pnpm with-env next dev
@acme/nextjs:dev: 
@acme/db:dev: 
@acme/db:dev: > @acme/db@0.1.0 dev E:\vscode\PlayGround\cherry-wifi\packages\db
@acme/db:dev: > pnpm with-env prisma studio --port 5556
@acme/db:dev: 
@acme/expo:dev: 
@acme/expo:dev: > @acme/expo@0.1.0 dev E:\vscode\PlayGround\cherry-wifi\apps\expo
@acme/expo:dev: > expo start --ios
@acme/expo:dev: 
@acme/nextjs:dev: 
@acme/nextjs:dev: > @acme/nextjs@0.1.0 with-env E:\vscode\PlayGround\cherry-wifi\apps\nextjs
@acme/nextjs:dev: > dotenv -e ../../.env -- "next" "dev"
@acme/nextjs:dev: 
@acme/db:dev: 
@acme/db:dev: > @acme/db@0.1.0 with-env E:\vscode\PlayGround\cherry-wifi\packages\db
@acme/db:dev: > dotenv -e ../../.env -- "prisma" "studio" "--port" "5556"
@acme/db:dev: 
@acme/nextjs:dev: ready - started server on 0.0.0.0:3000, url: http://localhost:3000
@acme/nextjs:dev: warn  - You have enabled experimental feature (transpilePackages) in next.config.mjs.
@acme/nextjs:dev: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior.
 Use at your own risk.
@acme/nextjs:dev: 
@acme/db:dev: Prisma schema loaded from prisma\schema.prisma
@acme/db:dev: Prisma Studio is up on http://localhost:5556
@acme/expo:dev: Starting project at E:\vscode\PlayGround\cherry-wifi\apps\expo
@acme/expo:dev: Some dependencies are incompatible with the installed expo version:
@acme/expo:dev:   @shopify/flash-list@1.4.0 - expected version: 1.3.1
@acme/expo:dev:   expo-auth-session@3.7.3 - expected version: ~3.8.0
@acme/expo:dev: Your project may not work correctly until you install the correct versions of the packages.
@acme/expo:dev: Install individual packages by running npx expo install @shopify/flash-list@1.3.1 expo-auth-session@~3.8.0
@acme/nextjs:dev: event - compiled client and server successfully in 7.5s (302 modules)
@acme/nextjs:dev: wait  - compiling...
@acme/nextjs:dev: event - compiled successfully in 63 ms (259 modules)
@acme/nextjs:dev: wait  - compiling /src/middleware (client and server)...
@acme/nextjs:dev: event - compiled successfully in 592 ms (89 modules)

perkinsjr commented 1 year ago

I cannot recreate this.

Can you try deleting the template, cloning fresh and running

pnpm i pnpm run dev

I will also attempt this on a windows machine to see if i see anything wrong.

This error should never occur and isn't related to this template.

if that doesn't work Can you email me the Pub key / secret key you are using?

james@clerk.dev or join the discord and ping me

Senbonzakura1234 commented 1 year ago

I cannot recreate this.

Can you try deleting the template, cloning fresh and running

pnpm i pnpm run dev

I will also attempt this on a windows machine to see if i see anything wrong.

This error should never occur and isn't related to this template.

if that doesn't work Can you email me the Pub key / secret key you are using?

james@clerk.dev or join the discord and ping me

I had sent the info you need via your email james@clerk.dev, please check

perkinsjr commented 1 year ago

Can you:

delete the folder found here AppData\Local\Temp\turbod
Delete the project
clone the project
add your .env keys
Attempt pnpm i
Attempt pnpm run dev

Senbonzakura1234 commented 1 year ago

Can you:

delete the folder found here AppData\Local\Temp\turbod

Delete the project

clone the project

add your .env keys

Attempt pnpm i

Attempt pnpm run dev

didn't solve it, still get the same error. Try delete the app on clerk dashboard, and create new one, get new key but it's still futile

Also, how did you get your repo pass github CI lint action? I clone exactly from yours and it still not success my GH CI Job Link

perkinsjr commented 1 year ago

Hi there!

Can you verify if you have "Enabled URL-based session syncing" enabled.

To answer your question about CI:

You need to add the clerk pub and clerk secret as secrets in your github action

Senbonzakura1234 commented 1 year ago

Hi there!

Can you verify if you have "Enabled URL-based session syncing" enabled.

To answer your question about CI:

You need to add the clerk pub and clerk secret as secrets in your github action

Yes i did, it's on by default

Senbonzakura1234 commented 1 year ago

Hi there! Can you verify if you have "Enabled URL-based session syncing" enabled. To answer your question about CI: You need to add the clerk pub and clerk secret as secrets in your github action

Yes i did, it's on by default

16750815646675332499868945157237

Senbonzakura1234 commented 1 year ago

Hi there!

Can you verify if you have "Enabled URL-based session syncing" enabled.

To answer your question about CI:

You need to add the clerk pub and clerk secret as secrets in your github action

Also i did tried turn if off and it still didnt work, so i dont think it was the cause

perkinsjr commented 1 year ago

It is specific to your Clerk instance and not the code itself. So trying to track down why it is happening.

Can you create a brand new app in the dashboard and try again? make sure you enable Discord :)

Senbonzakura1234 commented 1 year ago

It is specific to your Clerk instance and not the code itself. So trying to track down why it is happening.

Can you create a brand new app in the dashboard and try again? make sure you enable Discord :)

I did, and it still happenning

perkinsjr commented 1 year ago

Can you provide the new Publishable key?

perkinsjr commented 1 year ago

To confirm, you are updating the .env in the project with the new Publishable key and Secret key from our dashboard? Seems the one you have been using is from a deleted instance.

Senbonzakura1234 commented 1 year ago

To confirm, you are updating the .env in the project with the new Publishable key and Secret key from our dashboard? Seems the one you have been using is from a deleted instance.

I did use the new secret, i'm not that dumb. I also create a fresh new t3 project, without any auth config, just prisma and try implementing clerk using the guide for nextjs in your docs, and it face the same error.

perkinsjr commented 1 year ago

To confirm, you are updating the .env in the project with the new Publishable key and Secret key from our dashboard? Seems the one you have been using is from a deleted instance.

I did use the new secret, i'm not that dumb. I also create a fresh new t3 project, without any auth config, just prisma and try implementing clerk using the guide for nextjs in your docs, and it face the same error.

Can you provide the new publishable key per my request?

perkinsjr commented 1 year ago

I confirmed that the new keys you sent me to work as expected, unlike the original set, which throws the error because the instance doesn't exist anymore.

can you send me the latest error in t3-turbo an image is fine.

Senbonzakura1234 commented 1 year ago

I confirmed that the new keys you sent me to work as expected, unlike the original set, which throws the error because the instance doesn't exist anymore.

can you send me the latest error in t3-turbo an image is fine.

Here is the error of my new freshly recreated app

Access to fetch at 'https://dear-moccasin-3.clerk.accounts.dev/v1/dev_browser?_clerk_js_version=4.24.0' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

POST https://dear-moccasin-3.clerk.accounts.dev/v1/dev_browser?_clerk_js_version=4.24.0 net::ERR_FAILED 200

Clerk:  TypeError: Failed to fetch
    at clerk.browser.js:2:350620
    at Object.setup (clerk.browser.js:2:350739)
    at Zs.<anonymous> (clerk.browser.js:2:369046)
    at Zs.load (clerk.browser.js:2:356884)
    at window.startClerk ((index):30:33)
window.startClerk @ (index):39
load (async)
(anonymous) @ (index):48
(anonymous) @ (index):50

The log didn't say anything other than yelling me didn't install xcode, but i'm trying in nextjs for now so it's irrelevant

pnpm dev

> t3-turbo-and-clerk@ dev E:\vscode\PlayGround\cherry-wifi
> turbo dev --parallel

• Packages in scope: @acme/api, @acme/db, @acme/expo, @acme/nextjs, @acme/tailwind-config
• Running dev in 5 packages
• Remote caching disabled
@acme/nextjs:dev: cache bypass, force executing f9bf6d14db92a8c8
@acme/db:dev: cache bypass, force executing e5af5e8821955279
@acme/expo:dev: cache bypass, force executing 728128119e0f5ac8
@acme/db:dev: 
@acme/db:dev: > @acme/db@0.1.0 dev E:\vscode\PlayGround\cherry-wifi\packages\db
@acme/db:dev: > pnpm with-env prisma studio --port 5556
@acme/db:dev: 
@acme/nextjs:dev: 
@acme/nextjs:dev: > @acme/nextjs@0.1.0 dev E:\vscode\PlayGround\cherry-wifi\apps\nextjs
@acme/nextjs:dev: > pnpm with-env next dev
@acme/nextjs:dev: 
@acme/expo:dev: 
@acme/expo:dev: > @acme/expo@0.1.0 dev E:\vscode\PlayGround\cherry-wifi\apps\expo
@acme/expo:dev: > expo start --ios
@acme/expo:dev: 
@acme/db:dev: 
@acme/db:dev: > @acme/db@0.1.0 with-env E:\vscode\PlayGround\cherry-wifi\packages\db
@acme/db:dev: > dotenv -e ../../.env -- "prisma" "studio" "--port" "5556"
@acme/db:dev: 
@acme/nextjs:dev: 
@acme/nextjs:dev: > @acme/nextjs@0.1.0 with-env E:\vscode\PlayGround\cherry-wifi\apps\nextjs
@acme/nextjs:dev: > dotenv -e ../../.env -- "next" "dev"
@acme/nextjs:dev: 
@acme/db:dev: Prisma schema loaded from prisma\schema.prisma
@acme/db:dev: Prisma Studio is up on http://localhost:5556
@acme/nextjs:dev: ready - started server on 0.0.0.0:3000, url: http://localhost:3000
@acme/nextjs:dev: warn  - You have enabled experimental feature (transpilePackages) in next.config.mjs.
@acme/nextjs:dev: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior.
 Use at your own risk.
@acme/nextjs:dev: 
@acme/expo:dev: Starting project at E:\vscode\PlayGround\cherry-wifi\apps\expo
@acme/expo:dev: Some dependencies are incompatible with the installed expo version:
@acme/expo:dev:   @shopify/flash-list@1.4.0 - expected version: 1.3.1
@acme/expo:dev:   expo-auth-session@3.7.3 - expected version: ~3.8.0
@acme/expo:dev:   react@18.2.0 - expected version: 18.1.0
@acme/expo:dev:   react-dom@18.2.0 - expected version: 18.1.0
@acme/expo:dev: Your project may not work correctly until you install the correct versions of the packages.
@acme/expo:dev: Install individual packages by running npx expo install @shopify/flash-list@1.3.1 expo-auth-session@~3.8.0 react@18
.1.0 react-dom@18.1.0
@acme/nextjs:dev: event - compiled client and server successfully in 10.3s (302 modules)
@acme/nextjs:dev: wait  - compiling...
@acme/nextjs:dev: event - compiled successfully in 127 ms (259 modules)
@acme/expo:dev: Starting Metro Bundler
@acme/expo:dev: CommandError: Input is required, but 'npx expo' is in non-interactive mode.
@acme/expo:dev: Required input:
@acme/expo:dev: > Xcode needs to be installed (don't worry, you won't have to use it), would you like to continue to the App Store?
@acme/expo:dev:  ELIFECYCLE  Command failed with exit code 1.
@acme/expo:dev: ERROR: command finished with error: command (E:\vscode\PlayGround\cherry-wifi\apps\expo) pnpm run dev exited (1)
@acme/nextjs:dev: wait  - compiling /src/middleware (client and server)...
@acme/nextjs:dev: event - compiled successfully in 554 ms (89 modules)

perkinsjr commented 1 year ago

Sorry the delay, I was out of the office.

Can you disable all chrome extensions and try again?

We cannot recreate this behavior with Clerk and wondering if a Chrome extension is blocking the javascript needed.

Senbonzakura1234 commented 1 year ago

Sorry the delay, I was out of the office.

Can you disable all chrome extensions and try again?

We cannot recreate this behavior with Clerk and wondering if a Chrome extension is blocking the javascript needed.

Wow, it works, the problem seems caused by this chrome extension HTTPS Everywhere, turn if off and your app works as intended. The extension seem blocking localhost since it doesn't have https protocol, at bit weird cuz it only happened when i use clerk

perkinsjr commented 1 year ago

Well glad I got you up and running.

You shouldn't need HTTPS everywhere, Chrome forces it by default.

I am going to close this ticket.