To use the code method for account verification in Ory Kratos from a React application, you need to: 1. Create a verification flow (native or browser, depending on your app type). 2. Render the verification form using the flow's UI nodes. 3. Submit the user's email to receive a verification code. 4. Render the code input when prompted, and submit the code to complete verification. Below is a simplified React example using Ory's SDK and best practices from the official documentation: --- ### 1. Create the Verification Flow For a native app, you can create the flow like this:

js import { Configuration, FrontendApi } from "@ory/client"  const frontend = new FrontendApi(   new Configuration({     basePath: `https://${process.env.ORY_PROJECT_SLUG}.<http://projects.oryapis.com|projects.oryapis.com>`,   }), )  export async function createVerification() {   return await frontend.createNativeVerificationFlow() }

[Reference: Create verification flow](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#create-verification-flow) --- ### 2. Render the Verification Form Fetch the flow and render the form fields dynamically:

jsx import { useEffect, useState } from "react" import { Configuration, FrontendApi } from "@ory/client"  const frontend = new FrontendApi(   new Configuration({     basePath: "<http://localhost:4000>", // or your Ory Tunnel URL     baseOptions: { withCredentials: true },   }), )  export const Verification = () => {   const [flow, setFlow] = useState(null)    useEffect(() => {     frontend.createBrowserVerificationFlow().then(({ data }) => setFlow(data))   }, [])    const handleSubmit = (e) => {     e.preventDefault()     const formData = new FormData(e.currentTarget)     const body = Object.fromEntries(formData)     frontend       .updateVerificationFlow({         flow: flow.id,         updateVerificationFlowBody: body,       })       .then(() => {         // handle success (e.g., show success message or redirect)       })       .catch((err) => {         // handle error (e.g., show error messages)       })   }    if (!flow) return <div>Loading...</div>    return (     <form action={flow.ui.action} method={flow.ui.method} onSubmit={handleSubmit}>       {flow.ui.nodes.map((node, idx) => {         if (node.attributes.type === "hidden" || node.attributes.type === "email" || node.attributes.type === "text") {           return (             <input               key={idx}               name={node.attributes.name}               type={node.attributes.type}               defaultValue={node.attributes.value}               required={node.attributes.required}               disabled={node.attributes.disabled}             />           )         }         if (node.attributes.type === "submit") {           return (             <button               key={idx}               type="submit"               name={node.attributes.name}               value={node.attributes.value}             >               {node.meta?.label?.text || "Submit"}             </button>           )         }         return null       })}     </form>   ) }

[Reference: Get verification flow and render UI](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#get-verification-flow) --- ### 3. Submit Email and Code - First, the user submits their email. - Ory sends a code to the email. - The UI updates to show a code input field. - The user enters the code and submits the form again. The form fields and flow state are managed by Ory and provided in the

flow.ui.nodes

array, so you don't need to hardcode the fields—just render them as described above. --- Note: - For browser flows, include the CSRF token in the request. - For native flows, CSRF is not required. - The code method is the default in Ory Network projects and is generally more user-friendly than the link method. For more advanced error handling and UI customization, refer to the official Ory documentation and the example code provided there: [Ory Kratos: Custom UI Basic Integration – Verification Flow](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#submit-verification-flow)