OAuth buttons not working in the OpenPanel sign up/log in page
bhaveshxrawat
HOBBYOP

2 months ago

So, after changing the domains of the deployed frontend from the OpenPanel template, the OAuth buttons are not working due to CORS error since the domain that is changed is not in the included in allowed origins.

Totally, unrelated but could anyone tell me how I could remove the 'public endpoint warning' for the egress fees.

Thank you

$10 Bounty

17 Replies

dardameiz
PRO

2 months ago

Add your new frontend domain to the allowed origins in your OpenPanel backend env variables (look for CORS_ORIGINS or similar). The public endpoint warning is just informational about egress costs, you can dismiss it.​​​​​​​​​​​​​​​​


dardameiz

Add your new frontend domain to the allowed origins in your OpenPanel backend env variables (look for CORS_ORIGINS or similar). The public endpoint warning is just informational about egress costs, you can dismiss it.​​​​​​​​​​​​​​​​

bhaveshxrawat
HOBBYOP

2 months ago

Tried looking for the ORIGINS related env vars in the OpenPanel service but couldn't find it anywhere. The closest I could find was ALLOW_INVITATION and ALLOW_REGISTRATION .


domehane
FREE

2 months ago

add these env vars to your openpanel api service in railway:

GITHUB_REDIRECT_URI=https://your-new-domain.com/api/oauth/github/callback
GOOGLE_REDIRECT_URI=https://your-new-domain.com/api/oauth/google/callback

replace "your-new-domain.com" with whatever domain you changed to. make sure you also updated the redirect uris in your github/google oauth app settings to match these exact urls.

then restart the service and i think it should works. the cors error happens because oauth providers are trying to redirect back to your old domain.

for the public endpoint warning; just ignore it, it's just railway telling you about potential egress costs, nothing to worry about


domehane

add these env vars to your openpanel api service in railway:GITHUB_REDIRECT_URI=https://your-new-domain.com/api/oauth/github/callback GOOGLE_REDIRECT_URI=https://your-new-domain.com/api/oauth/google/callbackreplace "your-new-domain.com" with whatever domain you changed to. make sure you also updated the redirect uris in your github/google oauth app settings to match these exact urls.then restart the service and i think it should works. the cors error happens because oauth providers are trying to redirect back to your old domain.for the public endpoint warning; just ignore it, it's just railway telling you about potential egress costs, nothing to worry about

bhaveshxrawat
HOBBYOP

2 months ago

now the request does works, take me to github domain but on a 404 page.


domehane
FREE

2 months ago

