Remix example #443

IgnisDa · 2022-12-08T10:14:31Z

As discussed in #429, here is a functioning example for the remix framework. It features server side authentication and works with javascript disabled (except the login route of course).

IgnisDa · 2022-12-13T03:04:26Z

@lfleischmann Could you please review this?

lfleischmann · 2022-12-16T09:51:45Z

@lfleischmann Could you please review this?

Hi @IgnisDa,

Yes, finally found time to get my eyes on this, sorry for the delay. And: thanks for taking the time to contribute the example!

Currently, I'm having problems with running the example in our compose cluster (I use the command you added to the "examples" directory readme). After a successful registration I get an error when loading the todo route:

SyntaxError: Unexpected token U in JSON at position 0
    at JSON.parse (<anonymous>)
    at Response.json (/app/node_modules/@remix-run/web-fetch/src/body.js:162:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at loader2 (/app/app/routes/todo.tsx:26:18)
    at Object.callRouteLoaderRR (/app/node_modules/@remix-run/server-runtime/dist/data.js:41:16)
    at callLoaderOrAction (/app/node_modules/@remix-run/router/router.ts:2638:14)
    at async Promise.all (index 0)
    at loadRouteData (/app/node_modules/@remix-run/router/router.ts:2306:19)
    at queryImpl (/app/node_modules/@remix-run/router/router.ts:2110:20)
    at Object.queryRoute (/app/node_modules/@remix-run/router/router.ts:2061:18)

This does not happen in a non-docker context but I am not entirely sure why right now. I am also having trouble to properly debug the remix application inside a container (any tips?).

I also noticed the remix application (remix dev server?) continuously makes websocket requests to the express app at port 8002 in the compose context. This also does not happen when running the services/applications in a non-docker context. Any idea why this happens?

IgnisDa · 2022-12-17T00:49:12Z

@lfleischmann I made some changes to the container. Now the running app uses the build output rather than the default remix dev server. So no WS connections are made any more.

IgnisDa · 2022-12-23T18:33:56Z

@lfleischmann Could you please take a look?

lfleischmann

Hi @IgnisDa,

again, sorry for the delay, only just now getting back in the game after the holidays...

App runs fine now in the compose context, thanks. Just noticed one other thing: sometimes the web component does not properly render in its entirety/styles are not applied properly (see screenshot below for an example from Safari) and I have to reload to get a proper rerender. I can't reliably reproduce this though, sometimes it happens, sometimes it does not. So far seen in Chrome, Edge and Safari. I also checked whether this
is influenced by the shadow DOM usage (i.e. the shadow option on component registration) but it happens both with and without shadow DOM. Do you have any ideas why this is happening/how to fix this?

examples/remix/app/routes/_api/logout.tsx

IgnisDa · 2023-01-11T12:40:39Z

I am not sure about the CSS thing, but I have encountered it too. I think it is related to remix-run/remix#2570 but can not be sure. It does not happen in incognito windows (i.e. when browser extensions are disabled). I have not been able to reproduce it reliably enough to be actually fix it.

lfleischmann · 2023-01-13T18:22:49Z

I am not sure about the CSS thing, but I have encountered it too. I think it is related to remix-run/remix#2570 but can not be sure. It does not happen in incognito windows (i.e. when browser extensions are disabled). I have not been able to reproduce it reliably enough to be actually fix it.

Alright, thanks. We would like to investigate a bit further to find out what exactly causes the issue and how we can solve it to ensure the component is always rendered properly. It does not have top priority right now though, so I can't say how soon we are gonna tackle this.

IgnisDa · 2023-01-15T01:57:48Z

Okay makes sense. Will this PR be merged till then?

like-a-bause · 2023-01-17T07:50:02Z

Hey,
thanks for your effort. Unfortunately a sometimes working example does not pass our Quality Standards. Until this issue is resolved we won't merge this PR.

IgnisDa · 2023-01-26T04:44:44Z

@like-a-bause @lfleischmann I updated the remix packages, and I did not encounter the above bug anymore. Could you give it another spin and see if the problem persists?

cayblood · 2023-02-04T05:52:56Z

@IgnisDa OK, after updating REMIX_APP_TODO_API in .env to 8001 instead of 8002, the connection refused error is gone, but I'm still getting an error like this after generating a passkey and supplying the emailed code:

cayblood · 2023-02-04T17:26:24Z

@IgnisDa the error apparently is happening in /webauthn/registration/finalize:

{"time":"2023-02-04T17:24:28.338156423Z","time_unix":"1675531468","id":"1L4QmqpiJAnqjqTiVruGGleFk8waKQLh","remote_ip":"172.19.0.1","host":"localhost:8000","method":"POST","uri":"/webauthn/registration/finalize","user_agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36","status":400,"error":"failed to validate attestation","latency":7451459,"latency_human":"7.451459ms","bytes_in":742,"bytes_out":56,"referer":"http://localhost:64906/"}

I'll try to debug further.

IgnisDa · 2023-02-04T17:27:31Z

@cayblood Can you share your .env file? I will try to debug as well.

cayblood · 2023-02-04T17:28:14Z

@IgnisDa Here is my .env:

REMIX_APP_HANKO_API=http://localhost:8000
REMIX_APP_TODO_API=http://localhost:8001

IgnisDa · 2023-02-04T17:29:29Z

Here is mine

REMIX_APP_HANKO_API=http://localhost:8000
REMIX_APP_TODO_API=http://localhost:8002

cayblood · 2023-02-04T17:32:03Z

@IgnisDa Right. I had to change REMIX_APP_TODO_API to get the app to even kind of work. Prior to that I was getting a connection refused error as I commented earlier.

cayblood · 2023-02-04T17:34:37Z

@IgnisDa By the way, I'm also getting intermittent CSS errors. Sometimes I see:

And other times I see:

I can keep refreshing and randomly see one of those two results.

IgnisDa · 2023-02-04T17:36:19Z

Yep this is the reason why this PR has not been merged yet. Do you have the latest commit checked out?

cayblood · 2023-02-04T17:51:14Z

@IgnisDa Looks like a change just came in today. I was testing this last night. I've updated to the latest.

I did finally get it to work, but by ignoring the instructions in the README. Rather than running npm run dev, I noticed that the docker compose step already started a remix app on http://localhost:8888. I was able to browse to that address and successfully authenticate with the remix app. Running npm run dev ended up starting an app at a very high random local port number, like 63xxx. Browsing there presented me with the login prompt but always resulted in a failure to authenticate at the final step.

IgnisDa · 2023-02-04T17:54:27Z

Yep the docker-compose.yml file starts up all the required servers. After it is up and running (it takes the hanko backend about 30s to boot up), you can go to http://localhost:8888 to visit the remix app.

cayblood · 2023-02-04T19:10:49Z

@IgnisDa I would recommend updating the README inside the remix folder so that it accurately explains how to start and access the app.

cayblood · 2023-02-04T19:42:49Z

@IgnisDa looks like when remix-run/remix#4175 gets resolved the CSS problem will probably go away.

Update: that issue links to this one: facebook/react#24430. Seems like it is a problem with React 18 that has been experienced in other frameworks besides just Remix. Doesn't look like that is a high priority for the React team, based on how long the issue has been reported without a response. Might be worth pursuing a workaround if possible.

IgnisDa · 2023-02-05T03:30:36Z

I would recommend updating the README inside the remix folder so that it accurately explains how to start and access the app.

@cayblood Thanks, I updated the instructions.

Might be worth pursuing a workaround if possible.

I am aware of these issues, but have not been able to find any workarounds yet.

cayblood · 2023-02-10T00:28:23Z

@IgnisDa I found a potential workaround described here. Looking into it.

cayblood · 2023-02-10T01:07:18Z

@IgnisDa I submitted a PR to your fork with an easy workaround that falls back to React 17 functionality. I'll let you know if I come up with something better.

IgnisDa · 2023-02-14T10:47:43Z

@lfleischmann @like-a-bause With @cayblood's help, we got the example fully working. I think it can be merged now.

lfleischmann · 2023-02-14T12:00:34Z

examples/remix/app/lib/hanko.client.ts

+// `.client.ts` files are only supposed to run on the client. I could not find this
+// documented on the remix docs but someone on the remix discord told me this is how it is
+// supposed to work.
+import { register } from '@teamhanko/hanko-elements';


With this, the remix build command currently results in: "ERROR: Could not resolve "@teamhanko/hanko-elements"

Reverting to @teamhanko/hanko-elements@0.0.17-alpha requires the "old" import path for the register function, i.e. import { register } from '@teamhanko/hanko-elements/hanko-auth'.

@IgnisDa I just submitted a PR for this fix plus another compatibility issue I found with the ClientOnly component.

@IgnisDa @lfleischmann replied below before my fix was merged into this PR. I think their concerns would go away and we could finally get this merged with that fix. That said, we should probably update to 0.5.0, now that it has been released.

I added you as a collaborator in my repository in case you need to make any changes.

lfleischmann · 2023-02-15T17:03:18Z

@lfleischmann @like-a-bause With @cayblood's help, we got the example fully working. I think it can be merged now.

Hi @IgnisDa, @cayblood, once again: thank your for your time and effort! Unfortunately, we're still seeing the problem with unapplied styles in Safari, so we're holding off the merge for now until we're sure the example works across browsers.

IgnisDa added 10 commits December 8, 2022 09:22

feat(remix): add initial files for example

c7804c6

ci(remix): add deployment configs

e5384fb

feat(remix): add basic login example

936d88b

feat(remix-eg): add redirect after auth

ee4dc4b

feat(remix-example): add basic todo page

931a872

docs(remix-eg): add comment explaining func

a26de9e

feat(remix-eg): allow deleting and updating todos

2fb22cb

refactor(remix-eg): use remix-utils methods

e3c9d2a

style(remix-eg): remove useless braces

7d82abc

fix(remix-eg): set correct key for todo list

fab4452

FlxMgdnz requested a review from lfleischmann December 8, 2022 10:29

IgnisDa added 2 commits December 17, 2022 06:14

ci: run built app in docker container

64d7ddd

fix(example/remix): use correct env vars

d162580

IgnisDa and others added 2 commits December 17, 2022 06:19

Merge branch 'main' of https://github.com/teamhanko/hanko into remix

0bbe644

Merge branch 'main' into remix

e89ae54

lfleischmann reviewed Jan 11, 2023

View reviewed changes

examples/remix/app/routes/_api/logout.tsx Show resolved Hide resolved

IgnisDa added 2 commits January 26, 2023 10:12

build: update remix versions

559c595

style(remix-example): fix eslint error

413e7b9

IgnisDa and others added 3 commits January 26, 2023 10:14

Merge branch 'main' into remix

73cea86

build(remix-example): update elements version

6e4d8bb

Merge branch 'main' into remix

8ba200b

Merge branch 'main' into remix

7c1561f

docs(examples): add correct instructions for running server.

d086400

Workaround for facebook/react/issues/24430

b552ce5

IgnisDa and others added 4 commits February 10, 2023 08:30

Merge branch 'main' into remix

b54f399

Workaround for React 18 hydration issues

aae5471

Merge branch 'IgnisDa:remix' into remix

c3efbbd

build: revert packages to a version that works

279de09

IgnisDa requested a review from lfleischmann February 14, 2023 10:46

IgnisDa and others added 2 commits February 15, 2023 12:15

build(examples/remix): revert frontend sdk to latest version

f4e7054

Merge branch 'main' into remix

dd26cae

lfleischmann reviewed Feb 15, 2023

View reviewed changes

FlxMgdnz assigned lfleischmann Mar 17, 2023

IgnisDa closed this by deleting the head repository May 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remix example #443

Remix example #443

IgnisDa commented Dec 8, 2022

IgnisDa commented Dec 13, 2022 •

edited

lfleischmann commented Dec 16, 2022 •

edited

IgnisDa commented Dec 17, 2022

IgnisDa commented Dec 23, 2022

lfleischmann left a comment •

edited

IgnisDa commented Jan 11, 2023

lfleischmann commented Jan 13, 2023

IgnisDa commented Jan 15, 2023

like-a-bause commented Jan 17, 2023

IgnisDa commented Jan 26, 2023

cayblood commented Feb 4, 2023

cayblood commented Feb 4, 2023 •

edited

IgnisDa commented Feb 4, 2023

cayblood commented Feb 4, 2023 •

edited

IgnisDa commented Feb 4, 2023

cayblood commented Feb 4, 2023

cayblood commented Feb 4, 2023

IgnisDa commented Feb 4, 2023

cayblood commented Feb 4, 2023 •

edited

IgnisDa commented Feb 4, 2023

cayblood commented Feb 4, 2023

cayblood commented Feb 4, 2023 •

edited

IgnisDa commented Feb 5, 2023

cayblood commented Feb 10, 2023

cayblood commented Feb 10, 2023

IgnisDa commented Feb 14, 2023

lfleischmann Feb 14, 2023

cayblood Feb 17, 2023

cayblood Mar 17, 2023

IgnisDa Mar 17, 2023

lfleischmann commented Feb 15, 2023

Remix example #443

Remix example #443

Conversation

IgnisDa commented Dec 8, 2022

IgnisDa commented Dec 13, 2022 • edited

lfleischmann commented Dec 16, 2022 • edited

IgnisDa commented Dec 17, 2022

IgnisDa commented Dec 23, 2022

lfleischmann left a comment • edited

Choose a reason for hiding this comment

IgnisDa commented Jan 11, 2023

lfleischmann commented Jan 13, 2023

IgnisDa commented Jan 15, 2023

like-a-bause commented Jan 17, 2023

IgnisDa commented Jan 26, 2023

cayblood commented Feb 4, 2023

cayblood commented Feb 4, 2023 • edited

IgnisDa commented Feb 4, 2023

cayblood commented Feb 4, 2023 • edited

IgnisDa commented Feb 4, 2023

cayblood commented Feb 4, 2023

cayblood commented Feb 4, 2023

IgnisDa commented Feb 4, 2023

cayblood commented Feb 4, 2023 • edited

IgnisDa commented Feb 4, 2023

cayblood commented Feb 4, 2023

cayblood commented Feb 4, 2023 • edited

IgnisDa commented Feb 5, 2023

cayblood commented Feb 10, 2023

cayblood commented Feb 10, 2023

IgnisDa commented Feb 14, 2023

lfleischmann Feb 14, 2023

Choose a reason for hiding this comment

cayblood Feb 17, 2023

Choose a reason for hiding this comment

cayblood Mar 17, 2023

Choose a reason for hiding this comment

IgnisDa Mar 17, 2023

Choose a reason for hiding this comment

lfleischmann commented Feb 15, 2023

IgnisDa commented Dec 13, 2022 •

edited

lfleischmann commented Dec 16, 2022 •

edited

lfleischmann left a comment •

edited

cayblood commented Feb 4, 2023 •

edited

cayblood commented Feb 4, 2023 •

edited

cayblood commented Feb 4, 2023 •

edited

cayblood commented Feb 4, 2023 •

edited