Hey, we have a project on the Ory Network essentials plan using an OAuth authorization code flow for a Next.js app

<https://app.example.com>

. Currently, when the user lands on authenticated pages, we redirect an unauthorized user using

oidc-client-ts

to our OAuth2 client login endpoint

<https://auth.example.com/ui/login>

. When they log in with a username and password, they’re successfully redirected back to our app. We want to use Ory elements to have a custom login page at

<https://app.example.com/login>

. Here, we're creating a flow using

ory.createBrowserLoginFlow(...).

The problem is when this flow is submitted with the correct email and password, it returns a

200

response and just sets the Ory Session Cookie but hasn't interacted with our OAuth2 client. I think what we need is for it to return a

422

, similar to what's mentioned in the Ory docs. The

redirect_browser_to

would hopefully be our OAuth2

<https://auth.example.com/oauth2/auth>...

endpoint - where the flow gets completed and the authorization code is obtained. Once this works, we can always direct users to

<https://app.example.com/login>

here instead of

<https://auth.example.com/ui/login>

, so they only see our UI, not the default OAuth Ory Hydra one. It feels like we're missing some setup in the Ory Network project config for this? Any help would be really appreciated! Thanks

You have to redirect the user to /oauth2/auth first, which should then automatically redirect the user to your custom login page

Thanks for your response, what would happen in the case where users go directly to https://app.example.com/login, we would't want them to be directed away and directed back?

I think you might need to redirect away and back since I believe the flow needs to start from Hydra (OAuth). I’m pretty sure there is some data in the flow object you can use to detect that scenario.

Thanks, I have set the hydra login url to our custom page. Now, when we try to access an authenticated page, we do direct to

/oauth2/auth

then that redirects to our custom login page with a

login_challange

in the url. Should this be a flow instead? e,g,

<https://app.examole.com/login?flow=>...

Despite these changes with this we are still not getting the 422 when submitting email + password

What you need to do in the UI is to append the login challenge when creating the flow, like we do here in the reference: https://github.com/ory/kratos-selfservice-ui-node/blob/7d0e8641b0bb8822f410269daa367daaff922d84/src/routes/login.ts#L43-L46

If you set

hydra_urls_login

to

/ui/login

, then Ory should handle creating the login flow with the login_challenge and redirect to your custom login UI with the flow id

I think that will not work with a custom UI though, as the code I previously posted is literally where the second redirect happens 😅 it is just happening server side in the UI, but it could be client side as well the important part is to include the login challenge when initiating the flow

We do have a custom ui

🤔 not what I would expect to happen, but OK I guess? 😂

Including the login challenge in the submitted flow has worked 🙏 thank you!

ohh yeah, because the UI settings are only applied on the kratos level, the account experience does not yet know it is not responsible

Please don’t change that behaviour because we are relying on it.

I just figured that out, it was definitely not something we were aware off 😅

lol

I would recommend to do the redirect on your side instead, as it is an easy fix and improves the resilience of your integration.

But we have multiple custom domains, so not sure what I would set

hydra_urls_login

to

I see, can you use relative URIs instead?

I think a relative uri is relative to

https://{slug}.<http://projects.oryapis.com/|projects.oryapis.com/>

If the redirect ends up to be a relative uri, the browser will stay on the same host.

I’ll play around with it. We typically only use OAuth on one domain anyway. And should be easy to handle the

login_challenge

search param in our custom UI code

Do you have multiple custom domains with Ory?

Yes

The organization is nothing you should be worried about. Except when you want to have "B2B SSO", so certain users that have to use certain SSO providers. In that case you should sign up for the waiting list 😉

Ok, I’ll hold off on the organization param

Did you try setting the "custom UI base URL" on each custom domain?

Yes, we have that setup

That's how we intended to solve the issue of multiple domains & the correct UI

It works now with my current Hydra config

I think so too. We will discuss this case internally and come back.

Sounds good. Always fun when users use your app in ways you didn’t intend.

yeah 😂

I just realized the default account experience UIs are still available if you navigate to them directly with a valid flow id

you can disable the UI, but then your "hack" will also not work anymore

How do you disable it?

ah sorry, you can only disable the welcome screen

I’ll log a GitHub issue to add the ability to disable everything