i think your domain is NOT bound to the caddy service. the 404 happens because caddy is the entry point that routes /api/* to your api service

let's try to fix this ,go to railway and bind your custom domain to the caddy service (not dashboard, not api - only caddy) and then make sure you already added these env vars to both api and dashboard services:

GITHUB_CLIENT_ID=your_id
GITHUB_CLIENT_SECRET=your_secret
GITHUB_REDIRECT_URI=https://your-domain.com/api/oauth/github/callback

GOOGLE_CLIENT_ID=your_id
GOOGLE_CLIENT_SECRET=your_secret  
GOOGLE_REDIRECT_URI=https://your-domain.com/api/oauth/google/callback

then restart all services after adding variables


bhaveshxrawat
HOBBYOP

2 months ago

I added the env vars to both api and the dashboard, the sign up worked, but after that, it takes me to the log in screen, when I hit the log in with Github, the page reloads but nothing happens. the network tab has some undefined request endpoints.

Attachments


domehane

i think your domain is NOT bound to the caddy service. the 404 happens because caddy is the entry point that routes /api/* to your api servicelet's try to fix this ,go to railway and bind your custom domain to the caddy service (not dashboard, not api - only caddy) and then make sure you already added these env vars to both api and dashboard services:GITHUB_CLIENT_ID=your_id GITHUB_CLIENT_SECRET=your_secret GITHUB_REDIRECT_URI=https://your-domain.com/api/oauth/github/callback GOOGLE_CLIENT_ID=your_id GOOGLE_CLIENT_SECRET=your_secret GOOGLE_REDIRECT_URI=https://your-domain.com/api/oauth/google/callbackthen restart all services after adding variables

bhaveshxrawat
HOBBYOP

2 months ago

I added the env vars to both api and the dashboard, the sign up worked, but after that, it takes me to the log in screen, when I hit the log in with Github, the page reloads but nothing happens. the network tab has some undefined request endpoints.


domehane
FREE

2 months ago

the "undefined" requests mean your dashboard service doesn't know where the api is.

you need to add these environment variables to the dashboard service:

API_URL=https://your-domain.com/api
DASHBOARD_URL=https://your-domain.com

replace "your-domain.com" with your actual domain (the one bound to caddy).

then restart the dashboard service

this tells the next.js frontend where to send api requests. without these variables, the frontend literally has "undefined" as the api url which is why you see those undefined requests in the network tab


domehane

the "undefined" requests mean your dashboard service doesn't know where the api is.you need to add these environment variables to the dashboard service:API_URL=https://your-domain.com/api DASHBOARD_URL=https://your-domain.comreplace "your-domain.com" with your actual domain (the one bound to caddy).then restart the dashboard servicethis tells the next.js frontend where to send api requests. without these variables, the frontend literally has "undefined" as the api url which is why you see those undefined requests in the network tab

bhaveshxrawat
HOBBYOP

2 months ago

Naah, still the same. I have a query, what exactly is caddy, I don't see any service as caddy in my project graph. Also, need to clear that by 'changing the domains', I meant that I just changed the prefix part of the domain, it is still railway.app


domehane
FREE

2 months ago

sorry , i was confused , caddy is only in other deployment methods

the railway template has these 7 services: postgres , redis, geoip, clickhouse , openpanel api , openpanel worker , openpanel dashboard

since you're just changing the railway.app domain prefix (not using a custom domain),check this:

  1. what's the PUBLIC URL of your dashboard service in railway? (should be something like xxx.railway.app)

  2. add these env vars to the dashboard service:

API_URL=https://[your-dashboard-url]/api
DASHBOARD_URL=https://[your-dashboard-url]
  1. the dashboard service should have a public domain assigned. when you log in with github, it should redirect back to that dashboard url.

can you tell me what domains/urls each of your services (especially dashboard and api) are using right now?


domehane

sorry , i was confused , caddy is only in other deployment methodsthe railway template has these 7 services: postgres , redis, geoip, clickhouse , openpanel api , openpanel worker , openpanel dashboardsince you're just changing the railway.app domain prefix (not using a custom domain),check this:what's the PUBLIC URL of your dashboard service in railway? (should be something like xxx.railway.app)add these env vars to the dashboard service:API_URL=https://[your-dashboard-url]/api DASHBOARD_URL=https://[your-dashboard-url]the dashboard service should have a public domain assigned. when you log in with github, it should redirect back to that dashboard url.can you tell me what domains/urls each of your services (especially dashboard and api) are using right now?

bhaveshxrawat
HOBBYOP

2 months ago

So, I deleted that project since it was taking way too much time and hassle. I made a new project, didn't change the prefix, made a new oauth app for github, but get this error. Just can't seem to catch a break.

To answer the question:

Dashboard: https://openpanel-dashboard-production-b9b9.up.railway.app/
API: https://openpanel-api-production-a48b.up.railway.app/


bhaveshxrawat

So, I deleted that project since it was taking way too much time and hassle. I made a new project, didn't change the prefix, made a new oauth app for github, but get this error. Just can't seem to catch a break.To answer the question: Dashboard: https://openpanel-dashboard-production-b9b9.up.railway.app/API: https://openpanel-api-production-a48b.up.railway.app/

bhaveshxrawat
HOBBYOP

2 months ago

Alright, so I fixed the redirect uri error. (that was my bad), but we are back to the undefined error.


domehane

sorry , i was confused , caddy is only in other deployment methodsthe railway template has these 7 services: postgres , redis, geoip, clickhouse , openpanel api , openpanel worker , openpanel dashboardsince you're just changing the railway.app domain prefix (not using a custom domain),check this:what's the PUBLIC URL of your dashboard service in railway? (should be something like xxx.railway.app)add these env vars to the dashboard service:API_URL=https://[your-dashboard-url]/api DASHBOARD_URL=https://[your-dashboard-url]the dashboard service should have a public domain assigned. when you log in with github, it should redirect back to that dashboard url.can you tell me what domains/urls each of your services (especially dashboard and api) are using right now?

bhaveshxrawat
HOBBYOP

2 months ago

after all this, I added these env in the dashboard service, but the login via Github OAuth still doesn't work. Not an ideal DX honestly, that too with a curated template.


domehane
FREE

2 months ago

the api and dashboard are separate services, so you need specific environment variables.

add these to the dashboard service:

NEXT_PUBLIC_API_URL=https://openpanel-dashboard-production-b9b9.up.railway.app/api
NEXT_PUBLIC_DASHBOARD_URL=https://openpanel-dashboard-production-b9b9.up.railway.app

add these to the api service:

DASHBOARD_URL=https://openpanel-dashboard-production-b9b9.up.railway.app

the key is the NEXT_PUBLIC_ prefix for the dashboard - next.js needs this to access variables in the browser. without it, you get undefined requests.

keep your oauth vars in both services:

GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx  
GITHUB_REDIRECT_URI=https://openpanel-dashboard-production-b9b9.up.railway.app/api/oauth/github/callback

GOOGLE_CLIENT_ID=xxx
GOOGLE_CLIENT_SECRET=xxx
GOOGLE_REDIRECT_URI=https://openpanel-dashboard-production-b9b9.up.railway.app/api/oauth/google/callback

then restart both services. the dashboard needs to know where the api is via NEXT_PUBLIC_API_URL, and the api needs to know the dashboard url for cors/redirects.


domehane

the api and dashboard are separate services, so you need specific environment variables.add these to the dashboard service:NEXT_PUBLIC_API_URL=https://openpanel-dashboard-production-b9b9.up.railway.app/api NEXT_PUBLIC_DASHBOARD_URL=https://openpanel-dashboard-production-b9b9.up.railway.appadd these to the api service:DASHBOARD_URL=https://openpanel-dashboard-production-b9b9.up.railway.appthe key is the NEXT_PUBLIC_ prefix for the dashboard - next.js needs this to access variables in the browser. without it, you get undefined requests.keep your oauth vars in both services:GITHUB_CLIENT_ID=xxx GITHUB_CLIENT_SECRET=xxx GITHUB_REDIRECT_URI=https://openpanel-dashboard-production-b9b9.up.railway.app/api/oauth/github/callback GOOGLE_CLIENT_ID=xxx GOOGLE_CLIENT_SECRET=xxx GOOGLE_REDIRECT_URI=https://openpanel-dashboard-production-b9b9.up.railway.app/api/oauth/google/callbackthen restart both services. the dashboard needs to know where the api is via NEXT_PUBLIC_API_URL, and the api needs to know the dashboard url for cors/redirects.

bhaveshxrawat
HOBBYOP

2 months ago

Followed every step, and now it gives me 404.

Attachments


domehane
FREE

2 months ago

dashboard service environment variables:

NEXT_PUBLIC_API_URL=https://openpanel-api-production-a48b.up.railway.app
NEXT_PUBLIC_DASHBOARD_URL=https://openpanel-dashboard-production-b9b9.up.railway.app

api service environment variables:

DASHBOARD_URL=https://openpanel-dashboard-production-b9b9.up.railway.app

GITHUB_CLIENT_ID=xxx
GITHUB_CLIENT_SECRET=xxx
GITHUB_REDIRECT_URI=https://openpanel-api-production-a48b.up.railway.app/oauth/github/callback

GOOGLE_CLIENT_ID=xxx
GOOGLE_CLIENT_SECRET=xxx
GOOGLE_REDIRECT_URI=https://openpanel-api-production-a48b.up.railway.app/oauth/google/callback

the key difference: the api url should point to the ACTUAL api service (openpanel-api-production-a48b.up.railway.app), not the dashboard url with /api appended. and the oauth callbacks go to the api service directly.

also update your github oauth app settings to use: https://openpanel-api-production-a48b.up.railway.app/oauth/github/callback

then restart both services


domehane

dashboard service environment variables:NEXT_PUBLIC_API_URL=https://openpanel-api-production-a48b.up.railway.app NEXT_PUBLIC_DASHBOARD_URL=https://openpanel-dashboard-production-b9b9.up.railway.appapi service environment variables:DASHBOARD_URL=https://openpanel-dashboard-production-b9b9.up.railway.app GITHUB_CLIENT_ID=xxx GITHUB_CLIENT_SECRET=xxx GITHUB_REDIRECT_URI=https://openpanel-api-production-a48b.up.railway.app/oauth/github/callback GOOGLE_CLIENT_ID=xxx GOOGLE_CLIENT_SECRET=xxx GOOGLE_REDIRECT_URI=https://openpanel-api-production-a48b.up.railway.app/oauth/google/callbackthe key difference: the api url should point to the ACTUAL api service (openpanel-api-production-a48b.up.railway.app), not the dashboard url with /api appended. and the oauth callbacks go to the api service directly.also update your github oauth app settings to use: https://openpanel-api-production-a48b.up.railway.app/oauth/github/callbackthen restart both services

bhaveshxrawat
HOBBYOP

2 months ago

Tried this too. Earlier it was taking me to github, but would give incorrect redirect uri, which I checked and seems correct. But now, it gives me 401, or CORS sometime. Is there any chance that the template might be rigged, or like I could have your in the dashboard itself, would eliminate this to and fro.


Loading...