Does Kinde provide Login/SignUp components for custom Login/SignUp pages?
I'd like to have a custom
myapp.com/login page in Next.js App Router application, and render a Login component like in the screenshot. Does Kinde provide such component? (Similar to Clerk's SignIn component: https://clerk.com/docs/references/nextjs/custom-signup-signin-pages)
The custom sign-in docs don't mention anything about pre-built components: https://kinde.com/docs/authentication-and-access/custom-authentication-pages/#custom-sign-up-and-sign-in-pagesKinde Docs
Custom sign-up and sign-in pages - Authentication and access - Help...
Our developer tools provide everything you need to get started with Kinde.
11 Replies
Hi there. Are these the components you are after? https://kinde.com/docs/developer-tools/nextjs-sdk/#sign-up-and-sign-in
Kinde Docs
NextJS App Router SDK - Developer tools - Help center
Our developer tools provide everything you need to get started with Kinde.
Nope. These components are just links. I'm looking for a Login component like in the screenshot I attached above.
(component that renders an email field and the Continue with Google button, for example)
I don't believe we have these Misha, but I'll ping one of our engineers who knows Nextjs well, and they may have suggestions. You may not hear back until Monday AEST. We'll do what we can to help. Best, Claire.
Would also love to know if such components will be available once you complete the "Fully customized user authentication (headless auth)" item on the Roadmap.
It definitely makes sense to include these when we deliver headless but I cannot say for sure - a lot depends on our priorities in the moment, but I will make sure your request is noted as part of this work.
I'm signing off now but hope you have a great weekend and you can be sure we will get back to you as soon as we can.
Hi @moroshko,
At the moment we don't have any login components (like Clerk).
And we ahve recently decided that we will allow custom HTML and CSS in the login and register flow as part of the "Fully customized user authentication (headless auth)" item.
You can build a custom UI that matches the attached image through the custom sign up and sign in doc you mentioned: https://kinde.com/docs/authentication-and-access/custom-authentication-pages/#custom-sign-up-and-sign-in-pages
If you like, I can provide some boilderplate HTML and CSS that would help you get on the right path to building a custom UI that matches the attached screenshot. Let me know.
Kinde Docs
Custom sign-up and sign-in pages - Authentication and access - Help...
Our developer tools provide everything you need to get started with Kinde.
How about the verification code page? Will I be able to build a custom page for it anytime soon?
Do you also have docs about how to get the Google client ID and Google client secret to populate the fields when I deploy to Prod?
How about the verification code page? Will I be able to build a custom page for it anytime soon?We are working on a solution that will allow you to add custom HTML and CSS styling to the whole login and register flow (including the verification code page).
Do you also have docs about how to get the Google client ID and Google client secret to populate the fields when I deploy to Prod?Are you able to elaborate on what you mean here?
We are working on a solution that will allow you to add custom HTML and CSS styling to the whole login and register flow (including the verification code page).Will we be able to use Tailwind for styling?
Are you able to elaborate on what you mean here?If I click Google in Social connections, I get this dialog where I can enter the Google client ID and the Google client secret. Do you have docs explaining where to get these from?
Kinde Docs
Google social sign in - Authentication and access - Help center
Our developer tools provide everything you need to get started with Kinde.
The instructions for getting the credentials from Google were accurate last time we checked. They move stuff around in the UI sometimes, so just be aware of that.