Hi, I'm trying to switch to using Ory cloud for au...
# ory-network
b
Hi, I'm trying to switch to using Ory cloud for authentication and am running into an error that I can't seem to figure out how to solve. Whenever I submit a form (login, registration, reset password, etc.) I'm receiving the following message:
HTTP Status: 400
Could not find a strategy to sign you up with. Did you fill out the form correctly?
I'm not quite sure what is wrong as I'm using the default email/password config. I'm guessing that I've configured something in the cloud console incorrectly and can use some assistance figuring out what I need to change.
h
Are you using your own UI, or are you using the hosted UI?
b
I'm using my own UI, I copied the example project and edited the styles. @User Suggested I copy my config:
Copy code
{
  "cookies": {
    "domain": "<http://a-b-c.projects.oryapis.com|a-b-c.projects.oryapis.com>",
    "path": "/",
    "same_site": "Lax"
  },
  "courier": {
    "smtp": {
      "from_name": "Domain via Ory"
    },
    "templates": {
      "recovery": {
        "invalid": {
          "email": {
            "body": {}
          }
        },
        "valid": {
          "email": {
            "body": {}
          }
        }
      },
      "verification": {
        "invalid": {
          "email": {
            "body": {}
          }
        },
        "valid": {
          "email": {
            "body": {}
          }
        }
      }
    }
  },
  "identity": {
    "default_schema_id": "<preset://email>",
    "schemas": [
      {
        "id": "<preset://email>",
        "url": "<base64://ewogICIkaWQiOiAiaHR0cHM6Ly9zY2hlbWFzLm9yeS5zaC9wcmVzZXRzL2tyYXR>vcy9pZGVudGl0eS5lbWFpbC5zY2hlbWEuanNvbiIsCiAgIiRzY2hlbWEiOiAiaHR0cDovL2pzb24tc2NoZW1hLm9yZy9kcmFmdC0wNy9zY2hlbWEjIiwKICAidGl0bGUiOiAiUGVyc29uIiwKICAidHlwZSI6ICJvYmplY3QiLAogICJwcm9wZXJ0aWVzIjogewogICAgInRyYWl0cyI6IHsKICAgICAgInR5cGUiOiAib2JqZWN0IiwKICAgICAgInByb3BlcnRpZXMiOiB7CiAgICAgICAgImVtYWlsIjogewogICAgICAgICAgInR5cGUiOiAic3RyaW5nIiwKICAgICAgICAgICJmb3JtYXQiOiAiZW1haWwiLAogICAgICAgICAgInRpdGxlIjogIkUtTWFpbCIsCiAgICAgICAgICAib3J5LnNoL2tyYXRvcyI6IHsKICAgICAgICAgICAgImNyZWRlbnRpYWxzIjogewogICAgICAgICAgICAgICJwYXNzd29yZCI6IHsKICAgICAgICAgICAgICAgICJpZGVudGlmaWVyIjogdHJ1ZQogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgIndlYmF1dGhuIjogewogICAgICAgICAgICAgICAgImlkZW50aWZpZXIiOiB0cnVlCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAidG90cCI6IHsKICAgICAgICAgICAgICAgICJhY2NvdW50X25hbWUiOiB0cnVlCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9LAogICAgICAgICAgICAicmVjb3ZlcnkiOiB7CiAgICAgICAgICAgICAgInZpYSI6ICJlbWFpbCIKICAgICAgICAgICAgfSwKICAgICAgICAgICAgInZlcmlmaWNhdGlvbiI6IHsKICAgICAgICAgICAgICAidmlhIjogImVtYWlsIgogICAgICAgICAgICB9CiAgICAgICAgICB9LAogICAgICAgICAgIm1heExlbmd0aCI6IDMyMAogICAgICAgIH0KICAgICAgfSwKICAgICAgInJlcXVpcmVkIjogWwogICAgICAgICJlbWFpbCIKICAgICAgXSwKICAgICAgImFkZGl0aW9uYWxQcm9wZXJ0aWVzIjogZmFsc2UKICAgIH0KICB9Cn0K"
      }
    ]
  },
  "selfservice": {
    "allowed_return_urls": [],
    "default_browser_return_url": "<http://localhost:3000/>",
    "flows": {
      "error": {
        "ui_url": "<http://localhost:3000/account/error>"
      },
      "login": {
        "after": {
          "hooks": [],
          "oidc": {
            "hooks": []
          },
          "password": {
            "hooks": [
              {
                "hook": "require_verified_address"
              }
            ]
          },
          "webauthn": {
            "hooks": []
          }
        },
        "before": {
          "hooks": []
        },
        "ui_url": "<http://localhost:3000/account/login>"
      },
      "logout": {
        "after": {}
      },
      "recovery": {
        "after": {
          "hooks": []
        },
        "enabled": true,
        "ui_url": "<http://localhost:3000/account/recovery>"
      },
      "registration": {
        "after": {
          "hooks": [],
          "oidc": {
            "hooks": [
              {
                "hook": "session"
              }
            ]
          },
          "password": {
            "hooks": [
              {
                "hook": "session"
              }
            ]
          },
          "webauthn": {
            "hooks": []
          }
        },
        "before": {
          "hooks": []
        },
        "enabled": true,
        "ui_url": "<http://localhost:3000/account/registration>"
      },
      "settings": {
        "after": {
          "hooks": [],
          "password": {
            "hooks": []
          },
          "profile": {
            "hooks": []
          }
        },
        "privileged_session_max_age": "15m0s",
        "required_aal": "aal1",
        "ui_url": "<http://localhost:3000/account/settings>"
      },
      "verification": {
        "after": {
          "hooks": []
        },
        "enabled": true,
        "ui_url": "<http://localhost:3000/account/verification>"
      }
    },
    "methods": {
      "link": {
        "config": {
          "base_url": "<https://auth.domain.com/>"
        },
        "enabled": true
      },
      "lookup_secret": {
        "enabled": true
      },
      "oidc": {
        "config": {
          "base_redirect_uri": "<https://auth.domain.com/>",
          "providers": []
        },
        "enabled": false
      },
      "password": {
        "config": {},
        "enabled": true
      },
      "profile": {},
      "totp": {
        "config": {
          "issuer": "Domain"
        },
        "enabled": true
      },
      "webauthn": {
        "config": {
          "passwordless": false,
          "rp": {
            "display_name": "Domain",
            "id": "<http://a-b-c.projects.oryapis.com|a-b-c.projects.oryapis.com>",
            "origin": "<https://a-b-c.projects.oryapis.com>"
          }
        },
        "enabled": true
      }
    }
  },
  "serve": {
    "admin": {
      "base_url": "<https://a-b-c.projects.oryapis.com/>",
      "request_log": {
        "disable_for_health": true
      }
    },
    "public": {
      "base_url": "<https://a-b-c.projects.oryapis.com/>",
      "cors": {
        "enabled": false
      },
      "request_log": {
        "disable_for_health": true
      }
    }
  },
  "session": {
    "cookie": {
      "domain": "<http://a-b-c.projects.oryapis.com|a-b-c.projects.oryapis.com>",
      "name": "ory_session_abc",
      "path": "/",
      "same_site": "Lax"
    },
    "lifespan": "72h0m0s",
    "whoami": {
      "required_aal": "aal1"
    }
  }
}
Registration is also enabled.
m
Hey Brandon, You are using the Ory Proxy to develop on the localhost UI?
b
I’m not 100% sure. I followed the blog post on how to setup NextJS with custom URLs. Edit: I don't think I am. The Ory posts for NextJS don't mention running the proxy.
I copied the UI files from this repo and modified the styles: https://github.com/ory/kratos-selfservice-ui-react-nextjs Found the blog post. Took a minute to find it: https://www.ory.sh/nextjs-authentication-spa-custom-flows-open-source/
Current package versions:
Copy code
"@ory/integrations": "^0.2.5",
"@ory/kratos-client": "^0.9.0-alpha.3",
h
Could you share the link of your app? 🙂 Or is it available only locally?
b
It's local, but I can upload a copy to a private GitHub repo.
Actually would a zip file be ok? The site needs some private UI packages I've developed that I don't want to make public yet.
m
Hello Brandon, that would be no problem. It just helps a lot with debugging if we can have a look at the code. Feel free to send it to us via email or in a DM in this workspace.
b
Zip file sent. Thanks for taking a look!
🙏 1
h
Thank you @boundless-pilot-37368 -
Could not find a strategy to sign you up with. Did you fill out the form correctly?
usually means that you did not send the
method
when submitting the request. As an example, if you want to submit a password the HTTP POST request would look along th elines of:
Copy code
password=...&identifier=some@email.com&method=password
If you just send
Copy code
password=...&identifier=some@email.com
then you’ll see this error. I think that’s the problem!
👍 1
b
@high-optician-2097 Is this something I need to handle, or should this be handled by the
@ory/client
package? If I need to handle it, do I just add a hidden field to the
Flow
form manually, or do I modify the form body before it's submitted via self service functions on the client api? If it's something that needs to be manually handled, could this requirement be added to the
submitSelfServiceLoginFlow
documentation and other self service endpoint documentation?
So I added a line to set the method at the top of the
onSubmit
function. (The same one that's in [Kratos Self Service UI React NextJS](https://github.com/ory/kratos-selfservice-ui-react-nextjs/blob/fea3914b51eb7d9dcb9babf948180f9a2c06fb5b/pages/login.tsx)). Is this the recommended way to specify the method? If so, it should probably be added to the example.
Copy code
const onSubmit = (values: SubmitSelfServiceLoginFlowBody) => {
        values.method = 'password';

        return (
            router
                // On submission, add the flow ID to the URL but do not navigate. This prevents the user from loosing their data when they reload the page.
                .push(`/account/login?flow=${flow?.id}`, undefined, { shallow: true })
                .then(() =>
                    kratos
                        .submitSelfServiceLoginFlow(String(flow?.id), undefined, values)
                        // We logged in successfully! Let's bring the user home.
                        .then((res) => {
                            if (flow?.return_to) {
                                window.location.href = flow?.return_to;
                                return;
                            }
                            router.push('/');
                        })
                        .then(() => {})
                        .catch(handleFlowError(router, 'login', setFlow))
                        .catch((err: AxiosError<any, any>) => {
                            // If the previous handler did not catch the error it's most likely a form validation error
                            if (err.response?.status === 400) {
                                // Yup, it is!
                                setFlow(err.response?.data);
                                return;
                            }

                            return Promise.reject(err);
                        })
                )
        );
    };
h
so you start with an empty
{}
and then you add an email `{identifier: "some@email.com"}`` and then you hit submit which triggers a value change to
{identifier: "<mailto:some@email.com|some@email.com>", "method": "<the value of the button you clicked>"}
before submitting
👍 1
b
Thanks @high-optician-2097! Updating the form to match the repo instead of the blog post worked. I'm now getting a CSRF error, which is understandable. I'm working through that error now.
h
which blog post did you use? )
:)
b
I used this one. https://www.ory.sh/nextjs-authentication-spa-custom-flows-open-source/ It doesn't have the submit button that is in the repo listed in the tutorial, it has a slightly different version that doesn't set the method.
(Missing the onClick)
h
Ohh, maybe we linked an older version there - @magnificent-energy-493 can you PTAL?
probably enough to point the version to the git hash of the repo