René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Determine Best Auth Solution","articleBody":"### Current Situation\r\n\r\nThis stems from discussion in https://github.com/idom-team/idom/discussions/768\r\n\r\nAs explained in https://github.com/phihos/idom-auth-example-sanic, the problem we need to solve is how to securely authenticate users inside an ReactPy single page application. Usually authentication is done via Cookie or Authorization header on each HTTP request. But after the websocket connection has been established no further HTTP requests and therefore no further headers will be sent. However, there are some ways you could try to work around this:\r\n\r\n1. You could push some Javascript via `html.script` that sends a separate auth request to your auth API and then reloads the page to reestablish the websocket connection with new auth headers, but this is kinda ugly. It defeats the purpose of ReactPy not having to write any Javascript and having a visible reload has a negative impact on the user-experience.\r\n\r\n2. You could also render the login page traditionally and then redirect to a new page with [embedded ReactPy](https://reactpy.dev/docs/guides/getting-started/running-reactpy.html?highlight=embed#embed-in-an-existing-webpage) . But then you already split your application into two parts: \"pre-auth\" with traditional server-side template rendering and \"post-auth\" with ReactPy. Keeping both parts consistent is probably not fun.\r\n\r\n3. You can also do authentication inside the single page app and save the auth state via `use_state`. But it will be gone as soon as a websocket disconnect happens. You can mitigate this by pushing some Javascript that sets a session cookie. But now there is a new problem: Session cookies should be set with the `HttpOnly` flag to prevent XSS attacks from recovering the session cookie. This can not be done (or at least is difficult to do) with Javascript. So you might end up with a security flaw in your app.\r\n\r\n4. Since you have at least one full HTTP request-response cycle you can set a session cookie with a session ID on that response if the request does not already contain a cookie with a valid session ID. That ensures that the following request for the websocket connection always contains a session ID cookie. With `use_request` we can extract the session ID and then the server can retrieve the session data. In that data we can look up the authentication state and let ReactPy display a login form or the actual content. We can later manipulate the session data to perform a login or logout. All without the need to set a further cookie or push Javascript - provided we implement a server-side session. A rough prototype for this [has been implemented here](https://github.com/reactive-python/reactpy/pull/771) based on work done in https://github.com/phihos/idom-auth-example-sanic. \r\n\r\n### Proposed Actions\r\n\r\nExplore the viability of each option.","author":{"url":"https://github.com/rmorshea","@type":"Person","name":"rmorshea"},"datePublished":"2022-11-01T19:13:28.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":19},"url":"https://github.com/828/reactpy/issues/828"}