Use custom sign-up and sign-in screens with Kinde

You can use your own custom sign-up and sign-in pages as part of your application design and let Kinde handle security.

This gives you the security of hosted auth, plus the ability to customize the initial sign-up experience for your users.

Customizing the entire authentication experience

Bring your own HTML, CSS, and JavaScript to our hosted pages with Kinde’s custom UI feature.

How it works

Link to this section

Custom social authentication flow

Link to this section

Design your custom social sign-in buttons and attach the Kinde connection ID. When the user selects the button, they are taken to the social provider’s native sign-in experience. After the authorization, the user is redirected back to your application.

Custom email authentication flow

Link to this section

For email authentication, use your own form field to collect the email, then send the user to Kinde by passing the email in the loginHint parameter. You can do the same for phone connections. The user is taken directly to the Kinde verification screen. After the authentication, the user is redirected back to your application.

Enable custom sign-up and sign-in pages

Link to this section

1. Switch on the custom auth option for your application

Link to this section

Custom sign-up and sign-in pages are enabled on a per-application basis. Switch the option on for each application you want to use it with.

1. Go to your Kinde dashboard and select View details on the application you want to switch on custom auth for.

2. Scroll down to the Authentication experience section and switch on Use your own sign-up and sign-in screens.

   

3. Select Save.

2. Get the auth method connection ID

Link to this section

Each authentication type you have set up in Kinde has a unique Connection ID. Add this connection ID to your screen design code so that the Kinde screens are bypassed when users interact.

1. Go to your Kinde dashboard and select Settings.

2. Go to Environment > Authentication.

3. Select Configure on the relevant authentication method tile. For example, the Google tile under the Social connections section.

4. Copy the Connection ID and paste it somewhere you can access later.

   

5. Select Save or Cancel.

6. Repeat for each authentication method you want to include.

3. Add the Connection ID to your code

Link to this section

1. Design your custom sign-up and sign-in pages with custom button elements.

   HTML example

   <h2>Sign in page</h2>
   <button>Sign in with Email</button>
   <button>Sign in with Google</button>

2. Add the connectionId property to the login or register methods for each auth button in your relevant SDK.

   React example

   import { useState } from "react";
   import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
   
   export default function CustomAuthButtons() {
     const { login, register } = useKindeAuth();
     const [email, setEmail] = useState("");
   
     return (
       <>
         <button
           type="button"
           onClick={() =>
             login({
               connectionId: "conn_6a95dec504d34dc286dc80e8df9f6099"
             })
           }
         >
           Sign in with Google
         </button>
   
         <input
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="you@yourbusiness.com"
         />
         <button
           type="button"
           onClick={() =>
             register({
               connectionId: "conn_e5f80aa5258e4685bf629b38003ee954",
               loginHint: email
             })
           }
         >
           Sign up with Email
         </button>
       </>
     );
   }

Other SDK options:

• Android
• iOS

See the following section for other examples.

Auth button examples

Link to this section

Social sign-in

Link to this section

Add the connectionId to the auth URL. Here is an example using React:

import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

export default function SocialSignIn() {
  const { login } = useKindeAuth();

  return (
    <button
      type="button"
      onClick={() =>
        login({
          connectionId: "conn_6a95dec504d34dc286dc80e8df9f6099"
        })
      }
    >
      Sign in with Google
    </button>
  );
}

When clicked, the user is taken to the Google sign-in page.

Email sign-in

Link to this section

Add the connectionId and loginHint parameters to the auth URL. For the loginHint parameter contract, see React SDK login arguments.

Here is an example using React:

import { useState } from "react";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

export default function EmailSignIn() {
  const { login, register } = useKindeAuth();
  const [email, setEmail] = useState("");

  return (
    <>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="you@yourbusiness.com"
      />
      <button
        type="button"
        onClick={() =>
          login({
            connectionId: "conn_e5f80aa5258e4685bf629b38003ee954",
            loginHint: email
          })
        }
      >
        Sign in with email
      </button>
      <button
        type="button"
        onClick={() =>
          register({
            connectionId: "conn_e5f80aa5258e4685bf629b38003ee954",
            loginHint: email
          })
        }
      >
        Sign up with email
      </button>
    </>
  );
}

When clicked, the user is taken to the Kinde verification screen.

Phone sign-in

Link to this section

Add the connectionId and loginHint parameters to the auth URL. For the loginHint parameter contract, see React SDK login arguments.

Here is an example using React:

import { useState } from "react";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

export default function PhoneSignIn() {
  const { login } = useKindeAuth();
  const [phone, setPhone] = useState("");

  return (
    <>
      <input
        type="tel"
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        placeholder="+61466043123"
      />
      <button
        type="button"
        onClick={() =>
          login({
            connectionId: "conn_e1d49977648149a2a32fde844f1ff9e5",
            loginHint: `phone:${phone}:au`
          })
        }
      >
        Sign in with phone
      </button>
    </>
  );
}

When clicked, the user is taken to the Kinde verification screen.

Enterprise sign-in (Entra ID or SAML)

Link to this section

Add the connectionId to the auth URL. This takes the user directly to the enterprise authentication process. Here is an example using React:

import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

export default function EnterpriseSignIn() {
  const { login } = useKindeAuth();

  return (
    <button
      type="button"
      onClick={() =>
        login({
          connectionId: "conn_a1b2c3d4e5f64789a0b1c2d3e4f50607"
        })
      }
    >
      Sign in with enterprise
    </button>
  );
}

When clicked, the user is taken to the enterprise authentication process.

Screens that remain securely hosted by Kinde

Link to this section

This feature lets you bypass Kinde’s initial sign-in screens, but the following screens are still hosted by Kinde and are part of the secure auth experience.

• Enter password or one-time password (OTP) screens

• Multi-factor authentication screens

• The organization switcher (if you support multiple organizations)

• The screen where users can choose to create an account if one was not found

  

To customize the Kinde-hosted part of the authentication experience, use either of the following options:

• Set global brand defaults - Use your own logo, favicon, page background, and button colors.
• Customize with code - Bring your own HTML/CSS code to fully customize the auth experience.