Scenario 1. Load localhost:3000,

manager.getUser()

2. If no current user (or expired) then

manager.signinRedirect()

a. This redirects the browser to:

<http://localhost:4000/oauth2/auth?client_id=***&redirect_uri=http%3A%2F%2Flocalhost%3A3000&response_type=code&scope=openid+offline_access&state=***&code_challenge=***&code_challenge_method=S256>

3. Then the browser is automatically redirected back to

<http://localhost:3000/?login_challenge=***>

. a. Because we set the

oauth2-config

/urls/login

value to

<http://localhost:3000>

. 4. Problem. How to handle Login submission with Email+Password+`login_challenge` via

fetch

? No added owned API endpoints if possible. (SPA only.) Research When observing the Ory-provided UI via `/ui/login`: 1.

<http://localhost:4000/oauth2/auth?client_id=***&>...

redirects to 2.

<http://localhost:4000/ui/login?login_challenge=***>

redirects to 3.

<http://localhost:4000/self-service/login/browser?aal=&refresh=&return_to=&organization=&via=&login_challenge=***>

redirects to 4.

<http://localhost:4000/ui/login?flow=***>

which then renders the form. 5. Then submitting the form

POST <http://localhost:4000/self-service/login?flow=***>

with payload:

csrf_token,identifier,password,method

redirects to 6.

<http://localhost:4000/oauth2/auth?client_id=***&code_challenge=***&code_challenge_method=S256&login_verifier=***&redirect_uri=http%3A%2F%2Flocalhost%3A3000&response_type=code&scope=openid+offline_access&state=***>

redirects to 7.

<http://localhost:4000/ui/consent?consent_challenge=***>

redirects to ... a. We skip over because the OAuth2 client is configured to skip consent as a trusted client. 8.

<http://localhost:4000/oauth2/auth?client_id=***&code_challenge=***&code_challenge_method=S256&consent_verifier=***&redirect_uri=http%3A%2F%2Flocalhost%3A3000&response_type=code&scope=openid+offline_access&state=***>

redirects to 9.

<http://localhost:3000/?code=***&scope=openid+offline_access&state=***>

a. Back to my UI. 10. Then the OIDC Client takes over to complete the exchange: a.

manager.signinCallback()

i.

POST <http://localhost:4000/oauth2/token>

with payload:

grant_type,redirect_uri,code,code_verifier,client_id

.

Solution

// create login flow with loginChallenge
      oryClient.createBrowserLoginFlow({ loginChallenge: login_challenge })

// update login flow with form data
// NOTE: you must try/catch this call, success throws 422 with an error instructing you to redirect to the "redirect_browser_to" field of the payload
      oryClient.updateLoginFlow({
        flow: flow.id,
        updateLoginFlowBody: {
          csrf_token: csrfToken,
          identifier: options.email,
          password: options.password,
          method: "password",
        },
      })

// redirect the browser accordingly
const redirectUrl = response.data.redirect_browser_to;

window.location.href = redirectUrl;