Enable running SpiffWorkflow in GitHub Codespaces #2100
Comments
|
(Sorry, I had to take that repository private, but see discussion in the SpiffWorkflow Discord #help channel from Friday!) |
|
[For those just joining us: We need to get path-based routing working in Docker Compose as a prerequisite to having SpiffWorkflow functional in GitHub Codespaces.] Thanks for the fix in #2101, @burnettk! I thought this might make path-based routing work in the docker-compose scenario, but I'm still not able to login. This time with a different message though, so at least we know that PR addressed the issuer problem! From {"error_code":"invalid_login","message":"Login failed. Please try again","status_code":401}When I UUdecode the state, I see: {
'redirect_url': 'http://localhost:8003/',
'authentication_identifier': 'default'
}It seems like maybe there should be a token in there...? Or maybe those single-quotes are a problem...? Headers: Here's what I have in my services:
spiffworkflow-frontend:
environment:
- SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_APP_ROUTING_STRATEGY=path_based
- SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_BACKEND_BASE_URL=http://localhost:8003/api
spiffworkflow-backend:
environment:
# browser
- SPIFFWORKFLOW_BACKEND_URL_FOR_FRONTEND=http://localhost:8003
- SPIFFWORKFLOW_BACKEND_URL=http://localhost:8003/api
- SPIFFWORKFLOW_BACKEND_OPEN_ID_SERVER_URL=http://localhost:8003/api/openid
# internal
- SPIFFWORKFLOW_BACKEND_OPEN_ID_SERVER_INTERNAL_URL=http://spiffworkflow-backend:8000/api/openid
- SPIFFWORKFLOW_BACKEND_OPEN_ID_INTERNAL_URL_IS_VALID_ISSUER=true
- SPIFFWORKFLOW_BACKEND_CONNECTOR_PROXY_URL=http://spiffworkflow-connector:8004
- SPIFFWORKFLOW_BACKEND_WSGI_PATH_PREFIX=/api
# All of these options for reaching the "internal" OpenID URL work from inside the container:
#
# Via the compose host to the proxy's mapped port...
# curl http://host.docker.internal:8003/api/openid/.well-known/openid-configuration
# Via compose DNS to the proxy service's internal port...
# curl http://spiffworkflow-proxy:8003/api/openid/.well-known/openid-configuration
# Directly within the container itself...
# curl http://localhost:8000/api/openid/.well-known/openid-configuration
# Via compose DNS to our own internal port
# curl http://spiffworkflow-backend:8000/api/openid/.well-known/openid-configuration
healthcheck:
test: "curl localhost:${SPIFF_BACKEND_PORT:-8000}/api/v1.0/status --fail"
spiffworkflow-proxy:
container_name: proxy
image: nginx:latest
ports:
- "8003:8003"
volumes:
- .devcontainer/nginx.conf:/etc/nginx/conf.d/default.conf
depends_on:
- spiffworkflow-frontend
- spiffworkflow-backendAnd here's the content of that |
|
I grabbed the docker-compose.yml file from spiff-arena main, updated the backend image in there to main-latest, used the above .devcontainer/devcontainer-docker-compose.yml, confirmed that the nginx file contents were the same as above, and ran |
|
Well sonuva...! Since I'm not at home I just tried it on another machine just now and it worked fine! Back to trying it on Codespaces now... |
|
OK, well, it wants to work, but I'm still stuck. The backend, in the GitHub Codespaces scenario, has this env: "Env": [
"SPIFFWORKFLOW_BACKEND_URL_FOR_FRONTEND=https://effective-space-telegram-wq6j9wq7hvj65-8003.app.github.dev",
"SPIFFWORKFLOW_BACKEND_PORT=8000",
"SPIFFWORKFLOW_BACKEND_OPEN_ID_CLIENT_ID=spiffworkflow-backend",
"SPIFFWORKFLOW_BACKEND_CONNECTOR_PROXY_URL=http://spiffworkflow-connector:8004",
"SPIFFWORKFLOW_BACKEND_OPEN_ID_CLIENT_SECRET_KEY=my_open_id_secret_key",
"SPIFFWORKFLOW_BACKEND_UPGRADE_DB=true",
"SPIFFWORKFLOW_BACKEND_WSGI_PATH_PREFIX=/api",
"SPIFFWORKFLOW_BACKEND_OPEN_ID_INTERNAL_URL_IS_VALID_ISSUER=true",
"SPIFFWORKFLOW_BACKEND_OPEN_ID_SERVER_URL=https://effective-space-telegram-wq6j9wq7hvj65-8003.app.github.dev/api/openid",
"SPIFFWORKFLOW_BACKEND_BPMN_SPEC_ABSOLUTE_DIR=/app/process_models",
"SPIFFWORKFLOW_BACKEND_URL=https://effective-space-telegram-wq6j9wq7hvj65-8003.app.github.dev/api",
"SPIFFWORKFLOW_BACKEND_OPEN_ID_SERVER_INTERNAL_URL=http://spiffworkflow-backend:8000/api/openid",
"SPIFFWORKFLOW_BACKEND_DATABASE_TYPE=sqlite",
"FLASK_DEBUG=0",
"SPIFFWORKFLOW_BACKEND_LOG_LEVEL=DEBUG",
"FLASK_SESSION_SECRET_KEY=super_secret_key",
"SPIFFWORKFLOW_BACKEND_DATABASE_URI=sqlite:////app/db_volume/db.sqlite3",
"SPIFFWORKFLOW_BACKEND_RUN_BACKGROUND_SCHEDULER_IN_CREATE_APP=true",
"SPIFFWORKFLOW_BACKEND_PERMISSIONS_FILE_NAME=example.yml",
"SPIFFWORKFLOW_BACKEND_ENV=local_docker",
"SPIFFWORKFLOW_BACKEND_LOAD_FIXTURE_DATA=false",
"PATH=/app/venv/bin:/usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
"LANG=C.UTF-8",
"GPG_KEY=7169605F62C751356D054A26A821E680E5FA6305",
"PYTHON_VERSION=3.12.1",
"PYTHON_PIP_VERSION=23.2.1",
"PYTHON_GET_PIP_URL=https://github.com/pypa/get-pip/raw/049c52c665e8c5fd1751f942316e0a5c777d304f/public/get-pip.py",
"PYTHON_GET_PIP_SHA256=7cfd4bdc4d475ea971f1c0710a5953bcc704d171f83c797b9529d9974502fcc6",
"VIRTUAL_ENV=/app/venv"
]And the frontend has this env: "Env": [
"APPLICATION_ROOT=/",
"PORT0=8001",
"SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_APP_ROUTING_STRATEGY=path_based",
"SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_BACKEND_BASE_URL=https://effective-space-telegram-wq6j9wq7hvj65-8003.app.github.dev/api",
"PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
"NGINX_VERSION=1.25.4",
"NJS_VERSION=0.8.3",
"PKG_RELEASE=1~bookworm"
],And yet the backend generates this HTML when accessed via the GitHub Codespaces domain that port-forwards to the nginx proxy on port 8003 (note all the references to <html lang="en"><head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8003/api/openid/static/login.css">
</head>
<body>
<header>
<img class="logo_small" src="http://localhost:8003/api/openid/static/logo_small.png" alt="Small SpiffWorkflow logo">
</header>
<h2>Login</h2>
<div class="error"></div>
<div class="login">
<form id="login" method="post" action="http://localhost:8003/api/openid/form_submit">
<p>
<b>Important:</b> This login form is for demonstration purposes only.
In production systems you should be using a real Open ID System.
</p>
<input type="text" class="cds--text-input" name="Uname" id="username" placeholder="Username">
<br><br>
<input type="Password" class="cds--text-input" name="Pass" id="password" placeholder="Password">
<br><br>
<input type="hidden" name="state" value="eydyZWRpcmVjdF91cmwnOiAnaHR0cHM6Ly9lZmZlY3RpdmUtc3BhY2UtdGVsZWdyYW0td3E2ajl3cTdodmo2NS04MDAzLmFwcC5naXRodWIuZGV2LycsICdhdXRoZW50aWNhdGlvbl9pZGVudGlmaWVyJzogJ2RlZmF1bHQnfQ==">
<input type="hidden" name="response_type" value="code">
<input type="hidden" name="client_id" value="spiffworkflow-backend">
<input type="hidden" name="scope" value="openid profile email">
<input type="hidden" name="redirect_uri" value="http://localhost:8003/api/v1.0/login_return">
<input type="submit" name="log" class="cds--btn cds--btn--primary" id="spiff-login-button" value="Log In">
<br><br>
<!-- should maybe add this stuff in eventually, but this is just for testing.
<input type="checkbox" id="check">
<span>Remember me</span>
<br><br>
Forgot <a href="#">Password</a>
-->
</form>
</div>
<div style="color-scheme: unset; forced-color-adjust: unset; mask: unset; math-depth: unset; position: absolute; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; inset-area: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; animation-composition: unset; animation: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-start-end-radius: unset; border-start-start-radius: unset; bottom: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-color: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: block; dominant-baseline: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interpolate-size: unset; isolation: unset; left: 0px; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-clip-margin: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; quotes: unset; r: unset; resize: unset; right: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; white-space: unset; timeline-scope: unset; top: 0px; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-name: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-print-color-adjust: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset;"></div></body></html>I've checked inside all the containers and can't find I'm thinking maybe this is an artifact of how GitHub Codespaces does port-forwarding. I suspect it terminates |
|
I was also screwing with Codespaces. I think it was generating correct form action urls (though that mystery localhost:8003 sounds really familiar from the other day) and it failed on the token validation, if I recall correctly. I didn’t quite have time to post the source, but I’ll probably create a three file repo tomorrow if you haven’t already nailed it. This is going to be really neat. |
|
This is what the relevant portion of my spiffworkflow-frontend:
environment:
- SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_APP_ROUTING_STRATEGY=path_based
- SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_BACKEND_BASE_URL=${CODESPACE_URL:-http://localhost:8003}/api
spiffworkflow-backend:
environment:
# CODESPACE_URL is conditionally set in ../.env
# browser
- SPIFFWORKFLOW_BACKEND_URL=${CODESPACE_URL:-http://localhost:8003}/api
- SPIFFWORKFLOW_BACKEND_URL_FOR_FRONTEND=${CODESPACE_URL:-http://localhost:8003}
- SPIFFWORKFLOW_BACKEND_OPEN_ID_SERVER_URL=${CODESPACE_URL:-http://localhost:8003}/api/openid
# internal
- SPIFFWORKFLOW_BACKEND_OPEN_ID_SERVER_INTERNAL_URL=http://spiffworkflow-backend:8000/api/openid
- SPIFFWORKFLOW_BACKEND_OPEN_ID_INTERNAL_URL_IS_VALID_ISSUER=true
- SPIFFWORKFLOW_BACKEND_CONNECTOR_PROXY_URL=http://spiffworkflow-connector:8004
- SPIFFWORKFLOW_BACKEND_WSGI_PATH_PREFIX=/api And in I've verified that those env vars are being set correctly. For example in the backend: # env | grep SPIFFWORKFLOW_BACKEND
SPIFFWORKFLOW_BACKEND_LOG_LEVEL=DEBUG
SPIFFWORKFLOW_BACKEND_URL_FOR_FRONTEND=https://effective-space-telegram-wq6j9wq7hvj65-8003.app.github.dev
SPIFFWORKFLOW_BACKEND_WSGI_PATH_PREFIX=/api
SPIFFWORKFLOW_BACKEND_DATABASE_URI=sqlite:////app/db_volume/db.sqlite3
SPIFFWORKFLOW_BACKEND_OPEN_ID_SERVER_INTERNAL_URL=http://spiffworkflow-backend:8000/api/openid
SPIFFWORKFLOW_BACKEND_UPGRADE_DB=true
SPIFFWORKFLOW_BACKEND_ENV=local_docker
SPIFFWORKFLOW_BACKEND_CONNECTOR_PROXY_URL=http://spiffworkflow-connector:8004
SPIFFWORKFLOW_BACKEND_URL=https://effective-space-telegram-wq6j9wq7hvj65-8003.app.github.dev/api
SPIFFWORKFLOW_BACKEND_LOAD_FIXTURE_DATA=false
SPIFFWORKFLOW_BACKEND_OPEN_ID_SERVER_URL=https://effective-space-telegram-wq6j9wq7hvj65-8003.app.github.dev/api/openid
SPIFFWORKFLOW_BACKEND_PERMISSIONS_FILE_NAME=example.yml
SPIFFWORKFLOW_BACKEND_OPEN_ID_CLIENT_SECRET_KEY=my_open_id_secret_key
SPIFFWORKFLOW_BACKEND_DATABASE_TYPE=sqlite
SPIFFWORKFLOW_BACKEND_BPMN_SPEC_ABSOLUTE_DIR=/app/process_models
SPIFFWORKFLOW_BACKEND_PORT=8000
SPIFFWORKFLOW_BACKEND_OPEN_ID_INTERNAL_URL_IS_VALID_ISSUER=true
SPIFFWORKFLOW_BACKEND_OPEN_ID_CLIENT_ID=spiffworkflow-backend
SPIFFWORKFLOW_BACKEND_RUN_BACKGROUND_SCHEDULER_IN_CREATE_APP=true |
|
that's a nice refactor with getting the full CODESPACE_URL set up in the .env. here's the repo without that change, where i tried to give you write access: https://github.com/sartography/spiff-codespaces. once the codespace fires up, it's the same |
|
I got the same result when I started a Codespace in your I tried editing the HTML in Web Inspector to replace those with the actual Codespace URL (underlined below), submitted the form, and I was logged in! 🥳 Still stumped as to what is causing the |
|
that's interesting. i do not get that localhost:8003 behavior. sorry i keep saying that. :D i went to https://github.com/sartography/spiff-codespaces and created a codespace from main, and it gets this (if it's still up): https://friendly-zebra-w9q4vx463q6p-8003.app.github.dev/ css works, but sign in does not. i actually sort of prefer your issue. if you had tested with the sartography/spiff-codespaces repo, maybe it was before this commit? i'm pretty sure i saw the bad localhost:8003 in the old commit, as one would expect since it didn't have the GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN references. |
|
No, my checkout is definitely up to date. Here's where I've gotten to: I changed my When I did that, I started seeing references to I ensured I was setting I pushed up the changes that I'm confident in. |
|
@jasquat and i saw a codespace work (getting a successful sign in) using this configuration:
|
|
That's awesome! I'll give it a try later today. Did you actually need to wind back the nginx headers that were added for this to work? I had put them there following the directions in the Flask docs. |
|
Yes, we did need to get rid of some of those headers. Just commenting out |
|
I have an idea why... Your example is not setting the proxy depth explicitly, just using the default value of 1. But I think that there's two levels of proxy happening: A proxy for the codespace domain, and the nginx proxy. I'm going to experiment, but I suspect that if I set |
|
Scratch that, Codespaces is doing an actual port-forward, so there won't be a proxy in the http sense there. Oh well, I won't question that it works and will commit the working example in |
Ideally we'd have an easy way for people without Docker installed locally to try SpiffWorkflow in GitHub Codespaces and make PRs to process models.
(Previous discussion about the specific implementation has moved to https://github.com/mogul/ceq-process-models/pull/5, with a ton of rebasing.)
The text was updated successfully, but these errors were encountered: