We are trying to accomplish a OpenID Connect Authorisation Code Flow for our Next.js webb application with Ory Network (Ory Identities, Oauth2 + OpenID Connect). It's important to us that we can use the Oauth2 access tokens (JWT) for authorising backend resources but also have a very smooth login flow for our users. We have a custom login page using Ory Elements on https://app.ourdomain.com/login. Here we want users to be able to enter a email and password ➡️ press login ➡️ then be redirected to our Oauth redirect URI ➡️ where we'll direct them on to the page they were trying to access. At this point they should be authenticated by an access and refresh token managed using

oicd-client-ts

(via

react-oidc-context

). Currently we are having some issues with obtaining the Authorization Code form our Oauth server after email and password submission using Ory Elements. I'm concerned this is perhaps due to our misunderstanding of role played by the Ory Session Cookie. In our current login flow, once the correct email and password is entered the users client gets a Ory Session Cookie. At this point in the code we're at the

// login successful

point still on the

/login

page:

const submitLoginFlow = (values: UpdateLoginFlowBody) =>
    ory
      .updateLoginFlow({
        flow: String(loginFlow?.id),
        updateLoginFlowBody: values,
      })
      .then(() => {
       // login successful 
      })
      .catch((err) => ...

At this point we assumed that we needed to redirect to our authorisation endpoint

/oauth2/auth

on our issuer https://auth.ourdomain.com. Is it correct that as they have the Ory Session Cookie at this point, the authorisation endpoint will be able to identify the user and issue the Authorisation Code? Then redirect to out redirect URI? Another option we have see is to have the above code snippet always receive a

422

, similar to this section in the ory docs where the error contains a

redirect_browser_to

string, which would be the Authorisation Endpoint? I can only see this example used however for a native app? This may make more sense for us as the point we are reaching in our login code snippet

// login successful

isn't the end of the flow we need - i.e. we still need the access and refresh token. Once we are back from the Oauth authorisation endpoint we would log out of the Ory session (not needing the Ory Session Cookie) and maintain the users 'logged in' status by periodically refreshing the access token. Is our current understanding correct? And is either of these approaches advisable for the flow were describing? Any help would be really appreciated, thanks!

Yes, to redirect to Hydra to complete the OAuth flow, you need to handle the

422

error case.

err.response.data

will contain a

redirect_browser_to

value.

Thanks for your answer Brandon and linking the article. We don't want to rule out opening up our APIs yet so need this flow. Is there any documentation to on how set up the login to return the

422

and where can we set this

err.response.data

object?

If you initiated the flow through Hydra, then the 422 should happen automatically. Just handle it inside your

catch

block e.g.

if (err.response?.status === 422) {
  const { redirect_browser_to: redirectUrl } =
    browserLocationChangeRequiredResponseSchema.parse(err.response?.data);
  return redirect(redirectUrl, {
    headers: getSetCookieResponseHeaders(err.response.headers),
    status: 303,
  });
}

Though if possible, I’d submit the form using a regular browser form submit instead of

updateLoginFlow

. Then the browser will take care of the redirect, cookies, etc.

Hi thanks again for your response. I think the problem here may be what flow we're initiating, we're not self hosting Hydra. Is this still possible without self hosting?

If you are using Ory Network it works. But you can’t go directly to your login page. You have to send the user to the Hydra authorize endpoint first.

Thanks Brandon! We are using Ory Network. So what set up would we need to active a flow where the user can submit their email and password from our custom login page using Ory Elements, then end up back at our redirect URI with the OAuth Authorisation Code (that we can then exchange for an access token) without the user having to take acton in between these points? We are skipping the consent step in our case.

If you’ve set up a custom Login UI in your Ory Network project, the Ory Network OAuth provider should be set up to use it by default.

Thanks for your explanation, we'll check we're not setting up incorrectly! So the flow I described above is possible without self-hosting?

Yes