Merge pull request #376 from fractal-analytics-platform/login-improvements

Login improvements

Author: tcompa

.env

@@ -0,0 +1,16 @@
+FRACTAL_SERVER_HOST=http://localhost:8000
+
+# AUTH COOKIE
+AUTH_COOKIE_NAME=fastapiusersauth
+AUTH_COOKIE_SECURE=false
+# remember to set this in production
+AUTH_COOKIE_DOMAIN=
+AUTH_COOKIE_PATH=/
+AUTH_COOKIE_MAX_AGE=1800
+AUTH_COOKIE_SAME_SITE=lax
+AUTH_COOKIE_HTTP_ONLY=true
+
+# PUBLIC VARIABLES (accessible from client side)
+PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=help@localhost
+PUBLIC_UPDATE_JOBS_INTERVAL=3000
+PUBLIC_OAUTH_CLIENT_NAME=

.env.development

@@ -3,7 +3,7 @@ FRACTAL_SERVER_HOST=http://localhost:8000
 # AUTH COOKIE
 AUTH_COOKIE_NAME=fastapiusersauth
 AUTH_COOKIE_SECURE=false
-AUTH_COOKIE_DOMAIN=localhost
+AUTH_COOKIE_DOMAIN=
 AUTH_COOKIE_PATH=/
 AUTH_COOKIE_MAX_AGE=86400
 AUTH_COOKIE_SAME_SITE=lax
@@ -12,4 +12,4 @@ AUTH_COOKIE_HTTP_ONLY=true
 # PUBLIC VARIABLES (accessible from client side)
 PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=help@localhost
 PUBLIC_UPDATE_JOBS_INTERVAL=3000
-#PUBLIC_OAUTH_CLIENT_NAME=github
+PUBLIC_OAUTH_CLIENT_NAME=

.github/workflows/lint_and_build.yaml

@@ -37,9 +37,10 @@ jobs:
           FRACTAL_SERVER_HOST: http://localhost:8000
           AUTH_COOKIE_NAME: fastapiusersauth
           AUTH_COOKIE_SECURE: false
-          AUTH_COOKIE_DOMAIN: localhost
+          AUTH_COOKIE_DOMAIN:
           AUTH_COOKIE_PATH: /
           AUTH_COOKIE_MAX_AGE: 1800
           AUTH_COOKIE_SAME_SITE: lax
           AUTH_COOKIE_HTTP_ONLY: true
+          PUBLIC_OAUTH_CLIENT_NAME:
         run: npm run build

.gitignore

@@ -3,8 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
-.env
-.env.*
+.env.*local
 !.env.example
 .idea
 *.bak

CHANGELOG.md

@@ -1,5 +1,12 @@
 *Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
 
