Kinde•3mo ago

Where is the login method of this offical doc imported

I want to build my personal login page

<button
  onClick={() =>
    login({
      authUrlParams: {
        connection_id: "conn_6a95dec504d34dc286dc80e8df9f6099"
      }
    })
  }
>
  Sign in with Google
</button>

<button
  onClick={() =>
    login({
      authUrlParams: {
        connection_id: "conn_6a95dec504d34dc286dc80e8df9f6099"
      }
    })
  }
>
  Sign in with Google
</button>

Where is the login imported from?? https://docs.kinde.com/authenticate/custom-configurations/custom-authentication-pages/

Kinde docs

Custom sign-up and sign-in pages

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

14 Replies

Daniel_Kinde•3mo ago

That is a code example from our ReactSDK, what SDK are you using?

Vincent•3mo ago

I am using nextjs for nextjs it seems that the import of this method has some problems? How to do it with nextjs sdk

DavidF9265•3mo ago

what kind of problems are you having when using this method? @Vincent

Vincent•3mo ago

watchjs:dev:  ⨯ ../../node_modules/@kinde-oss/kinde-auth-react/dist/kinde-auth-react.esm.js (1:1809) @ eval
watchjs:dev:  ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
watchjs:dev:     at eval (webpack-internal:///(rsc)/../../node_modules/@kinde-oss/kinde-auth-react/dist/kinde-auth-react.esm.js:9:1683)
watchjs:dev:     at (rsc)/../../node_modules/@kinde-oss/kinde-auth-react/dist/kinde-auth-react.esm.js (/root/watchjs/apps/nextjs/.next/server/vendor-chunks/@kinde-oss.js:30:1)
watchjs:dev:     at __webpack_require__ (/root/watchjs/apps/nextjs/.next/server/webpack-runtime.js:33:42)
watchjs:dev:     at eval (webpack-internal:///(rsc)/./src/app/[lang]/(auth)/login/sso-form.tsx:9:85)
watchjs:dev:     at (rsc)/./src/app/[lang]/(auth)/login/sso-form.tsx (/root/watchjs/apps/nextjs/.next/server/app/[lang]/(auth)/login/page.js:216:1)
watchjs:dev:     at __webpack_require__ (/root/watchjs/apps/nextjs/.next/server/webpack-runtime.js:33:42)

watchjs:dev:     at eval (webpack-internal:///(rsc)/./src/app/[lang]/(auth)/login/page.tsx:16:67)
watchjs:dev:     at (rsc)/./src/app/[lang]/(auth)/login/page.tsx (/root/watchjs/apps/nextjs/.next/server/app/[lang]/(auth)/login/page.js:205:1)
watchjs:dev:     at Function.__webpack_require__ (/root/watchjs/apps/nextjs/.next/server/webpack-runtime.js:33:42)
watchjs:dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
watchjs:dev:   type: 'TypeError',
watchjs:dev:   page: '/en/login'
watchjs:dev: }

watchjs:dev:  ⨯ ../../node_modules/@kinde-oss/kinde-auth-react/dist/kinde-auth-react.esm.js (1:1809) @ eval
watchjs:dev:  ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
watchjs:dev:     at eval (webpack-internal:///(rsc)/../../node_modules/@kinde-oss/kinde-auth-react/dist/kinde-auth-react.esm.js:9:1683)
watchjs:dev:     at (rsc)/../../node_modules/@kinde-oss/kinde-auth-react/dist/kinde-auth-react.esm.js (/root/watchjs/apps/nextjs/.next/server/vendor-chunks/@kinde-oss.js:30:1)
watchjs:dev:     at __webpack_require__ (/root/watchjs/apps/nextjs/.next/server/webpack-runtime.js:33:42)
watchjs:dev:     at eval (webpack-internal:///(rsc)/./src/app/[lang]/(auth)/login/sso-form.tsx:9:85)
watchjs:dev:     at (rsc)/./src/app/[lang]/(auth)/login/sso-form.tsx (/root/watchjs/apps/nextjs/.next/server/app/[lang]/(auth)/login/page.js:216:1)
watchjs:dev:     at __webpack_require__ (/root/watchjs/apps/nextjs/.next/server/webpack-runtime.js:33:42)

watchjs:dev:     at eval (webpack-internal:///(rsc)/./src/app/[lang]/(auth)/login/page.tsx:16:67)
watchjs:dev:     at (rsc)/./src/app/[lang]/(auth)/login/page.tsx (/root/watchjs/apps/nextjs/.next/server/app/[lang]/(auth)/login/page.js:205:1)
watchjs:dev:     at Function.__webpack_require__ (/root/watchjs/apps/nextjs/.next/server/webpack-runtime.js:33:42)
watchjs:dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
watchjs:dev:   type: 'TypeError',
watchjs:dev:   page: '/en/login'
watchjs:dev: }

It will give this error

import * as Icons from "@watchjs/ui/icons";
import { env } from "~/env.mjs";

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




export function SsoForm() {
  const { login, register } = useKindeAuth();


  return (
    <div className="space-y-4 mb-4">
    <button 
     onClick={() =>
      login({
        authUrlParams: {
          connection_id: env.NEXT_PUBLIC_KINDE_GOOGLE_CONNECTION_ID
        }
      })
    }
    className="w-full py-2 px-4 bg-white text-black rounded-full flex items-center justify-center">
      <Icons.Google className="mr-2 h-4 w-4" />

      Continue with Google
    </button>
    <button
     onClick={() =>
      login({
        authUrlParams: {
          connection_id: env.NEXT_PUBLIC_KINDE_GITHUB_CONNECTION_ID
        }
      })
    }
     className="w-full py-2 px-4 bg-white text-black rounded-full flex items-center justify-center">
    <Icons.GitHub className="mr-2 h-4 w-4" />

      Continue with Github
    </button>
    <button 
     onClick={() =>
      login({
        authUrlParams: {
          connection_id: env.NEXT_PUBLIC_KINDE_DISCORD_CONNECTION_ID
        }
      })
    }
    className="w-full py-2 px-4 bg-white text-black rounded-full flex items-center justify-center">
    <Icons.Discord className="mr-2 h-4 w-4" />
      Continue with Discord
    </button>
  </div>
  );
}

import * as Icons from "@watchjs/ui/icons";
import { env } from "~/env.mjs";

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




export function SsoForm() {
  const { login, register } = useKindeAuth();


  return (
    <div className="space-y-4 mb-4">
    <button 
     onClick={() =>
      login({
        authUrlParams: {
          connection_id: env.NEXT_PUBLIC_KINDE_GOOGLE_CONNECTION_ID
        }
      })
    }
    className="w-full py-2 px-4 bg-white text-black rounded-full flex items-center justify-center">
      <Icons.Google className="mr-2 h-4 w-4" />

      Continue with Google
    </button>
    <button
     onClick={() =>
      login({
        authUrlParams: {
          connection_id: env.NEXT_PUBLIC_KINDE_GITHUB_CONNECTION_ID
        }
      })
    }
     className="w-full py-2 px-4 bg-white text-black rounded-full flex items-center justify-center">
    <Icons.GitHub className="mr-2 h-4 w-4" />

      Continue with Github
    </button>
    <button 
     onClick={() =>
      login({
        authUrlParams: {
          connection_id: env.NEXT_PUBLIC_KINDE_DISCORD_CONNECTION_ID
        }
      })
    }
    className="w-full py-2 px-4 bg-white text-black rounded-full flex items-center justify-center">
    <Icons.Discord className="mr-2 h-4 w-4" />
      Continue with Discord
    </button>
  </div>
  );
}

The nextjs code is like this

Vincent•3mo ago

This is the error image in the front end

Vincent•3mo ago

@DavidF9265 @Daniel_Kinde

Vincent•3mo ago

And after I add 'use client', it gives me this

DavidF9265•3mo ago

i experienced this issue when trying to work with management api I think the right approach here is to move your login logic to a server action in nextjs so that all your env variables are available could you try this? create a login action in the server side and consume it from the client in the button you showed

Vincent•3mo ago

yes but what function from the sdk should I use? Like the problem is the login function of the sdk is not working in nextjs client And for sso there should be no logic in the server side It's all redirect in the client side

IkiTg07•3mo ago

I think there's just no login function from the sdk. I remember when the custom auth was introduced I asked the question

Daniel_Kinde•3mo ago

Are you using the NextJS SDK?

DavidF9265•3mo ago

he is

Vincent•3mo ago

Actually I find a way to do it in nextjs sdk

Daniel_Kinde•3mo ago

I am interested if there is something you feel could be clearer in the docs

Gaming

Programming

Where is the login method of this offical doc imported