Hydra implementation with @ory/elements

[ShawnCZek]

Hey,

I am currently struggling with implementing the login challenge into @ory/elements.

I have noticed that the createBrowserLoginFlow method of FrontendApi from @ory/client is currently supporting the login challenge. However, I fail to see how this is supposed to work on the front end.

The response returns oauth2_login_challenge. But it cannot be used in the respective update SDK method updateLoginFlow.

I would expect that the backend (Kratos) gets this token and accepts the oAuth2 login request. And afterward, returns the redirect_to which will be used for redirecting to the consent page.

So my question is, what is the correct implementation of accepting/rejecting oAuth2 login request together with @ory/elements?

Thank you in advance for your help.

// EDIT: as a note, my code (just for testing) is literally based on the provided example in the respective repository.

[ShawnCZek]

Hi again,

I have just gone through the Kratos' implementation of updateLoginFlow. I have noticed that in the PostLoginHook of HookExecutorProvider, the login challenge is correctly accepted by Hydra: https://github.com/ory/kratos/blob/1ed6839369baeecc99610d9f04d78dfee53ad72a/selfservice/flow/login/hook.go#L232-L238

The finalReturnTo is most likely meant to be provided by Kratos. However, instead, only the session is sent back through the API. And the frontend application, in this case @ory/elements, have no way of knowing where they should redirect the user.

So is it possible that this was forgotten to be implemented into Kratos when integrating Hydra?

[Benehiko]

Hi @ShawnCZek

Thank you for taking a look into using ory/elements :)

So to be clear, Ory Elements doesn't handle any of the logic part of user redirects or logic pertaining to getting the flow data. Ory Elements only handles the rendering part of the Ory flow data which are retrievable through the Ory SDKs / APIs.

To get an idea of how you can use the oauth2_login_challenge you can refer to https://github.com/ory/kratos-selfservice-ui-node/blob/master/src/routes/login.ts#L38-L41

You then need to initialise the consent flow yourself and pass that to the UserConsentCard in ory
https://github.com/ory/elements/blob/main/src/react-components/ory/user-consent-card.tsx#L23

Here is an example from a community member in our ExpressJS example
ory/kratos-selfservice-ui-node#228

We have this implemented in the Ory Account experience which is the managed ui that comes with your Ory Network project. We still need to add it to our open source examples.

[ShawnCZek]

Hi @Benehiko,

Thank you for your response and for including the example. It gave a bit more insight into this all again.

However, the problem is that I do not even get to the consent app when using @ory/elements.
These are the steps that I follow to "reproduce" this problem (when trying it locally, of course):

1. I start off by issuing a new authorization token by running ory perform authorization-code locally
2. In the newly created app that was made by this command, I click on the "Authorize application" link
3. This redirects me to /oauth2/auth of my Ory Account instance
4. I have configured my own frontend; that is the @ory/elements app. So I get redirected to /login?login_challenge=xyz
5. This renders the Login component. My version is pretty much the same, just createBrowserLoginFlow looks like the following:

createBrowserLoginFlow({
  aal: aal2 ? 'aal2' : 'aal1',
  refresh: true,
  loginChallenge: searchParams.get('login_challenge') || undefined,
})

6. Then I proceed to sign in using updateLoginFlow
7. The backend should now accept my oAuth2 login. And that is what Ory Kratos does already for me: https://github.com/ory/kratos/blob/1ed6839369baeecc99610d9f04d78dfee53ad72a/selfservice/flow/login/hook.go#L232-L238

With a backend app, one can accept the oAuth2 login request. But this is not available for the frontend app. And there is no other way to access the redirect URL that points to the consent route (which would be implemented the way you suggested).

All in all, I thought that @ory/elements together with @ory/client allow making a frontend app only (replacement for Ory Account's UI). And Ory Kratos will take care of this on its own. But this sadly does not seem to be the case.

// EDIT: Just to make this even clearer; following the consent flow, I am stuck at getting the redirect URL with the login verifier after authenticating the user with their credentials from my @ory/elements app.