few-oyster-74399
01/17/2025, 12:42 PMbrief-egg-61061
01/17/2025, 12:42 PMbrief-egg-61061
01/17/2025, 12:42 PMjsx import { useEffect, useState } from "react" import { Configuration, FrontendApi, LoginFlow } from "@ory/client" const frontend = new FrontendApi( new Configuration({ basePath: "<https://your-project.projects.oryapis.com>", baseOptions: { withCredentials: true, }, }), ) function LoginForm() { const [flow, setFlow] = useState<LoginFlow>() useEffect(() => { frontend.createBrowserLoginFlow().then(({ data: flow }) => setFlow(flow)) }, []) return flow ? ( <form action={flow.ui.action} method={flow.ui.method}> {/* Render your login form fields here */} {/* If SSO is available for the entered email, show SSO button */} {flow.ui.nodes.some(node => node.group === "oidc") && ( <button type="submit" name="method" value="oidc"> Sign in with SSO </button> )} </form> ) : ( <div>Loading...</div> ) }
For more detailed information on implementing custom UIs with Ory, including how to handle different authentication methods, you can refer to the following resources: - [Custom UI Overview](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-overview) - [Integration Basics](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration) - [B2B Single Sign-On & SAML](https://www.ory.sh/docs/kratos/organizations/) Remember that the exact implementation will depend on your specific setup and requirements. You may need to adjust the code and flow based on your particular use case and the SSO providers you're integrating with.