Kinde•5mo 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•5mo ago

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

VincentOP•5mo 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•5mo ago

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

VincentOP•5mo 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

VincentOP•5mo ago

This is the error image in the front end

VincentOP•5mo ago

@DavidF9265 @Daniel_Kinde

VincentOP•5mo ago

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

DavidF9265•5mo 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

VincentOP•5mo 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•5mo 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•5mo ago

Are you using the NextJS SDK?

DavidF9265•5mo ago

he is

VincentOP•5mo ago

Actually I find a way to do it in nextjs sdk

Daniel_Kinde•5mo 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