Ory provides a high level of customization for the Account Experience. 1. Adding brand images on the login screens: Ory Account Experience can be themed using the Ory Console. You can set a custom logo and favicon. This can be done by heading over to the theming settings in the Ory Console. The Account Experience can be accessed under

<https://your-slug.projects.oryapis.com/ui>

and the theming settings can be found under

Account Experience

in the Ory Console ([source](https://www.ory.sh/docs/account-experience)). 2. Toggle between registration with phone number and/or email: Before you start, you need to decide what data you want to collect from your users. The identifier can be a username, an email address, or a phone number. All of these approaches have up- and downsides. Using the email address as the login identifier is easy to remember, doesn't require additional fields, and is usually unique. The same considerations apply to using a phone number as the primary registration & login identifier. Using a free text username reduces the privacy risk because it's much harder to make a connection between the username and a real-world identity ([source](https://www.ory.sh/docs/kratos/manage-identities/customize-identity-schema#choosing-between-username-email-and-phone-number)). The level of complexity for implementing these customizations would depend on your familiarity with the Ory Console and the specific requirements of your project. However, Ory is designed to be user-friendly and straightforward, so you should be able to implement these changes without too much difficulty.

Ory Kratos allows you to bring your own user interface (UI), which means you can customize the registration page to match your brand identity, including adding extra images or setting a background pattern. To do this, you would need to create a custom UI for your application. Ory Kratos interacts with your custom UI through a set of APIs. For example, you can create a registration flow by making a HTTP request to the Ory Kratos API, and then display the registration form fields in your custom UI ([source](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#create-registration-flow)). There are several reference implementations and guides available for building your own user interface on top of Ory's APIs, including a guide for adding custom login, registration, user settings to your Next.js & React Single Page Application (SPA), a Node.js / Express.js UI reference implementation, and a React Native UI reference implementation ([source](https://www.ory.sh/docs/kratos/bring-your-own-ui/configure-ory-to-use-your-ui#reference-implementations-and-examples)). In your custom UI, you can add extra images or set a background pattern by modifying the CSS or adding image elements to the HTML of your registration page. The exact steps would depend on the technology stack you are using for your UI.

If you're considering using

ory/elements

and

ory/sdk

, these are indeed great tools to help you integrate Ory services into your application without having to write the server-side-tunnel part. The

ory/sdk

allows for integration with Ory services, including Ory Identities, Ory Permissions, and Ory OAuth2. Before using the SDK, it's recommended to consult the Ory REST API documentation, which includes code samples and examples for various programming languages ([source](https://www.ory.sh/docs/sdk)). As for creating an OAuth client, this is a necessary step if you're planning to use OAuth 2.0 / OpenID Connect for authentication. OAuth2 clients are applications that securely authenticate with the authorization server to obtain access to an HTTP service. Confidential clients can use registered client secrets to authenticate, while public clients are unable to use registered client secrets. OAuth2 clients can be configured in a secure manner using the Ory OAuth2 and OpenID Connect product ([source](https://www.ory.sh/docs/hydra/guides/oauth2-clients)). One thing to keep in mind when creating an OAuth client is the type of application you're building. For example, server-side web applications are typically best suited to using the OAuth2 Authorization Code Flow, because they can keep the client secret confidential. It's also recommended to use the Authorization Code Flow with the Proof Key for Code Exchange (PKCE) extension to provide an added layer of security ([source](https://www.ory.sh/docs/oauth2-oidc/overview/oauth2-concepts#server-side-web-apps)). Remember, Ory is fully compliant with OAuth 2.0 and OpenID Connect, but it's not a one-size-fits-all solution. It's recommended to use these protocols for targeted use cases only, such as providing third-party integration with your application ([source](https://www.ory.sh/docs/security-model#can-i-use-oauth-20--openid-connect)).

@chilly-king-10285 What is a "protected page"

A "protected page" refers to a webpage or resource that requires user authentication before access is granted. This means that only users who have been authenticated (typically by providing valid login credentials) can view or interact with the content on the page. In the context of Ory, a protected page can be set up using middleware that checks if the user has a valid session. If the session is valid, the user is presented with the protected page. If the session is not valid, which means that the user is not authenticated or the session has expired, the request is redirected for login using the Ory Account Experience. Here's an example of how to create middleware for a protected page in an ASP.NET application using the Ory Client:

csharp app.Use(async (ctx, next) =>   {    async Task Login()    {    // this will redirect the user to the managed Ory Login UI    var flow = await ory.CreateBrowserLoginFlowAsync() ?? throw new InvalidOperationException("Could not create browser login flow");    ctx.Response.Redirect(flow.RequestUrl);    }       try    {    // check if we have a session    var session = await ory.ToSessionAsync(cookie: ctx.Request.Headers.Cookie, cancellationToken: ctx.RequestAborted);    if (session?.Active is not true)    {    await Login();    return;    }       // add session to HttpContext    ctx.Items["req.session"] = session;    }    catch (ApiException)    {    await Login();    return;    }       await next(ctx);   });

([source](https://www.ory.sh/docs/getting-started/integrate-auth/dotnet#validate-and-login))

Sure, if you're using a React application, you can use the Ory SDK to create a protected page. Here's an example of how you might do this: First, you would need to install the Ory SDK in your React project:

bash npm i --save @ory/client

([source](https://www.ory.sh/docs/getting-started/integrate-auth/react)) Then, in your React component, you can use the Ory SDK to check if the user has a valid session. If the user does not have a valid session, you can redirect them to the login page. Please note that the exact code for this would depend on how you've structured your React application and how you're managing state and routing. The Ory SDK provides the necessary functions for checking the session and initiating the login flow, but you would need to integrate these functions into your React components according to your application's specific needs. Unfortunately, the provided knowledge sources do not include a specific code snippet for protecting a page in a React application using the Ory SDK. For more detailed guidance, you may want to refer to the Ory documentation and the Ory SDK reference.