Kinde•10mo ago

custom auth pages

The is a post made after @Daniel_Kinde asked. It is about my question on how is the login method implemented / imported when dealing with a nextjs repo ?

7 Replies

onderay•10mo ago

The login functionality is typically imported from the @Kinde-oss/kinde-auth-nextjs package and can be used in your Next.js pages or components. Here's an example of how you might import and use the LoginLink component to implement a login method:

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

// In your component or page
<LoginLink>Sign in</LoginLink>

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

// In your component or page
<LoginLink>Sign in</LoginLink>

The LoginLink component will start the authentication flow when clicked. If you want to redirect users to a specific page after they log in, you can set the postLoginRedirectURL parameter:

<LoginLink postLoginRedirectURL="/dashboard">Sign in</LoginLink>

<LoginLink postLoginRedirectURL="/dashboard">Sign in</LoginLink>

This will append the post_login_redirect_url parameter to the search params when redirecting to Kinde Auth. Additionally, you can use the getKindeServerSession helper on the server side to check if a user is authenticated and to retrieve user information:

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

const { isAuthenticated, getUser } = getKindeServerSession();
const isAuthed = await isAuthenticated();
const user = await getUser();

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

const { isAuthenticated, getUser } = getKindeServerSession();
const isAuthed = await isAuthenticated();
const user = await getUser();

These are the general steps to implement login functionality in a Next.js application using Kinde's SDK. @Daniel_Kinde might jump in and add more details

IkiTg07OP•10mo ago

I was more asking about this :

<button
    onClick={() =>
      login({
        authUrlParams: {
            connection_id: "conn_e5f80aa5258e4685bf629b38003ee954"
            login_hint: "[email protected]"
         }
      })
    }
>
    Sign in with email
</button>

<button
    onClick={() =>
      login({
        authUrlParams: {
            connection_id: "conn_e5f80aa5258e4685bf629b38003ee954"
            login_hint: "[email protected]"
         }
      })
    }
>
    Sign in with email
</button>

Where is the login method coming from ? I checked here : https://kinde.com/docs/authentication-and-access/custom-authentication-pages/ and didn't find anything that would help

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.

IkiTg07OP•10mo ago

And how about custom email sign-up page ? Is it possible ? In the docs it was only mentioned signing-in I'd like my auth page to be design around a Dialog modal with custom fields that will be sent alongside Kinde auth to my DB

onderay•10mo ago

A member of the team will help you out with the login method question. Kinde currently doesn't support a Dialong modal, but we will support it once this feature is rolled out https://updates.kinde.com/board/custom-sign-in-up-page

Fully customized user authentication (headless auth)

Peteswah•10mo ago

This should look something more like this:

  <Link
  prefetch={false}
  className="btn-primary mr-2"
  href={{
    pathname: "/api/auth/login",
    query: {
      post_login_redirect_url: "/oops",
      login_hint: "sup",
      lang: "fr",
    },
  }}
>
  Login
</Link>

  <Link
  prefetch={false}
  className="btn-primary mr-2"
  href={{
    pathname: "/api/auth/login",
    query: {
      post_login_redirect_url: "/oops",
      login_hint: "sup",
      lang: "fr",
    },
  }}
>
  Login
</Link>

With the Dialog modal, Andre is right in that you may have to wait until we have Headless Auth to handle authentication within your app. You could do a dialog with the login button on it, but it will have to redirect to the kinde auth flow

pryme0•7mo ago

please i needs pointers on where to import the login method he mentioned here from <button onClick={() => login({ authUrlParams: { connection_id: "conn_e5f80aa5258e4685bf629b38003ee954" login_hint: "[email protected]" } }) } > Sign in with email </button> i cant seem to find it in your documentation.

IkiTg07OP•7mo ago

So i ended up using a router.push to the api endoint because I wasn't able to find the said login method. my code looks like this :

const handleSubmit = form.handleSubmit((values: LoginFormSchema) => {
    router.push(
      `/api/auth/login?connection_id=conn_042914d31856402c814486d324df9188&login_hint=${values.email}&post_login_redirect_url=/auth/callback?email=${values.email}`,
    );
  });

const handleSubmit = form.handleSubmit((values: LoginFormSchema) => {
    router.push(
      `/api/auth/login?connection_id=conn_042914d31856402c814486d324df9188&login_hint=${values.email}&post_login_redirect_url=/auth/callback?email=${values.email}`,
    );
  });

Gaming

Programming

custom auth pages