How to develop a new front end on localhost?

[tttp]

Hi,

We have a kratos server installed and the "demo" node front-end.

We are working on a new custom one, but the server (as descrived by the doc) redirects to the "production" login when calling "self-service/login/browser"

Is there a way to either define a development/custom login ui?

If not, is this possible to read the flow id from the redirect and call self-service/login/flows?id= ?

[aeneasr]

Yes, you will need to change the ui_urls of the different flows to your localhost environment. All of that is explained in the documentation. For example, for the login flow: https://www.ory.sh/kratos/docs/self-service/flows/user-login

[tttp]

Ok, so it means that if I want to use the "production" ory (with the various other oauth providers) to develop my new front-end, I need to disable the existing "production" front-end?

I other words: it isn't possible to have two different frontend ory with the same server? ie one prod and one staging? This makes the development quite tricky, because duplicating the server (that needs to use google suite, twitter, fb as oauth providers) is a bit of a massive pain, and probably quite impossible if you want to have the "staging ory" non public

Am I missing something obvious?

[aeneasr]

Hm yeah that makes sense, it's currently not possible to have multiple UIs. The problem is that choosing to which UI to redirect would require an additional request parameter, for example ?ui=2 which would need to be respected in all the flows.

Exposing this parameter could be a security issue - given that you develop something against a production system. Let's say the UI with ID 2 redirects to some http://localhost:1234. This could theoretically be abused by attackers by MITM the HTTP (because development/localhost it is not HTTPS). It's not very likely, just a danger to be aware of.

You could of course copy the request ID to your local development system which should also work. However, when completing the request, you will end up at the production UI.

Do you have any ideas how to decide if one should end up at the localhost, and when at the pod UI?

[tttp]

Hi,

I tried copying the flow-id, but end up with an error csrf_token is invalid. It might be because csrf_token that is different between the param and from the cookie are different?

As for the security concern of exposing a ui param, I'm most sure I fully understand it, is this in the case of the victim running a webserver on localhost? Anyway, one way might be to use a non guessable key, so instead of ui=2 having a ui=uuid_not_possible_to_guess ?

[aeneasr]

Check out this discussion on slack between ZipperSK and me: https://ory-community.slack.com/archives/C012RJ2MQ1H/p1608546563087800

Synopsis is that you probably need to remove the --dev flag from your prod env to allow the secure flag which enables SameSite=None, which is required for the CSRF cookie to work cross-domain.

As for the security concern of exposing a ui param, I'm most sure I fully understand it, is this in the case of the victim running a webserver on localhost? Anyway, one way might be to use a non guessable key, so instead of ui=2 having a ui=uuid_not_possible_to_guess ?

I like the direction but it is not secure enough. Fixed uuid values provide little protection if they aren't changed. It would need more security such as a secret which generates a challenge/response, telling ORY Hydra that the person asking for the temporary dev ui is actually a trusted developer.

What you could alternatively do is redirect the browser in your login/registration/... UI to your localhost depending on some parameter you choose (e.g. IP address range, by picking a specific account, ...).

[marcinkoziej]

Different approach to developing an app locally:

1. Run local kratos (use same config but change the domains to point to localhost, you can use foobar.lvh.me for this or add a domain to /etc/hosts
2. Run local oathkeeper on http/https ports (with self signed ssl certificate you will be able to test via https, albeit with a warning).
3. Use the oathkeeper in your app. In my case, the app I am developing is proxied by oathkeeper. The Oathkeeper rules pass data to the app or to Kratos public api (the /.ory/kratos/public/ paths).

How to use the identity to connect to other services?

1. Assuming that the other service X is validating a JWT token
2. I add Oathkeeper proxy rule to proxy to the service X - when signed in Oathkeeper will add an Authorization header with JWT token => this way I can call the service X from the frontend (Javascript)
3. When I run the backend app behind oathkeeper, I also have the Authorization header so can use it to call the service X directly - would not make any sense to go through the Oathkeeper proxy twice!
4. The service X must use a JWKS (the JWT certificate) that is compatible with your local oathkeeper - best to use a staging version of service X. Do not connect like this to the production stage of service X because you would have to expose the production JWKS keys to developer laptops. Risk: if one of your developers leaks the Oathkeeper keys jwks.json file, they will be able to sign in to your staging service using any account.
5. Alternatively, you can also run the service X on your laptop, as part of dev environment, but it might not be always possible (because it's huge for instance). It is of course way safer.

This is a rough list but hopefully