Hello all, we're trying to add sign in with Google and having trouble deciphering the

@ory/client-fetch

code -- are there any examples? At the moment, we have the below code snippet; the

updateLoginFlow

call's network request returns a

422

with a

redirect_browser_to

parameter, but for some reason that isn't returned in the actual ory

client-fetch

call so I can't pass it back to the client to perform the redirect. Note that I'm logging things in the

handleOryCall

script (which is necessary because sometimes these calls throw errors when they actually just succeed with a 400 or similar). Any ideas? Is there a different suggested approach?

const { data: flow } = await handleOryCall<LoginFlow>(
      async () =>
        await ory.createBrowserLoginFlow({
          returnTo: '/login',
        }),
      'initialize Google login flow',
    );

    <http://logger.info|logger.info>('flow');
    <http://logger.info|logger.info>(JSON.stringify(flow, undefined, 2));

    const csrfTokenNode = flow?.ui?.nodes.find(
      (node: UiNode) =>
        node.attributes.node_type === 'input' &&
        (node.attributes as UiNodeInputAttributes).name === 'csrf_token',
    );

    const csrfToken = csrfTokenNode?.attributes
      ? ((csrfTokenNode.attributes as UiNodeInputAttributes).value as string)
      : undefined;

    if (!csrfToken) {
      throw new Error('CSRF token not found in flow');
    }

    const providerNode = flow?.ui?.nodes.find(
      (node: UiNode) =>
        node.attributes.node_type === 'input' &&
        (node.attributes as UiNodeInputAttributes).name === 'provider',
    );

    const providerId = providerNode?.attributes
      ? ((providerNode.attributes as UiNodeInputAttributes).value as string)
      : '';

    const response = await handleOryCall<SuccessfulNativeLogin>(
      () =>
        ory.updateLoginFlow({
          flow: flow?.id ?? '',
          updateLoginFlowBody: {
            method: 'oidc', // OpenID Connect method
            provider: providerId,
            csrf_token: csrfToken,
          },
        }),
      'update login flow to get Google auth',
    );

but for some reason that isn't returned

what are you seeing instead?

nothing, just an error:

{
  "statusCode": 422,
  "error": {
    "response": {},
    "name": "ResponseError"
  }
}

We have added this method: handleFlowError in the @ory/client-fetch sdk, to help with that. https://github.com/ory/elements/blob/main/packages/elements-react/src/util/onSubmitRegistration.ts I think it exposes a onRedirect callback