CORS error for login when google OAuth is enabled

kapa.ai•3mo ago

Hi @Wix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue might be related to the CORS configuration in your Wasp application. CORS (Cross-Origin Resource Sharing) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. In Wasp, you can customize the CORS settings for your APIs by defining custom middleware in your Wasp file. Here is an example of how you can do it:

// main.wasp
apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}  

// src/apis.js
export const apiMiddleware = (config) => {  
 return config;  
};

// main.wasp
apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}  

// src/apis.js
export const apiMiddleware = (config) => {  
 return config;  
};

In this example, the default middleware is returned, which enables CORS for all APIs under the /foo path. You can customize this to suit your needs. For more information, you can refer to the Wasp documentation on CORS (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works). If you want to modify the middleware for all operations and APIs, you can do something like this:

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}
// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}
// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

In this example, extra domains are added to CORS. You can customize this to suit your needs. For more information, you can refer to the Wasp documentation on Configuring Middleware (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware). If you are still facing issues, it might be helpful to check your Google OAuth configuration. There was a similar issue discussed in a Discord support thread (https://discord.com/channels/686873244791210014/1222916615151161374) where the user was able to resolve the issue by updating their Google userSignupFields and configFn in the main.wasp file. If none of these solutions work, it might be helpful to share more details about your setup or consider opening an issue in the Wasp Github repository (https://github.com/wasp-lang/wasp/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

WixOP•3mo ago

this doesnt work for me @kapa.ai its also weird that the login button on navbar has dissapeared

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The disappearance of the login button on the navbar could be due to a variety of reasons. Here are a few things you could check: 1. Check your Wasp version: Make sure you're using a compatible version of Wasp. In one of the Discord support threads (https://discord.com/channels/686873244791210014/1217941277979574315), a user reported a similar issue while using Wasp v. 0.12.2. 2. Check your code: Ensure that the login page declaration in your Wasp file and the file itself are correctly set up. The login button might not show up if there are errors in these files. 3. Check the isUserLoading state: In the same Discord thread (https://discord.com/channels/686873244791210014/1217941277979574315), it was suggested that the login won't show if isUserLoading is truthy. This means that on your deployment, isUserLoading might be truthy at that moment. 4. Check your deployment: Sometimes, issues might arise during the deployment process. The same user in the Discord thread (https://discord.com/channels/686873244791210014/1217941277979574315) reported that the issue was resolved after redeploying the app. If none of these suggestions work, it might be helpful to share more details about your setup or consider opening an issue in the Wasp Github repository (https://github.com/wasp-lang/wasp/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

WixOP•3mo ago

@kapa.ai none of those work and When i go to /login it just gives me cors errors whenever i try to do anythinh

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still experiencing issues. CORS errors can be tricky to debug. Here are a few more suggestions: 1. Check your CORS configuration: Make sure that your CORS configuration allows requests from the domain where your client is hosted. You can do this by setting the origin option in the cors middleware to include your client's domain. Here's an example from the Wasp documentation (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware):

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

In this example, replace '<https://example1.com',> '<https://example2.com'> with your client's domain. 2. Check your server's response headers: Make sure that your server includes the Access-Control-Allow-Origin header in its responses. This header tells the browser that it's okay to make requests to your server from a different origin. 3. Check your browser's console for errors: If there's an issue with your CORS configuration, your browser's console should display an error message with more details. This can help you pinpoint the exact issue. 4. Try a different browser or clear your browser's cache: Sometimes, CORS issues can be caused by the browser or by outdated files in the browser's cache. If you're still having trouble, it might be helpful to share more details about your setup or consider opening an issue in the Wasp Github repository (https://github.com/wasp-lang/wasp/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

WixOP•3mo ago

[!] RollupError: src/server.ts (6:7): "default" is not exported by "../../../src/serverSetup.ts", imported by "src/server.ts". this error for this code 1. Customize Global Middleware If you would like to modify the middleware for all operations and APIs, you can do something like: JavaScript TypeScript main.wasp app todoApp { // ... server: { setupFn: import setup from "@src/serverSetup", middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup" }, } src/serverSetup.ts import cors from 'cors' import { config, type MiddlewareConfigFn } from 'wasp/server' export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => { // Example of adding an extra domains to CORS. middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://example1.com', 'https://example2.com'] })) return middlewareConfig }

MEE6•3mo ago

Wohooo @Wix, you just became a Waspeteer level 3!

WixOP•3mo ago

[!] RollupError: src/server.ts (6:7): "default" is not exported by "../../../src/serverSetup.ts", imported by "src/server.ts". this error for this code 1. Customize Global Middleware If you would like to modify the middleware for all operations and APIs, you can do something like: JavaScript TypeScript main.wasp app todoApp { // ... server: { setupFn: import setup from "@src/serverSetup", middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup" }, } src/serverSetup.ts import cors from 'cors' import { config, type MiddlewareConfigFn } from 'wasp/server' export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => { // Example of adding an extra domains to CORS. middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://example1.com', 'https://example2.com'] })) return middlewareConfig } @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing is indicating that the default export is not found in the serverSetup.ts file. This is because in your main.wasp file, you're trying to import a default export named setup from serverSetup.ts:

setupFn: import setup from "@src/serverSetup",

setupFn: import setup from "@src/serverSetup",

However, in your serverSetup.ts file, you're only exporting a named export serverMiddlewareFn, and there's no default export:

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // ...
}

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // ...
}

To fix this issue, you need to either: 1. Add a default export in your serverSetup.ts file:

export default function setup() {
  // Your setup function code here...
}

export default function setup() {
  // Your setup function code here...
}

Or, 2. If the setup function doesn't exist and you don't need it, you can remove the setupFn import from your main.wasp file:

app todoApp {
  // ...

  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },
}

app todoApp {
  // ...

  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },
}

