Connect your repo for custom pages

To enable your custom code to override Kinde page design, you need to set up and connect a git repo for the design files. You must also be using a custom domain to run your custom code with Kinde.

Connect your repo

Link to this section

1. Go to Design > Custom code.
2. Select the option to Connect repo. This will take you to the Settings > Git Repo page where you can manage your repo connection for design and workflows.
3. If you don’t already have a repo set up for workflows, select Connect GitHub.
4. Follow the prompts to choose a repo and branch.
5. Once connected, choose if you want to set synced code live immediately. This is more efficient for dev and testing environments, but you might switch this off in your production environment.

Set up the Git directory structure

Link to this section

Your directory structure should follow the following structure.

myApp/
  ├── kindeSrc/
  │   └── environment/
  │       └── pages/
  │           └── (kinde)/
  │               └── <route>/
  │                   └── page.tsx
  ├── package.json
  └── kinde.json

In the above example, <route> is used to map your code to a rendered page in Kinde. For example kindeSrc/environment/pages/(kinde)/(register)/page.tsx will map to the register / sign up page in the authentication flow.