Vincent
Vincent
PostsComments
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
Actually I find a way to do it in nextjs sdk
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
It's all redirect in the client side
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
And for sso there should be no logic in the server side
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
Like the problem is the login function of the sdk is not working in nextjs client
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
yes but what function from the sdk should I use?
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
No description
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
@DavidF9265 @Daniel_Kinde
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
No description
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
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
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
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
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
How to do it with nextjs sdk
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
for nextjs it seems that the import of this method has some problems?
25 replies
KKinde
Created by Vincent on 6/29/2024 in #💻┃support
Where is the login method of this offical doc imported
I am using nextjs
25 replies