CORS error while trying to sign up - deployed everything in railway

jordi0lle · 2024-06-07T16:29:05.566Z

Everything is deployed in railway and all active but when I go to the signup page I get CORS error. I also checked the deploy logs in railway for the front and say this error while listening to the port 0.0.0.8043. Deployed app url -> https://client-production-4576.up.railway.app/signup Thanks in advance 😄

K

kapa.ai•6/7/24, 4:29 PM

Hi @jordi0lle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•6/7/24, 4:29 PM

----------------------
Hmm, I don't know enough to give you a confident answer yet. However, I can suggest a few things you might want to check:

Ensure that you have correctly set up the environment variables in the Railway dashboard. Specifically, check the
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
and
```
WASP_SERVER_URL
```
WASP_SERVER_URL
```
WASP_SERVER_URL
```
WASP_SERVER_URL
variables. They should point to the correct client and server domains respectively. source (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-the-server)
Make sure that you have correctly set up the
```
REACT_APP_API_URL
```
REACT_APP_API_URL
```
REACT_APP_API_URL
```
REACT_APP_API_URL
in your client's environment variables. This should point to your Wasp backend. source (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-the-client)
Check if you have set the
```
PORT
```
PORT
```
PORT
```
PORT
environment variable to
```
8043
```
8043
```
8043
```
8043
under the
```
Variables
```
Variables
```
Variables
```
Variables
tab in the Railway dashboard. source (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-the-client)

If you've checked all of these and are still experiencing issues, it might be helpful to ask for support in the Wasp community on Discord or Github.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•6/7/24, 4:29 PM

Sorry @jordi0lle, 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?

J

jordi0lleOP•6/7/24, 9:45 PM

Hi @kapa.ai, looks like everything is set up correctly. The different pages of the app are loading (landing, pricing, signup, login) but when I try to signup as a new user I get this cors error

Even when signup page loads I get this /me error 3-4 times or more.
What can I do about it?

M

MEE6•6/7/24, 9:45 PM

Wohooo @jordi0lle, you just became a Waspeteer level 1!

K

kapa.ai•6/7/24, 9:45 PM

Let me check the knowledge base for you. One moment! :books:

K

kapa.ai•6/7/24, 9:45 PM

----------------------
It seems like you're experiencing a CORS (Cross-Origin Resource Sharing) issue. CORS 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, the CORS middleware is included by default in the server configuration. The

allowedCORSOrigins

allowedCORSOrigins

allowedCORSOrigins

allowedCORSOrigins option in the

cors

cors

cors

cors middleware should be set to the origin of your client application. source (https://wasp-lang.dev/docs/advanced/middleware-config#default-middleware-definitions)

Here's how the default middleware configuration looks like in Wasp:

const defaultGlobalMiddleware = new Map([  
 ['helmet', helmet()],  
 ['cors', cors({ origin: config.allowedCORSOrigins })],  
 ['logger', logger('dev')],  
 ['express.json', express.json()],  
 ['express.urlencoded', express.urlencoded({ extended: false })],  
 ['cookieParser', cookieParser()]  
])

const defaultGlobalMiddleware = new Map([  
 ['helmet', helmet()],  
 ['cors', cors({ origin: config.allowedCORSOrigins })],  
 ['logger', logger('dev')],  
 ['express.json', express.json()],  
 ['express.urlencoded', express.urlencoded({ extended: false })],  
 ['cookieParser', cookieParser()]  
])

const defaultGlobalMiddleware = new Map([  
 ['helmet', helmet()],  
 ['cors', cors({ origin: config.allowedCORSOrigins })],  
 ['logger', logger('dev')],  
 ['express.json', express.json()],  
 ['express.urlencoded', express.urlencoded({ extended: false })],  
 ['cookieParser', cookieParser()]  
])

const defaultGlobalMiddleware = new Map([  
 ['helmet', helmet()],  
 ['cors', cors({ origin: config.allowedCORSOrigins })],  
 ['logger', logger('dev')],  
 ['express.json', express.json()],  
 ['express.urlencoded', express.urlencoded({ extended: false })],  
 ['cookieParser', cookieParser()]  
])

If you're still experiencing issues, it might be due to the server not being able to recognize the client's domain as a valid origin. You might want to double-check the

WASP_WEB_CLIENT_URL

WASP_WEB_CLIENT_URL

WASP_WEB_CLIENT_URL

WASP_WEB_CLIENT_URL environment variable in your server's settings and ensure it matches the domain of your client application.

If the issue persists, I recommend reaching out to the Wasp community on Discord or Github for further assistance. They might be able to provide more specific guidance based on your setup.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•6/7/24, 9:45 PM

Sorry @jordi0lle, 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?

J

jordi0lleOP•6/8/24, 8:23 AM

@kapa.ai I tried to modify the global middleware like in the docu but nothing worked. Perhaps maybe try another service like fly.io? Anyway I'd like to fix this to be able to make it work in railway

K

kapa.ai•6/8/24, 8:23 AM

Let me check the knowledge base for you. One moment! :books:

K

kapa.ai•6/8/24, 8:23 AM

----------------------
I understand your frustration. CORS issues can be tricky to debug. Here are a few more things you can try:

Double-check your middleware configuration: Make sure you've correctly set up the middleware for your application. You can customize the global middleware in Wasp using the
```
middlewareConfigFn
```
```
middlewareConfigFn
```
in your
```
main.wasp
```
```
main.wasp
```
file. source (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware)

Here's an example of how you can modify the middleware:

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

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

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

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

And in your

serverSetup.js

serverSetup.js

serverSetup.js

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  
}

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  
}

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  
}

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  
}

