Customize designs with code

Kinde gives you the ability to bring your own HTML / CSS and JavaScript to our hosted pages.

For security, your custom code will only be run on a custom domain. These are free to use in Kinde - set up a custom domain.

Password entry (and other auth screens) must remain on Kinde’s hosted domain—you cannot embed the password entry screen entirely on your own domain without redirecting to Kinde. This is required for security. You can customize the visual appearance of these pages using custom HTML/CSS (and the options in this section), but the auth flow is always served from Kinde.

There are three layers which make up design customization in Kinde:

• The Kinde widget - This is the ‘form’ that shows on each screen where end users interact, such as where they input and confirm their auth credentials, enter OTPs, etc. You can change the layout and design of widget elements.
• The page - the page on which the widget appears, includes background colour, images, footer, location of the widget on the page, etc.
• Copy / translations - the content that appears in and around Kinde widgets, including field labels, headings, button text, etc. You can update content for all the languages you have selected in Kinde.

It’s important to understand how to work with each of these elements, before getting too far along the custom code path. Learn more about:

• The widget
• Working with pages
• Content control

Code management

Link to this section

Your code for your pages will live in a GitHub repository (other git providers to be supported later). For details see Connect your repo.