Remember, the setupFn is used to perform setup tasks when the server starts, and it's not required if you don't have any setup tasks. The middlewareConfigFn is used to configure the middleware for your server, and it's separate from the setupFn. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

WixOP•3mo ago

Access to XMLHttpRequest at 'https://lecturelab-server.fly.dev/auth/me' from origin 'https://lecturelab-client.fly.dev' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. I am using wasp 13.2 @kapa.ai please help me it wont let me use auth in production

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're experiencing issues with CORS in production. This can be a tricky issue to debug, but I'll do my best to help you. Firstly, it's important to understand that CORS (Cross-Origin Resource Sharing) is a security feature that restricts HTTP requests from one domain to another. In your case, it seems like your server (https://lecturelab-server.fly.dev) is not allowing requests from your client (https://lecturelab-client.fly.dev). To fix this issue, you need to configure your server to allow requests from your client's domain. In Wasp, you can do this by setting up a custom middleware for your APIs. Here's an example from the Wasp documentation (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works):

// main.wasp
apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}  

// src/apis.js
export const apiMiddleware = (config) => {  
 return config;  
};

// main.wasp
apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}  

// src/apis.js
export const apiMiddleware = (config) => {  
 return config;  
};

In this example, the default middleware is returned, which enables CORS for all APIs under the /foo path. You can customize this to suit your needs. If you want to modify the middleware for all operations and APIs, you can do something like this:

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}  

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://lecturelab-client.fly.dev']> }))  
 return middlewareConfig  
}

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}  

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://lecturelab-client.fly.dev']> }))  
 return middlewareConfig  
}

