Error on login screen | Twenty | Page 1

queen idol Mar 4, 2024, 1:05 PM

#

I just got twenty set up on my Easypanel installation. When i load up the url i get the login page and after about 5 seconds theese two errors appear, and i cant get to the password screen:

crisp thicket Mar 4, 2024, 1:20 PM

#

I encountered the same issue with a docker compose installation on portainer. I tried downgrading to tags 3.1, 3.0, and 2.3, but all of them produced the same error.

#

Because it's on all of these versions, could it perhaps be a broken dependency?

sinful cradle Mar 4, 2024, 3:20 PM

#

Could you show me your network tab?

#

(on Chrome?)

crisp thicket Mar 4, 2024, 4:22 PM

#

sinful cradle Could you show me your network tab?

📎 network_tab.har

crisp thicket Mar 4, 2024, 4:38 PM

#

also the logs in text form

📎 log.txt

queen idol Mar 4, 2024, 5:18 PM

#

I’ll attach mine when I’m at my computer later…

sinful cradle Mar 4, 2024, 5:25 PM

#

Could you open the graphql queries? I'm interested in the response

#

I think one of them (or maybe all of them) are returning non JSON object (likely because of URL / server configuration)

queen idol Mar 4, 2024, 6:04 PM

#

sinful cradle I think one of them (or maybe all of them) are returning non JSON object (likely...

Yeah the problem is all the api responses are html responses… again, I will check when I get to my computer

crisp thicket Mar 4, 2024, 6:05 PM

#

crisp thicket

Yeah, I rechecked the .har file and you are right, the graphql queries are returning HTML instead of JSON

#

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
    <link rel="apple-touch-icon" href="/icons/ios/192.png" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="A modern open-source CRM" />
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png"
    />
    <meta property="og:description" content="A modern open-source CRM" />
    <meta property="og:title" content="Twenty" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:image"
      content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png"
    />

    <meta name="twitter:description" content="A modern open-source CRM" />
    <meta name="twitter:title" content="Twenty" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
    />

    <title>Twenty</title>
    <script src="/env-config.js"></script>
    <script type="module" crossorigin src="/assets/index-O3h98bLs.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-ZwcHaSaI.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

#

The payload:

{
    "operationName": "GetClientConfig",
    "variables": {},
    "query": "query GetClientConfig {\n  clientConfig {\n    authProviders {\n      google\n      password\n      __typename\n    }\n    billing {\n      isBillingEnabled\n      billingUrl\n      __typename\n    }\n    signInPrefilled\n    signUpDisabled\n    debugMode\n    telemetry {\n      enabled\n      anonymizationEnabled\n      __typename\n    }\n    support {\n      supportDriver\n      supportFrontChatId\n      __typename\n    }\n    sentry {\n      dsn\n      __typename\n    }\n    __typename\n  }\n}"
}

sinful cradle Mar 4, 2024, 6:08 PM

#

yep it seems that your graphql queries are hitting your front server instead of your backend server

queen idol Mar 4, 2024, 6:57 PM

#

sinful cradle yep it seems that your graphql queries are hitting your front server instead of ...

Sooo? Any idea what the problem could be?

crisp thicket Mar 4, 2024, 7:08 PM

#

queen idol Sooo? Any idea what the problem could be?

Incorrectly set LOCAL_SERVER_URL environmental variable

#

wrong port

queen idol Mar 4, 2024, 7:09 PM

#

crisp thicket Incorrectly set LOCAL_SERVER_URL environmental variable

Where am i supposed to put that?

#

In the backend or frontend service?

crisp thicket Mar 4, 2024, 7:11 PM

#

queen idol Where am i supposed to put that?

Oh sorry I was assuming you used the official template.

    environment:
      - REACT_APP_SERVER_BASE_URL=${LOCAL_SERVER_URL}
      - REACT_APP_SERVER_AUTH_URL=${LOCAL_SERVER_URL}/auth
      - REACT_APP_SERVER_FILES_URL ${LOCAL_SERVER_URL}/files

#

ensure these are correct with the right port

queen idol Mar 4, 2024, 7:12 PM

#

Currently i have the db, with a basic postgres service as specified in the docs, then i have the frontend with theese variables: REACT_APP_SERVER_BASE_URL=https://backend.crm.vinumweb.com REACT_APP_SERVER_AUTH_URL=https://backend.crm.vinumweb.com/auth REACT_APP_SERVER_FILES_URL=https://backend.crm.vinumweb.com/files GENERATE_SOURCEMAP=false and finally the backend with theese env variables: ````PG_DATABASE_URL=postgres://postgres:72a3db9c4374e4c7139f@twenty_db:5432/twenty
FRONT_BASE_URL=https://crm.vinumweb.com
SERVER_URL=https://backend.crm.vinumweb.com
PORT=3000```

crisp thicket Mar 4, 2024, 7:12 PM

#

oh ok

queen idol Mar 4, 2024, 7:12 PM

#

So where exactly am i supposed to pot the "Correct" in?

crisp thicket Mar 4, 2024, 7:15 PM

#

queen idol So where exactly am i supposed to pot the "Correct" in?

If the backend is actually running on port 3000, I believe it should be

REACT_APP_SERVER_BASE_URL=https://backend.crm.vinumweb.com:3000
REACT_APP_SERVER_AUTH_URL=https://backend.crm.vinumweb.com:3000/auth
REACT_APP_SERVER_FILES_URL=https://backend.crm.vinumweb.com:3000/files


SERVER_URL=https://backend.crm.vinumweb.com:3000

queen idol Mar 4, 2024, 7:15 PM

#

crisp thicket If the backend is actually running on port 3000, I believe it should be ```yaml ...

I mapped the domain backend.crm.vinumweb.com to port 3000.

crisp thicket Mar 4, 2024, 7:16 PM

#

for some reason it is sending the requests to your frontend instead of your backend

queen idol Mar 4, 2024, 7:16 PM

#

crisp thicket for some reason it is sending the requests to your frontend instead of your back...

Yeah and the docker docs for twenty is not very good ngl... I have no idea what varaibles i need to set and what i don't

#

No matter what i set the vars to it keeps sending it to localhost:3000

sinful cradle Mar 4, 2024, 7:21 PM

#

Yep the docs are not great for the moment, sorry about that! (Also feel free to contribute to it if you can get it up, it will help future self hosters)
How do you run your frontend and what container are you using?

It's important that REACT_APP_SERVER_BASE_URL is set to point to your server url

queen idol Mar 4, 2024, 7:22 PM

#

sinful cradle Yep the docs are not great for the moment, sorry about that! (Also feel free to ...

So i use Easypanel which is like caprover but a bit different as you can't just use a docker-compose you need to make the services yourself. I'm sending some screenshots in a second of my setup.

crisp thicket Mar 4, 2024, 7:22 PM

#

queen idol Yeah and the docker docs for twenty is not very good ngl... I have no idea what ...

Here's my config if that helps:

version: "3.9"
services:

  twenty:
    image: twentycrm/twenty-front:${TAG}
    ports:
      - 3001:3000
    environment:
      - SIGN_IN_PREFILLED=${SIGN_IN_PREFILLED}
      - REACT_APP_SERVER_BASE_URL=${LOCAL_SERVER_URL}
      - REACT_APP_SERVER_AUTH_URL=${LOCAL_SERVER_URL}/auth
      - REACT_APP_SERVER_FILES_URL ${LOCAL_SERVER_URL}/files
    depends_on:
      - backend

  backend:
    image: twentycrm/twenty-server:${TAG}
    ports:
      - 3000:3000
    environment:
      - SIGN_IN_PREFILLED=${SIGN_IN_PREFILLED}
      - PG_DATABASE_URL=${PG_DATABASE_URL}
      - FRONT_BASE_URL=${FRONT_BASE_URL}
      - PORT=3000
      - STORAGE_TYPE=local
      - STORAGE_LOCAL_PATH=.local-storage
      - ACCESS_TOKEN_SECRET=${ACCESS_TOKEN_SECRET}
      - LOGIN_TOKEN_SECRET=${LOGIN_TOKEN_SECRET}
      - REFRESH_TOKEN_SECRET=${REFRESH_TOKEN_SECRET}
    depends_on:
      - db

  db:
    image: twentycrm/twenty-postgres:${TAG}
    volumes:
      - db-data:/var/lib/postgresql/data
    environment:

      - POSTGRES_PASSWORD=twenty
  
volumes:
  db-data:

TAG=latest
POSTGRES_ADMIN_PASSWORD=twenty
PG_DATABASE_URL=postgres://twenty:twenty@db:5432/default
FRONT_BASE_URL=<redacted>
LOCAL_SERVER_URL=<redacted>
ACCESS_TOKEN_SECRET=<redacted>
LOGIN_TOKEN_SECRET=<redacted>
REFRESH_TOKEN_SECRET=<redacted>
SIGN_IN_PREFILLED=true

#

pretty much just the example

queen idol Mar 4, 2024, 7:24 PM

#

crisp thicket Mar 4, 2024, 7:24 PM

#

Still doesn't work though, despite setting up URLs correctly. This time due to the database not being initialized correctly by twenty

queen idol Mar 4, 2024, 7:24 PM

#

#

7dmBDAAAAMAgft7fKURAABMCGAAAAAAAACACQEMAAAAAAAAMCGAAQAAAAAAACYEMAAAAAAAAMCEAAYAAAAAAACYEMAAAAAAAAAAEwIYAAAAAAAAYEIAAwAAAAAAAEwIYAAAAAAAAIAJAQwAAAAAAAAwIYABAAAAAAAAJgQwAAAAAAAAwIQABgAAAAAAAJgQwAAAAAAAAAATAhgAAAAAAABgQgADAAAAAAAATAhgAAAAAAAAgAkBDAAAAAAAADAhgAEAAAAAAAAmBDAAAAAAAADAhAAGAAAAAAAAmBDAAAAAAAAAABMCGAAAAAAAAGBCAAMAAAAAAABMCGAAAAAAAACACQEMAAAAAAAAMCGAAQAAAAAAACYEMAAAAAAAAMCEAAYAAAAAAACYEMAAAAAAAAAAEwIYAAAAAAAAYEIAAwAAAAAAAEwIYAAAAAAAAIAJAQwAAAAAAAAwIYABAAAAAAAAJgQwAAAAAAAAwIQABgAAAAAAAJgQwAAAAAAAA..png

sinful cradle Mar 4, 2024, 7:26 PM

#

Are these variable shared between frontend and backend?

#

REACT_APP_SERVER_BASE_URL needs to be set on the FE

queen idol Mar 4, 2024, 7:28 PM

#

@sinful cradle Im currently trying to set up the same way yours is. Could the FRONT_BASE_URL be https://crm.vinumweb.com? Is that the correct format?

#

And what is the LOCAL_SERVER_URL?

crisp thicket Mar 4, 2024, 7:31 PM

#

crisp thicket Still doesn't work though, despite setting up URLs correctly. This time due to t...

Unrelated: Even on docker, you have to open a terminal in the backend and run yarn nx database:init twenty-server to init the database.

sinful cradle Mar 4, 2024, 7:31 PM

#

On the FE:

REACT_APP_SERVER_BASE_URL should be your backend URL, that's the only way your front can talk to the backend

All other variables are on the BE :

FRONT_BASE_URL is used to redirect to the FE in some cases
LOCAL_SERVER_URL is used by the backend to point to itself

We can indeed improve the naming :p

crisp thicket Mar 4, 2024, 7:34 PM

#

@queen idol can you send your docker compose file please?

#

or at least the config for backend

#

nvm, it seems like you have ports correctly

queen idol Mar 4, 2024, 7:36 PM

#

Now i'm getting this error all of a sudden:

#

On the backend

sinful cradle Mar 4, 2024, 7:39 PM

#

I've never seen this one, it looks to be something wrong with your .env

#

- PG_DATABASE_URL - FRONT_BASE_URL - PORT=3000 - ACCESS_TOKEN_SECRET=REPLACE_ME - LOGIN_TOKEN_SECRET=REPLACE_ME - REFRESH_TOKEN_SECRET=REPLACE_ME

#

could you make sure to have these in your environment variables on the backend?

queen idol Mar 5, 2024, 9:05 AM

#

sinful cradle could you make sure to have these in your environment variables on the backend?

I'm pretty sure the problem is the frontend, not the backend as the frontend sends all graphql requests to "localhost:3000" instead of "backend.crm.vinumweb.com"

queen idol Mar 5, 2024, 1:12 PM

#

@sinful cradle I've done everything i could to make it work but it just wont work...

#

sinful cradle Mar 5, 2024, 2:31 PM

#

can you ssh into your front container and do:
env | grep REACT_APP_SERVER_BASE_URL ?

queen idol Mar 6, 2024, 3:24 PM

#

sinful cradle can you ssh into your front container and do: env | grep REACT_APP_SERVER_BASE_...

Yes, it gives the correct value

sinful cradle Mar 6, 2024, 5:06 PM

#

great, how is your front served? what command launches it?

queen idol Mar 6, 2024, 5:17 PM

#

sinful cradle great, how is your front served? what command launches it?

What command launches it? Currently no start-command is set it just uses the docker image. I’m using Easypanel

sinful cradle Mar 6, 2024, 6:06 PM

#

So it should be the command of the official dockerfile:
CMD ["/bin/sh", "-c", "./scripts/inject-runtime-env.sh && serve build"]

#

this command should inject your env and serve your folder. I don't understand why you don't see your env righlty set in the code

#

what do you have in build/env-config.js ?

orchid juniper Mar 6, 2024, 8:27 PM

#

Experiencing the same problem
Deployed the DB,Backend, and frontent seperately w/o docker compose.

frontend is using the latest docker image as of Feb6,2024
Frontend env-vars are set as follows:

REACT_APP_SERVER_AUTH_URL=https://twentyserver.our_URL.tld/auth
REACT_APP_SERVER_BASE_URL=https://twentyserver.our_URL.tld
REACT_APP_SERVER_FILES_URL=https://twentyserver.our_URL.tld/files

Doublechecked in the frontend server console...

/app/packages/twenty-front # env | grep REACT
REACT_APP_SERVER_BASE_URL=https://twentyserver.our_URL.tld
REACT_APP_SERVER_FILES_URL=https://twentyserver.our_URL.tld/files
REACT_APP_SERVER_AUTH_URL=https://twentyserver.our_URL.tld/auth
/app/packages/twenty-front #

When going to the frontend url, I get no network traffic attempting to reach twentyserver.our_URL.tld/graphql, Only localhost:3000/graphql

cat ./build/env-config.js

/app/packages/twenty-front # 
window._env_ = {
  REACT_APP_SERVER_BASE_URL: "https://twentyserver.our_URL.tld",
}

queen idol Mar 6, 2024, 8:30 PM

#

sinful cradle what do you have in build/env-config.js ?

It’s not a regular docker install, I use Easypanel which is a system with a ui for docker, like portainer and caprover

orchid juniper Mar 6, 2024, 8:32 PM

#

I think he means in the container's /app/packages/twenty-front/build directory

sinful cradle Mar 6, 2024, 8:34 PM

#

ok so your env-config.js looks good

#

I'm trying to build it on my own

#

I've just tried locally and it should be working fine, the front server should expose whatever is in our env-config.js

#

just a question to clarify: why is your front hosted on localhost:3000 when your server is on a public dns?

#

shouldn't your server be on twentyfront.your_URL.tld?

#

This is my test:
Step 1: passing the env variable
docker run -d -p 3001:3000 -e REACT_APP_SERVER_BASE_URL=http://localhost:3002 --name twenty-front twenty-front

#

Step 2: making sure the variable is set in the container
/app/packages/twenty-front # env NODE_VERSION=18.17.1 HOSTNAME=f20390113d39 YARN_VERSION=1.22.19 REACT_APP_SERVER_BASE_URL=http://localhost:3002 SHLVL=1 HOME=/root TERM=xterm PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin PWD=/app/packages/twenty-front

#

Step 3: making sure the env-config.js is properly built
/app/packages/twenty-front # cat build/env-config.js window._env_ = { REACT_APP_SERVER_BASE_URL: "http://localhost:3002", }

#

Step 4 : making sure that env-config.js is as expected from the browser perspective

orchid juniper Mar 6, 2024, 8:48 PM

#

I'm gonna stop obsfucating the URLs.

#

Our front is hosted at twenty.bytesandbeans.cloud, not localhost.
the backend is at twentyserver.bytesandbeans.cloud and this is what I have REACT_APP_SERVER_BASE_URL set to.

#

.... ?

sinful cradle Mar 6, 2024, 8:52 PM

#

you must have a caching issue with your browser, can you try in private nav?

orchid juniper Mar 6, 2024, 8:53 PM

#

Yea.
I cleared the cache, but telling it to clear the cache and it actualy doing so are very different things.

sinful cradle Mar 6, 2024, 8:54 PM

#

haha, wonderful

#

I'm going to remove screenshots

orchid juniper Mar 6, 2024, 8:55 PM

#

*opens private window*
Yup, it works.
Please excuse my while I bang my head against a wall for a few hours.

sinful cradle Mar 6, 2024, 8:55 PM

#

haha, no worries, glad it works 🙂

orchid juniper Mar 6, 2024, 8:57 PM

#

Also, is that french? Did you just stay up late helping us?

sinful cradle Mar 6, 2024, 8:58 PM

#

Yes, I'm based in Paris ! Most of the team is. No worries, I'm actually home and it happens that I work a bit later 😉

#

Where are you based?

orchid juniper Mar 6, 2024, 8:59 PM

#

Well, thanks for burning the midnight oil to help out.
I'm in USA, Texas.

sinful cradle Mar 6, 2024, 9:00 PM

#

Cool to see people from the US

#

Feel free to ping us if you need more help, a lot is happening on Github too 🙂

orchid juniper Mar 6, 2024, 9:01 PM

#

We will, thanks again.

queen idol Mar 7, 2024, 7:01 AM

#

@sinful cradle I'm currently also banging my head into a wall. Private browser worked. Currently trying to fix an ERR_SSL_VERSION_OR_CIPHER_MISMATCH error

sinful cradle Mar 7, 2024, 7:21 AM

#

Ok!

queen idol Mar 7, 2024, 7:27 AM

#

sinful cradle Ok!

Do you have an idea of why it gives that error? I can't seem to figure out...

sinful cradle Mar 7, 2024, 7:28 AM

#

I have no knowledge about Easypanel but I have general knowledge about SSL and certificates, where do you see this error?

queen idol Mar 7, 2024, 7:30 AM

#

sinful cradle I have no knowledge about Easypanel but I have general knowledge about SSL and c...

On every browser. Chrome and edge....

sinful cradle Mar 7, 2024, 7:30 AM

#

could you show a screenshot of the console + one of the network tab?

queen idol Mar 7, 2024, 7:31 AM

#

sinful cradle could you show a screenshot of the console + one of the network tab?

Sure!

#

@sinful cradle

sinful cradle Mar 7, 2024, 7:34 AM

#

how have you configured SSL on easypanel?

queen idol Mar 7, 2024, 7:35 AM

#

sinful cradle how have you configured SSL on easypanel?

So basically i mapped the domain backend.crm.vinumweb.com to the backend-app port 3000. I ticked SSL which works for all the other apps i have running.

sinful cradle Mar 7, 2024, 7:40 AM

#

I see, so twenty container does not handle SSL itself.
I don't know how Easypanel works but you cannot achieve end to end encryption from your browser to the server. What you should do:

browser =(ssl)=> easypanel load balancer / nginx =(http)=> server container

queen idol Mar 7, 2024, 7:41 AM

#

sinful cradle I see, so twenty container does not handle SSL itself. I don't know how Easypane...

I think it is an easypanel error yeah. I'll check with them

sinful cradle Mar 7, 2024, 7:41 AM

#

ok, keep up us to date, it might help future self hosters

queen idol Mar 7, 2024, 7:43 AM

#

sinful cradle ok, keep up us to date, it might help future self hosters

Hey man, i did a quick search and actually found out it was because of cloudflares free plan! It does not cover a.b.c.com type domains...

#

Finally after HOURS it works! Can't wait to use Twenty! Thanks for the help @sinful cradle !

sinful cradle Mar 7, 2024, 7:52 AM

#

Wonderful!

queen idol Mar 7, 2024, 7:55 AM

#

@sinful cradle Haha thought it worked, but when i click next after entering an email, nothing happens. There is no error in the console and this is the network tab.