From a3fd40da523ec1ed729f0fc3b499fe8998a2c06a Mon Sep 17 00:00:00 2001 From: Andrew Risse Date: Wed, 24 Jul 2024 08:50:19 -0600 Subject: [PATCH 1/2] init --- src/leapfrogai_ui/playwright.config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/leapfrogai_ui/playwright.config.ts b/src/leapfrogai_ui/playwright.config.ts index eb599e436..47f5dc2df 100644 --- a/src/leapfrogai_ui/playwright.config.ts +++ b/src/leapfrogai_ui/playwright.config.ts @@ -62,6 +62,8 @@ const devConfig: PlaywrightTestConfig = { port: 4173, stderr: 'pipe' }, + testDir: 'tests', + testMatch: /(.+\.)?(test|spec)\.[jt]s/, use: { baseURL: 'http://localhost:4173' } From fd1e3dd3148581307d9ccf021c94d4208d839c56 Mon Sep 17 00:00:00 2001 From: Andrew Risse <52644157+andrewrisse@users.noreply.github.com> Date: Thu, 25 Jul 2024 16:06:23 -0600 Subject: [PATCH 2/2] fix(ui): playwright login without keycloak (#833) * fix playwright login without keycloak --------- Co-authored-by: John Alling --- .github/workflows/e2e-shim.yaml | 4 -- .github/workflows/e2e.yaml | 12 ++--- src/leapfrogai_ui/README.md | 25 ++--------- src/leapfrogai_ui/package-lock.json | 36 --------------- src/leapfrogai_ui/package.json | 2 - src/leapfrogai_ui/src/lib/schemas/auth.ts | 6 +++ src/leapfrogai_ui/src/routes/+page.server.ts | 7 ++- src/leapfrogai_ui/src/routes/+page.svelte | 45 ++++++++++++++----- .../src/routes/auth/+page.server.ts | 45 ++++++++++++++++++- .../src/routes/auth/confirm/+server.ts | 31 +++++++++++++ .../src/routes/auth/error/+page.svelte | 1 + src/leapfrogai_ui/supabase/config.toml | 2 +- src/leapfrogai_ui/tests/global.setup.ts | 18 ++++---- 13 files changed, 140 insertions(+), 94 deletions(-) create mode 100644 src/leapfrogai_ui/src/lib/schemas/auth.ts create mode 100644 src/leapfrogai_ui/src/routes/auth/confirm/+server.ts create mode 100644 src/leapfrogai_ui/src/routes/auth/error/+page.svelte diff --git a/.github/workflows/e2e-shim.yaml b/.github/workflows/e2e-shim.yaml index 83899dcce..95ec044e1 100644 --- a/.github/workflows/e2e-shim.yaml +++ b/.github/workflows/e2e-shim.yaml @@ -23,10 +23,6 @@ on: # Catch pytests - "tests/pytest/**" - # Catch LFAI-UI things - - "src/leapfrogai_ui/**" - - "packages/ui/**" - # Catch changes to the repeater model - "packages/repeater/**" diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml index 1b3da9fc3..11ac50a61 100644 --- a/.github/workflows/e2e.yaml +++ b/.github/workflows/e2e.yaml @@ -32,10 +32,6 @@ on: # Ignore non e2e tests - "!tests/pytest/**" - # Ignore LFAI-UI things (for now?) - - "!src/leapfrogai_ui/**" - - "!packages/ui/**" - # Ignore changes to the repeater model - "!packages/repeater/**" @@ -129,11 +125,9 @@ jobs: # Run the playwright UI tests using the deployed Supabase endpoint - name: UI/API/Supabase E2E Playwright Tests - run: | - echo "skip" -# run: | -# cp src/leapfrogai_ui/.env.example src/leapfrogai_ui/.env -# TEST_ENV=CI PUBLIC_DISABLE_KEYCLOAK=true PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY npm --prefix src/leapfrogai_ui run test:integration:ci + run: | + cp src/leapfrogai_ui/.env.example src/leapfrogai_ui/.env + TEST_ENV=CI PUBLIC_DISABLE_KEYCLOAK=true PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY npm --prefix src/leapfrogai_ui run test:integration:ci # The UI can be removed after the Playwright tests are finished - name: Cleanup UI diff --git a/src/leapfrogai_ui/README.md b/src/leapfrogai_ui/README.md index 3ef22293c..88f6e3613 100644 --- a/src/leapfrogai_ui/README.md +++ b/src/leapfrogai_ui/README.md @@ -63,7 +63,7 @@ run the UI outside of UDS on localhost (e.g. for development work), there are so The Supabase UDS package has a ConfigMap called "supabase-auth-default". Add these values to the "GOTRUE_URI_ALLOW_LIST" (no spaces!). This variable may not exist and you will need to add it. Restart the supabase-auth pod after updating the config: - `http://localhost:5173/auth/callback,http://localhost:5173,http://localhost:4173/auth/callback,http://localhost:4173` + `http://localhost:5173/auth/callback,http://localhost:4173,http://localhost:4173/auth/callback` Note - Port 4173 is utilized by Playwright for E2E tests. You do not need this if you are not concerned about Playwright. ###### With Keycloak authentication @@ -180,7 +180,6 @@ The variables that had to be overridden were: ``` [auth] site_url = "http://localhost:5173" -additional_redirect_urls = ["http://localhost:5173/auth/callback"] [auth.external.keycloak] enabled = true @@ -197,9 +196,8 @@ Under a realm in Keycloak that is not the master realm (if using UDS, its "uds") 1. Create a new client (the client ID you use will be used in the env variables below) 2. Turn on "Client Authentication" 3. For "Valid redirect URLs", you need to put: - 1. `http://localhost:5173/auth/callback` (or the URL for the frontend app callback) - 2. `http://127.0.0.1:54321/auth/v1/callback` (or the URL for the Supabase callback, for locally running Supabase, DO NOT USE LOCALHOST, use 127.0.0.1) - 3. Put the same two URLs in for "Web Origins" + 1. `http://127.0.0.1:54321/auth/v1/callback` (or the URL for the Supabase callback, for locally running Supabase, DO NOT USE LOCALHOST, use 127.0.0.1) + 2. Put the same two URLs in for "Web Origins" 4. Copy the Client Secret under the Clients -> Credentials tab and use in the env variables below 5. You can create users under the "Users" tab and either have them verify their email (if you setup SMTP), or manually mark them as verified. @@ -256,23 +254,6 @@ variables will also not do anything because they are only used for locally runni You will instead need to modify the Auth provider settings directly in the Supabase dashboard and set the appropriate redirect URLs and client ID/secret. -If you use the component from @supabase/auth-ui-shared, you must ensure you supply provider and scope props: -ex: - -``` - -``` - If you do not use this component and need to login with a Supabase auth command directly, ensure you provide the "openid" scope with the options parameter. diff --git a/src/leapfrogai_ui/package-lock.json b/src/leapfrogai_ui/package-lock.json index 973169fe4..056e5c65b 100644 --- a/src/leapfrogai_ui/package-lock.json +++ b/src/leapfrogai_ui/package-lock.json @@ -14,8 +14,6 @@ "@carbon/layout": "^11.23.0", "@carbon/themes": "^11.37.0", "@carbon/type": "^11.28.0", - "@supabase/auth-ui-shared": "^0.1.8", - "@supabase/auth-ui-svelte": "^0.2.9", "@supabase/ssr": "^0.4.0", "@supabase/supabase-js": "^2.44.4", "@sveltejs/vite-plugin-svelte": "^3.1.1", @@ -2052,11 +2050,6 @@ "integrity": "sha512-lWb0Wiz8KZ9ip/dY1eUqt7fhTPmL24p6Hmv5Fd9pzlzAdw/YNcWZr+tiCT4oZ4Zyxzi9+1X4zv82o7jYvcFxYA==", "optional": true }, - "node_modules/@stitches/core": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz", - "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==" - }, "node_modules/@supabase/auth-js": { "version": "2.64.4", "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.64.4.tgz", @@ -2065,35 +2058,6 @@ "@supabase/node-fetch": "^2.6.14" } }, - "node_modules/@supabase/auth-ui-shared": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/@supabase/auth-ui-shared/-/auth-ui-shared-0.1.8.tgz", - "integrity": "sha512-ouQ0DjKcEFg+0gZigFIEgu01V3e6riGZPzgVD0MJsCBNsMsiDT74+GgCEIElMUpTGkwSja3xLwdFRFgMNFKcjg==", - "peerDependencies": { - "@supabase/supabase-js": "^2.21.0" - } - }, - "node_modules/@supabase/auth-ui-svelte": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/@supabase/auth-ui-svelte/-/auth-ui-svelte-0.2.9.tgz", - "integrity": "sha512-oc+SRS7ykc5FCssoqT0IiK5KF/obwnWko5ePaaMTDwUEQOavv+O8/poAh2lRTKRJCqJMqOOpMS/lUE6pHcma3g==", - "dependencies": { - "@stitches/core": "^1.2.8", - "@supabase/auth-ui-shared": "0.1.8", - "svelte": "^3.55.1" - }, - "peerDependencies": { - "@supabase/supabase-js": "^2.21.0" - } - }, - "node_modules/@supabase/auth-ui-svelte/node_modules/svelte": { - "version": "3.59.2", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz", - "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==", - "engines": { - "node": ">= 8" - } - }, "node_modules/@supabase/functions-js": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.1.tgz", diff --git a/src/leapfrogai_ui/package.json b/src/leapfrogai_ui/package.json index b4fd46228..4a41576e2 100644 --- a/src/leapfrogai_ui/package.json +++ b/src/leapfrogai_ui/package.json @@ -75,8 +75,6 @@ "@carbon/layout": "^11.23.0", "@carbon/themes": "^11.37.0", "@carbon/type": "^11.28.0", - "@supabase/auth-ui-shared": "^0.1.8", - "@supabase/auth-ui-svelte": "^0.2.9", "@supabase/ssr": "^0.4.0", "@supabase/supabase-js": "^2.44.4", "@sveltejs/vite-plugin-svelte": "^3.1.1", diff --git a/src/leapfrogai_ui/src/lib/schemas/auth.ts b/src/leapfrogai_ui/src/lib/schemas/auth.ts new file mode 100644 index 000000000..512801154 --- /dev/null +++ b/src/leapfrogai_ui/src/lib/schemas/auth.ts @@ -0,0 +1,6 @@ +import { object, string } from 'yup'; + +export const emailPasswordSchema = object({ + email: string().email().required(), + password: string().required() +}); diff --git a/src/leapfrogai_ui/src/routes/+page.server.ts b/src/leapfrogai_ui/src/routes/+page.server.ts index f598cdcda..d44e7310c 100644 --- a/src/leapfrogai_ui/src/routes/+page.server.ts +++ b/src/leapfrogai_ui/src/routes/+page.server.ts @@ -1,5 +1,10 @@ import type { PageServerLoad } from './$types'; +import { superValidate } from 'sveltekit-superforms'; +import { yup } from 'sveltekit-superforms/adapters'; +import { emailPasswordSchema } from '$schemas/auth'; export const load: PageServerLoad = async ({ url }) => { - return { url: url.origin }; + const form = await superValidate(yup(emailPasswordSchema)); + + return { url: url.origin, form }; }; diff --git a/src/leapfrogai_ui/src/routes/+page.svelte b/src/leapfrogai_ui/src/routes/+page.svelte index 454a33b46..7f1fe2ded 100644 --- a/src/leapfrogai_ui/src/routes/+page.svelte +++ b/src/leapfrogai_ui/src/routes/+page.svelte @@ -1,9 +1,8 @@ {#if env.PUBLIC_DISABLE_KEYCLOAK === 'true'} - +
+
+ + + + + + + + {#if $errors.email} + {$errors.email} + {/if} +
+
+