Check your Railway environment variables: Make sure the
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
environment variable in your Railway settings matches the domain of your client application. source (https://wasp-lang.dev/docs/advanced/deployment/manually#deploying-the-server)
Try deploying to a different provider: If you're still having issues, you might want to try deploying your application to a different provider like Fly.io. Wasp has detailed instructions on how to do this in their documentation. source (https://wasp-lang.dev/docs/advanced/deployment/manually#different-providers)

K

kapa.ai•6/8/24, 8:23 AM

If none of these suggestions work, I recommend reaching out to the Wasp community on Discord or Github for further assistance. They might be able to provide more specific guidance based on your setup.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•6/8/24, 8:23 AM

Sorry @jordi0lle, 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?

J

jordi0lleOP•6/8/24, 9:49 AM

Hi @kapa.ai, I managed to solve it by deleting client, server and db. I created them all again and deployed following the steps and now it's working. The problem I have now is that I sign up a user, it gets created because I can see it in the database in railway but I get no email and when I try to login with that user I can't because it says Invalid credentials. Is that something to do with the database or something else? I'm confused right now

K

kapa.ai•6/8/24, 9:49 AM

Let me check the knowledge base for you. One moment! :books:

K

kapa.ai•6/8/24, 9:49 AM

----------------------
It seems like you're facing two separate issues here:

No email received after signup: Wasp uses Prisma under the hood for database operations, and the email sending functionality is not built-in. You would need to integrate an email service like SendGrid or Mailgun to send emails. If you've already done this, please ensure that the email service is correctly configured and working. If you haven't, you might want to look into setting this up.
**Invalid credentials error during login**: This error typically occurs when the entered username/email and password do not match the ones stored in the database. Here are a few things you can check:
- Ensure that the user is entering the correct credentials during login.
- Check if the password is being hashed before being stored in the database. Storing passwords in plain text is not secure and is generally not recommended.
- If you're using a custom login action, ensure that it's correctly implemented. You can refer to the Wasp documentation (https://wasp-lang.dev/docs/auth/email#creating-a-custom-sign-up-action) for more details on how to create a custom signup action.

If you're still facing issues, I recommend reaching out to the Wasp community on Discord or Github for further assistance. They might be able to provide more specific guidance based on your setup.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•6/8/24, 9:49 AM

Sorry @jordi0lle, 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?

J

jordi0lleOP•6/8/24, 4:14 PM

@kapa.ai Looks like credentials are ok in the database and user is registered and password is hashed. No mail is sent so I think something is wrong with the email configuration. Even mail is configured wrong, I should be able to log in right?

K

kapa.ai•6/8/24, 4:14 PM

Let me check the knowledge base for you. One moment! :books:

K

kapa.ai•6/8/24, 4:14 PM

----------------------
Yes, you're correct. Even if the email configuration is incorrect and no verification email is sent, you should still be able to log in if the user is correctly registered and the password is hashed in the database.

The email verification step is typically used to verify the user's email address and doesn't directly affect the login process. However, depending on your application's setup, you might have a condition that prevents users from logging in until their email address is verified.

If you're still unable to log in, it might be due to an issue with the login action. Wasp allows you to create custom login actions, and if there's an error in your custom login action, it could prevent users from logging in. You can refer to the Wasp documentation (https://wasp-lang.dev/docs/auth/email#creating-a-custom-sign-up-action) for more details on how to create a custom login action.

If you're still facing issues, I recommend reaching out to the Wasp community on Discord or Github for further assistance. They might be able to provide more specific guidance based on your setup.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•6/8/24, 4:14 PM

Sorry @jordi0lle, 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?

J

jordi0lleOP•6/8/24, 5:17 PM

Hi @kapa.ai, I solved the last error regarding the email, I didn't change this (see image). Now my app is fully working here (I have one last step that is connecting my domain which I have in godaddy to the client)

K

kapa.ai•6/8/24, 5:17 PM

Let me check the knowledge base for you. One moment! :books:

K

kapa.ai•6/8/24, 5:17 PM

----------------------
Great to hear that your app is now fully working! To connect your domain from GoDaddy to your client, you'll need to follow these steps:

Add your domain to your Fly client app. You can do this by running the following command, replacing
```
mycoolapp.com
```
mycoolapp.com
```
mycoolapp.com
```
mycoolapp.com
with your domain:

wasp deploy fly cmd --context client certs create mycoolapp.com

wasp deploy fly cmd --context client certs create mycoolapp.com

wasp deploy fly cmd --context client certs create mycoolapp.com

wasp deploy fly cmd --context client certs create mycoolapp.com

This command will output instructions to add the DNS records to your domain. It will look something like this:

You can direct traffic to mycoolapp.com by:  
  
1: Adding an A record to your DNS service which reads  
  
 A @ 66.241.1XX.154  
  
You can validate your ownership of mycoolapp.com by:  
  
2: Adding an AAAA record to your DNS service which reads:  
  
 AAAA @ 2a09:82XX:1::1:ff40

You can direct traffic to mycoolapp.com by:  
  
1: Adding an A record to your DNS service which reads  
  
 A @ 66.241.1XX.154  
  
You can validate your ownership of mycoolapp.com by:  
  
2: Adding an AAAA record to your DNS service which reads:  
  
 AAAA @ 2a09:82XX:1::1:ff40

You can direct traffic to mycoolapp.com by:  
  
1: Adding an A record to your DNS service which reads  
  
 A @ 66.241.1XX.154  
  
You can validate your ownership of mycoolapp.com by:  
  
2: Adding an AAAA record to your DNS service which reads:  
  
 AAAA @ 2a09:82XX:1::1:ff40

You can direct traffic to mycoolapp.com by:  
  
1: Adding an A record to your DNS service which reads  
  
 A @ 66.241.1XX.154  
  
You can validate your ownership of mycoolapp.com by:  
  
2: Adding an AAAA record to your DNS service which reads:  
  
 AAAA @ 2a09:82XX:1::1:ff40

Add the DNS records for your domain. This will depend on your domain provider, but it should be a matter of adding an A record for
```
@
```
@
```
@
```
@
and an AAAA record for
```
@
```
@
```
@
```
@
with the values provided by the previous command.
Set your domain as the
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
environment variable for your server app:

wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://mycoolapp.com>

wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://mycoolapp.com>

wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://mycoolapp.com>

wasp deploy fly cmd --context server secrets set WASP_WEB_CLIENT_URL=<https://mycoolapp.com>

This is needed to keep your CORS configuration up to date.

That's it, your app should now be available at

<https://mycoolapp.com

<https://mycoolapp.com

<https://mycoolapp.com

<https://mycoolapp.com!>

For more details, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/advanced/deployment/cli#using-a-custom-domain-for-your-app).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•6/8/24, 5:17 PM

Sorry @jordi0lle, 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?

J

jordi0lleOP•6/8/24, 5:18 PM

@kapa.ai I'm using railway not fly

K

kapa.ai•6/8/24, 5:18 PM

Let me check the knowledge base for you. One moment! :books:

K

kapa.ai•6/8/24, 5:18 PM

----------------------
I apologize for the confusion. To connect your GoDaddy domain to your Railway app, you'll need to follow these steps:

In your Railway dashboard, navigate to the settings of your client project.
Under the "Domains" section, click on "Add" to add your custom domain.
Enter your domain (e.g.,
```
mycoolapp.com
```
mycoolapp.com
```
mycoolapp.com
```
mycoolapp.com
) and click "Add".
Railway will provide you with a DNS record that you need to add to your GoDaddy DNS settings. It will look something like this:

Type: CNAME
Host: www
Points to: provided-by-railway.railway.app

Type: CNAME
Host: www
Points to: provided-by-railway.railway.app

Type: CNAME
Host: www
Points to: provided-by-railway.railway.app

Type: CNAME
Host: www
Points to: provided-by-railway.railway.app

Log in to your GoDaddy account, navigate to your domain's DNS settings, and add the provided DNS record.
Once you've added the DNS record in GoDaddy, it might take some time for the changes to propagate. You can check the status in your Railway dashboard.
Finally, update the
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
```
WASP_WEB_CLIENT_URL
environment variable in your server project settings to your new domain (e.g.,
```
<https://mycoolapp.com
```
<https://mycoolapp.com
```
<https://mycoolapp.com
```
<https://mycoolapp.com
>).

Please note that the exact steps might vary depending on your setup. If you're still facing issues, I recommend reaching out to the Railway or Wasp community for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•6/8/24, 5:18 PM

Sorry @jordi0lle, 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?

CORS error while trying to sign up - deployed everything in railway

Similar Threads

Similar Threads

Similar Threads