+# Unreleased
+
+* Made PUBLIC_OAUTH_CLIENT_NAME static (\#376).
+* Added help messages to user registration (\#376).
+* Made AUTH_COOKIE_DOMAIN optional (\#376).
+* Fixed hardcoded OAuth2 variable (\#376).
+
 # 0.7.1
 
 * Auto-refresh of tasks table when a tasks collection completes successfully (\#364).

docs/oauth2.md

@@ -34,8 +34,3 @@ AUTH_COOKIE_DOMAIN=127.0.0.1
 PUBLIC_OAUTH_CLIENT_NAME=github
 # [all other variables]
 ```
-
-> A typical gotcha: if there is a mismatch between the cookie domain and the
-> URL you are using (e.g. one points to localhost and the other one to
-> 127.0.0.1), then the cookie won't be set and this will fail silently,
-> therefore likely triggering other unexpected behaviors.

docs/quickstart.md

@@ -43,34 +43,48 @@ FRACTAL_SERVER_HOST=http://localhost:8000
 # AUTH COOKIE
 AUTH_COOKIE_NAME=fastapiusersauth
 AUTH_COOKIE_SECURE=false
-AUTH_COOKIE_DOMAIN=localhost
+# remember to set this in production
+AUTH_COOKIE_DOMAIN=
 AUTH_COOKIE_PATH=/
 AUTH_COOKIE_MAX_AGE=1800
 AUTH_COOKIE_SAME_SITE=lax
 AUTH_COOKIE_HTTP_ONLY=true
 
 # PUBLIC VARIABLES (accessible from client side)
 PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=help@localhost
+PUBLIC_UPDATE_JOBS_INTERVAL=3000
+PUBLIC_OAUTH_CLIENT_NAME=
 ```
 
+You can also add your customizations in a file named `.env.local` or `.env.development.local` to avoid writing on env files that are under version control.
 
 ## Web client startup
 
-Run the client application via
-```bash
-npm run dev -- --open
-```
-
-The application is now running at `http://localhost:5173`.
-
-An alternative way to start fractal-web is
+For testing and production, start fractal-web executing
 ```
 npm run build    # corresponding to `vite build`, which creates a `build` folder
 ORIGIN=http://localhost:5173 PORT=5173 node build
 ```
-note that the `node` command relies on some environment variables, and
+
+The application is now running at `http://localhost:5173`.
+
+Note that the `node` command relies on some environment variables, and
 especially on `ORIGIN`:
 > HTTP doesn't give SvelteKit a reliable way to know the URL that is currently
 > being requested. The simplest way to tell SvelteKit where the app is being
 > served is to set the `ORIGIN` environment variable.
 > (https://kit.svelte.dev/docs/adapter-node#environment-variables-origin-protocolheader-and-hostheader)
+
+For development, run the client application via
+```bash
+npm run dev
+```
+
+> A typical gotcha: if there is a mismatch between the cookie domain and the
+> URL you are using (e.g. one points to localhost and the other one to
+> 127.0.0.1), then the cookie won't be set and this will fail silently,
+> therefore likely triggering other unexpected behaviors.
+> If you leave the `AUTH_COOKIE_DOMAIN` empty, the cookie domain will be
+> inferred from the HTTP call. This is useful to avoid domain mismatch issues
+> during testing and development, but in production is suggested to set it as
+> the name of the domain where the fractal-web server is running.

playwright.config.js

@@ -38,7 +38,7 @@ export default defineConfig({
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 1.4.0',
+			command: './tests/start-test-server.sh 1.4.1a2',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',

src/lib/components/admin/UserEditor.svelte

@@ -142,23 +142,6 @@
 				<span class="invalid-feedback">{validationErrors['email']}</span>
 			</div>
 		</div>
-		<div class="row mb-3 has-validation">
-			<label for="username" class="col-sm-3 col-form-label text-end">
-				<strong>Username</strong>
-			</label>
-			<div class="col-sm-9">
-				<input
-					autocomplete="off"
-					aria-autocomplete="none"
-					type="text"
-					class="form-control"
-					id="username"
-					class:is-invalid={formSubmitted && validationErrors['username']}
-					bind:value={user.username}
-				/>
-				<span class="invalid-feedback">{validationErrors['username']}</span>
-			</div>
-		</div>
 		{#if user.id && user.id !== $page.data.userInfo.id}
 			<div class="row mb-3">
 				<div class="col-sm-9 offset-sm-3">
@@ -213,6 +196,7 @@
 					bind:value={password}
 					class:is-invalid={formSubmitted && validationErrors['password']}
 				/>
+				<span class="form-text">Create a new password for this Fractal user</span>
 				<span class="invalid-feedback">{validationErrors['password']}</span>
 			</div>
 		</div>
@@ -233,7 +217,7 @@
 		</div>
 		<div class="row mb-3 has-validation">
 			<label for="slurmUser" class="col-sm-3 col-form-label text-end">
-				<strong>Slurm user</strong>
+				<strong>SLURM user</strong>
 			</label>
 			<div class="col-sm-9">
 				<input
@@ -243,9 +227,33 @@
 					bind:value={user.slurm_user}
 					class:is-invalid={formSubmitted && validationErrors['slurm_user']}
 				/>
+				<div class="form-text">
+					The user who will be impersonated by Fractal when running SLURM jobs
+				</div>
 				<span class="invalid-feedback">{validationErrors['slurm_user']}</span>
 			</div>
 		</div>
+		<div class="row mb-3 has-validation">
+			<label for="username" class="col-sm-3 col-form-label text-end">
+				<strong>Username</strong>
+			</label>
+			<div class="col-sm-9">
+				<input
+					autocomplete="off"
+					aria-autocomplete="none"
+					type="text"
+					class="form-control"
+					id="username"
+					class:is-invalid={formSubmitted && validationErrors['username']}
+					bind:value={user.username}
+				/>
+				<span class="form-text">
+					Optional property (useful if the user creates their own tasks), not required if the SLURM
+					user is set
+				</span>
+				<span class="invalid-feedback">{validationErrors['username']}</span>
+			</div>
+		</div>
 		<div class="row mb-3 has-validation">
 			<label for="cacheDir" class="col-sm-3 col-form-label text-end">
 				<strong>Cache dir</strong>
@@ -258,6 +266,9 @@
 					bind:value={user.cache_dir}
 					class:is-invalid={formSubmitted && validationErrors['cache_dir']}
 				/>
+				<div class="form-text">
+					Absolute path to a user-owned folder that will be used as a cache for job-related files
+				</div>
 				<span class="invalid-feedback">{validationErrors['cache_dir']}</span>
 			</div>
 		</div>

src/routes/auth/login/+page.server.js

@@ -18,7 +18,7 @@ export const actions = {
 			return fail(400, { invalidMessage: 'Invalid credentials', invalid: true });
 		}
 
-		setCookieFromToken(cookies, authData.access_token);
+		setCookieFromToken(request, cookies, authData.access_token);
 		throw redirect(302, '/projects');
 	}
 };