In this example, replace '<https://lecturelab-client.fly.dev'> with your client's domain. If you're still having trouble, it might be helpful to share more details about your setup or consider opening an issue in the Wasp Github repository (https://github.com/wasp-lang/wasp/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

WixOP•3mo ago

@kapa.ai I have tried that way it doesnt work is there a different way???

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still experiencing issues. CORS errors can be tricky to debug. Here are a few more suggestions: 1. Check your CORS configuration: Make sure that your CORS configuration allows requests from the domain where your client is hosted. You can do this by setting the origin option in the cors middleware to include your client's domain. Here's an example from the Wasp documentation (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware):

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

In this example, replace '<https://example1.com',> '<https://example2.com'> with your client's domain. 2. Check your server's response headers: Make sure that your server includes the Access-Control-Allow-Origin header in its responses. This header tells the browser that it's okay to make requests to your server from a different origin. 3. Check your browser's console for errors: If there's an issue with your CORS configuration, your browser's console should display an error message with more details. This can help you pinpoint the exact issue. 4. Try a different browser or clear your browser's cache: Sometimes, CORS issues can be caused by the browser or by outdated files in the browser's cache. If you're still having trouble, it might be helpful to share more details about your setup or consider opening an issue in the Wasp Github repository (https://github.com/wasp-lang/wasp/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

WixOP•3mo ago

@Wasp Team @Wasp Expert Hey I am still having problems with this

martinsos•3mo ago

@Wix so you started having issues here once you enabled google auth, and it worsk locally but not in production. Sounds like you don't have google auth correctly configured for production. One thing is making sure you configured it correctly on the Google side(enabled urls, ...), and another thing is making sure you have set up env vars for it correctly on the Fly side (for the server especially).

WixOP•3mo ago

this is how it is currently setup

WixOP•3mo ago

@martinsos

WixOP•3mo ago

when i click

WixOP•3mo ago

how would you reccomend i set my env vars for google i did it through the dashboard and like this wasp deploy fly cmd secrets set GOOGLE_CLIENT_ID=xxx GOOGLE_CLIENT_SECRET=xxx --context=server but neither worked

Vinny (@Wasp)•3mo ago

that looks like the correct command. CLI is better because it redeploys the server for you the only redirect urls you'll need are : http://localhost:3001/auth/google/callback https://your-server-url.com/auth/google/callback you can remove Authorized Javascript Origins too did you set this env variable? wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=xxxxx you're most likely missing an env variable on your production server or have one configured incorrectly

WixOP•3mo ago

It said in docs that wasp deploy auto sets that do I need to change?

Vinny (@Wasp)•3mo ago

if you run wasp deploy fly cmd secrets list --context server you can see which ones you've applied. at the minimum you need DATABASE_URL JWT_SECRET WASP_WEB_CLIENT_URL WASP_SERVER_URL GOOGLE_CLIENT_ID GOOGLE_CLIENT_SECRET run the command above and see what you've got

WixOP•3mo ago

message.txt

Vinny (@Wasp)•3mo ago

it looks like the WASP_ variables are missing WASP_WEB_CLIENT_URL WASP_SERVER_URL where did you read that? can you share a link?

WixOP•3mo ago

https://docs.opensaas.sh/guides/deploying/

OpenSaaS.sh

Deploying

Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.

Vinny (@Wasp)•3mo ago

thanks. maybe there is a mistake there. try adding those two variables and see if it works now

WixOP•3mo ago

Okay trying now I'll let you know soon

WixOP•3mo ago

Vinny you are the goat bro. Thank you so much that worked. Check out my saas mylecturelab.com use code FREEBETA and you can use for free just pull a youtube video down with a yt video downloader I normally use this one https://tools.highperformr.ai/youtube-video-downloader

Highperformr

Free YouTube Video Downloader | Download Any Video in Seconds | hig...

Download any YouTube video without losing clarity using our free YouTube video downloader tool. Simply enter the video URL and click download. Edit, remix, or use the downloaded video for any purpose. Get started now with highperformr.ai!

WixOP•3mo ago

mylecturelab.com ^ That is the sass link mylecturelab.com

Vinny (@Wasp)•3mo ago

oh yeah Ive seen this before awesome app!

WixOP•3mo ago

Thanks my guy you guys have been so helpful!

Vinny (@Wasp)•3mo ago

you're welcome. good luck. make sure to report back and let us know how your saas app is doing

WixOP•3mo ago

Of course thank you!!

Gaming

Programming

CORS error for login when google OAuth is enabled

Did you find this page helpful?