Kinde•8mo ago

adding a loading state to the SignIn component in NextJS

On clicking the sign in button it seems to take quite a few seconds for the kinde login page to load… anyone got any patterns for adding a loading state to the button?

12 Replies

jamie•8mo ago

Just guessing here and I'm not affiliated with Kinde in any way (other than using it myself). But if it's possible to iframe the sign-in page, you could potentially redirect to the page after it has loaded into the browser somehow. Alternatively I think they provide the option to build a custom sign in page, then you could have it however you like 🙂 EDIT: I accidentally said "Just guessing here and I'm affiliated with Kinde in any way", to clarify completely, that was a typo. I meant "Just guessing here and I'm not affiliated with Kinde in any way".

Oli - Kinde•8mo ago

Hey @Ollie Mansell, Sorry to hear it takes a while for the Kinde login page to initially load. Are you able to send a recording of your experience (with your DevTools Network page open)? You can DM me if you look. The recording will help my team troubleshoot your issue.

Oli - Kinde•8mo ago

Thanks for weighing in here @jamie, At the moment you cannot have the kinde pages in an iframe, this is for security reasons. But your suggestion to use a custom sign in page is a good suggestion if you want to implement a loading state.

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.

Ollie MansellOP•8mo ago

thanks all - can I ask where the login method gets imported from? Auto-import appears broken for the nextjs kinde sdk.

Oli - Kinde•8mo ago

Hey @Ollie Mansell, The login method for the Next.js Kinde SDK can be handled through the handleAuth function, which is imported from "@kinde-oss/kinde-auth-nextjs/server". This function will handle Kinde Auth endpoints in your Next.js app, including login. Here's how you can import and use it:

import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";
export const GET = handleAuth();

import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";
export const GET = handleAuth();

This setup is crucial for handling authentication endpoints such as login, logout, and registration within your Next.js application.e Please let me know if you have any other questions.

Ollie MansellOP•8mo ago

Hey, thanks for replying @Oli - Kinde - I have the API route set up using the handleAuth function, how does this relate to custom signin page? In the docs the custom sign in page calls a “login” method, does that get returned from a call to handleAuth? Ie I have to call that on the custom sign in page as well as in the auth api route handler? If you have any example repos using a custom sign in that would probably be easiest!

moroshko•8mo ago

@Ollie Mansell Have you figured out where is the login function coming from? I'm also wondering about this. @Oli - Kinde It would be good to clarify this in the docs here: https://kinde.com/docs/authentication-and-access/custom-authentication-pages/#custom-sign-up-and-sign-in-pages

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.

Oli - Kinde•7mo ago

Hi @Ollie Mansell and @moroshko, Apologies for the delayed response here. The examples in the custom sign in page doc is using the React SDK. If you were for example, creating a custom sign in page with email sign in, you would have a component that looks something like:

import {LoginLink} from "@kinde-oss/kinde-auth-nextjs/components";

<LoginLink
    authUrlParams={{
        connection_id: "conn_5b99b30d1b154ea691b9443eccd5120e",
        login_hint: email
    }}
>
    Sign-in with email
</LoginLink>

import {LoginLink} from "@kinde-oss/kinde-auth-nextjs/components";

<LoginLink
    authUrlParams={{
        connection_id: "conn_5b99b30d1b154ea691b9443eccd5120e",
        login_hint: email
    }}
>
    Sign-in with email
</LoginLink>

Please let me know if you have any other questions.

moroshko•7mo ago

@Oli - Kinde I was wondering about the login() method that's being called:

onClick={() =>
      login({
        authUrlParams: {
            connection_id: "conn_e5f80aa5258e4685bf629b38003ee954"
            login_hint: "[email protected]"
         }
      })
    }

onClick={() =>
      login({
        authUrlParams: {
            connection_id: "conn_e5f80aa5258e4685bf629b38003ee954"
            login_hint: "[email protected]"
         }
      })
    }

Oli - Kinde•7mo ago

@moroshko, Are you able to explain a bit more about what your question is. The login method comes from the React SDK - see here: https://docs.kinde.com/developer-tools/sdks/frontend/react-sdk/#sign-in-and-sign-up CC @DanielRivers in case I cannot respond to responses on this topic

Kinde docs

React SDK

Our developer tools provide everything you need to get started with Kinde.

moroshko•7mo ago

All I was suggesting is to include const { login } = useKindeAuth(); in the docs examples to make it clear where login is coming from.

Oli - Kinde•7mo ago

That makes total sense. I will pass this to my team.

Gaming

Programming

adding a loading state to the SignIn component in NextJS