Kinde•6d ago

Kinde Error:

Something went wrong when we tried to authenticate you, and we can’t offer a quick way out. Start a new session and try signing in again. Error code: 1656 Code reference: import { createFileRoute, Outlet } from "@tanstack/react-router"; import { SidebarProvider } from "@/components/ui/sidebar"; import { AppSidebar } from "@/components/sidebars/app-sidebar"; import { SiteHeader } from "@/components/header/site-header"; export const Route = createFileRoute("/_app-layout")({ beforeLoad: ({ context, location }) => { if (!context.auth.isAuthenticated) { console.log("Not authenticated, location: ", location.pathname); // Redirect manually using window.location window.location.href =

https://<domain>.kinde.com/oauth2/auth?redirect_uri=http%3A%2F%2Flocalhost%3A5173&client_id=<client-id>>&response_type=code&scope=openid+profile+email+offline&code_challenge=TX0W79xv40MuaJ1DNZFNEK25nKIH2VvS2ypjsYFzD3U&code_challenge_method=S256&state=7edbee716bd9c12fd3ca0a839b1a7f6b4b2f8827fcaa0764bccf53c2

; } }, component: AppLayoutComponent, }); function AppLayoutComponent() { return ( <div className="[--header-height:calc(theme(spacing.14))]"> <SidebarProvider className="flex flex-col"> <SiteHeader /> <div className="flex flex-1"> <AppSidebar /> <Outlet /> </div> </SidebarProvider> </div> ); }

21 Replies

Ages•6d ago

Hi, thanks for reaching out! It looks like there’s an extra > after <client-id>, which might be causing the issue. Please try removing it and check again.

__maxom__OP•6d ago

Hi @Abdelrahman Zaki, I just noticed the extra > in my post. That is just a typo when replacing my actual client id. The issue still persists either using the code above (after removing the extra >)or using the login method provided by Kinde

Ages•6d ago

Hi @__maxom_, Have you tried implementing this approach?

const authUrl = await kindeClient.getAuthUrl();
window.location.href = authUrl;

const authUrl = await kindeClient.getAuthUrl();
window.location.href = authUrl;

Please give it a try and let me know if you run into any issues!

__maxom__OP•6d ago

I’ll try this today. Thanks Hi @Zaki , how do you get kindeClient ? It is not a part of the Kinde react module I think my main question is that I want to protect my app routes. How do I handle redirection to the Kinde hosted login page when a user tries to access an app path directly, for example using their bookmarks. As I was unable to figure out a way I recreated the above url that I used in window.location.href. How to handle this using the React SDK ? I'm using React 19 (Vite) + Tanstack Router for my SPA On a side note I also tested the following: import { createFileRoute } from "@tanstack/react-router"; import { useKindeAuth } from "@kinde-oss/kinde-auth-react"; import { Button } from "@/components/ui/button"; export const Route = createFileRoute("/login")({ component: RouteComponent, }); function RouteComponent() { const { login, register } = useKindeAuth(); return ( <div> Hello "/login"! <Button onClick={() => register()}>Sign up</Button> <Button onClick={() => login()}>Sign In</Button> </div> ); I get the same error when I try to signin or signup after clicking the buttons

Alessandro•5d ago

Hey, we've also started seeing this error for all accounts but for only one environment. It was working on Friday and no changes have gone in over the weekend. Mind taking a look?

__maxom__OP•5d ago

Sure First time user of Kinde btw. Have been using Clerk until now. Apologies if my questions are a bit stupid, but I can't seem to get a hang around Kinde workings based on the React docs on the website. I've first tried to use the hosted login page to route users to if they try to access a protected pages. I've been facing issues on where to route them, how to build the url as when I route them to the domain, I get the message "There's nothing to see here yet. But an awesome home page is coming soon." Based on a lot of google search, I created the URL and used window.location.href to route the users but I kept getting the error. As this was getting a bit out of hand, I enabled the option of "Use your own sign-up and sign-in screens" and building my own auth experience but I'm unable to understand which method to use from useKindeAuth hook. Login seems to be the only apt method but it only takes the following arguments: org_code?: string; app_state?: object; authUrlParams?: object; and instead of making an API call, it stil routes to the hosted page . Can you please point me to an example or something where Kinde is implemented with React. I'm kind of lost at the moment.

Daniel_Kinde•5d ago

HI @maxom Looking at your above example.
You should be able to simply call

 
const { login } = useKindeAuth();

if (!context.auth.isAuthenticated) {
      console.log("Not authenticated, location: ", location.pathname);
      // Redirect as not logged in.
      login();
    }

 
const { login } = useKindeAuth();

if (!context.auth.isAuthenticated) {
      console.log("Not authenticated, location: ", location.pathname);
      // Redirect as not logged in.
      login();
    }

Have you tried this?

__maxom__OP•5d ago

I'm using Tanstack router and I'm handling the auth check in a beforeLoad component. I cannot use login() as it throws the error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I've tried redirecting to an external URL (Kinde hoseted login) which was throwing the error mentioned above. Now I'm trying to route it to a login page that I'm building and build my own flow with a basic form and login/signup button

Zaki•5d ago

Hi @maxom, just to clarify, after the user is successfully authenticated, they are being redirected to the wrong page—specifically, your Kind subdomain. Is that correct?

Zaki•5d ago

Also you may find this React Starter Kit helpful: https://github.com/kinde-starter-kits/react-starter-kit

GitHub

GitHub - kinde-starter-kits/react-starter-kit: Starter kit for Reac...

Starter kit for React with Kinde. Contribute to kinde-starter-kits/react-starter-kit development by creating an account on GitHub.

__maxom__OP•5d ago

Hi @Zaki , I'm unable to authenticate the user in the first place. Just to summarise, I am building an application app.domain.com which hosts the application. There is no website yet where I have a landing page with Login / Register buttons (This is what is shown in the starter kit example). What I'm trying to do: If I visit any path in app.domain.com, if the user is not authenticated, route them to a login/signup page. If the user is authenticated, then allow them to the app. I'm able to check if the user is authenticated or not. What I'm trying to solve is redirect a user to a login page and redirect them back to the app on successful login. Scenario 1: Using Hosted Login Page: How to route them to the Hosted Login Page, : 1. login() does not work 2. Redirect using hardcoded URL works but trying to login/signup throws error Scenario 2: Build my own login/sign up pages: What call should I make to login/signup ? login() take the following params:

org_code?: string;
app_state?: object;
authUrlParams?: object;

org_code?: string;
app_state?: object;
authUrlParams?: object;

But how do I pass in say a email + password to the method ? Any interaction with the login() method redirects to the hosted signin page even though "Use your own sign-up and sign-in screens. Bypass Kinde’s sign up and sign in screens and use your own design" option is enabled

Ages•5d ago

HI,

There are docs here on tanstack about using hooks with routing: https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks

We are currently preparing a new major release to the React SDK, following this release will look at adding some bits which could make this easier, for now it looks like the Tanstack createRootRouteWithContext will help.

__maxom__OP•5d ago

Hi @DanielRivers , thanks for that. My implementation follows the documentation that you have shared but the suggestions do not work. I'm not sure what I'm doing wrong main.tsx

import "./index.css";

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "@tanstack/react-router";
import { KindeProvider, useKindeAuth } from "@kinde-oss/kinde-auth-react";

import { router } from "./router";

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

// Wrap the app in the KindeProvider
// eslint-disable-next-line react-refresh/only-export-components
function App() {
  const auth = useKindeAuth();
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID || ""}
      domain={import.meta.env.VITE_KINDE_DOMAIN || ""}
      redirectUri={window.location.origin}
      logoutUri={window.location.origin}
    >
      <RouterProvider router={router} context={{ auth }} />
    </KindeProvider>
  );
}

// Render the app
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
}

import "./index.css";

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "@tanstack/react-router";
import { KindeProvider, useKindeAuth } from "@kinde-oss/kinde-auth-react";

import { router } from "./router";

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

// Wrap the app in the KindeProvider
// eslint-disable-next-line react-refresh/only-export-components
function App() {
  const auth = useKindeAuth();
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID || ""}
      domain={import.meta.env.VITE_KINDE_DOMAIN || ""}
      redirectUri={window.location.origin}
      logoutUri={window.location.origin}
    >
      <RouterProvider router={router} context={{ auth }} />
    </KindeProvider>
  );
}

// Render the app
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
}

_layout.tsx

import { createFileRoute, Outlet } from "@tanstack/react-router";
import ...

export const Route = createFileRoute("/_app-layout")({
  beforeLoad: async ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      context.auth.login();
    }
  },
  component: AppLayoutComponent,
});

function AppLayoutComponent() {
  return (
    <div className="[--header-height:calc(theme(spacing.14))]">
      ...
    </div>
  );
}

import { createFileRoute, Outlet } from "@tanstack/react-router";
import ...

export const Route = createFileRoute("/_app-layout")({
  beforeLoad: async ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      context.auth.login();
    }
  },
  component: AppLayoutComponent,
});

function AppLayoutComponent() {
  return (
    <div className="[--header-height:calc(theme(spacing.14))]">
      ...
    </div>
  );
}

Throws error: context.auth.login is not a function Anyways....I'm sort of lost now unable to figure out how to use Kinde but I'll try out a few other things. @DanielRivers / @Daniel_Kinde , can you help me with one last question, If I build my own login form with all the validations in place and a login button, is there a way I can call the Kinde API's instead of redirecting to the hosted login ?

Daniel_Kinde•5d ago

I can't see createRootRouteWithContext in the above code snippets

__maxom__OP•5d ago

import * as React from "react";
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
import { ThemeProvider } from "@/components/common/theme-provider";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

interface RootRouterContext {
  // The ReturnType of your useAuth hook or the value of your AuthContext
  auth: ReturnType<typeof useKindeAuth>;
}

export const Route = createRootRouteWithContext<RootRouterContext>()({
  component: RootComponent,
});

function RootComponent() {
  return (
    <React.Fragment>
      <ThemeProvider defaultTheme="system">
        <Outlet />
      </ThemeProvider>
    </React.Fragment>
  );
}

import * as React from "react";
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
import { ThemeProvider } from "@/components/common/theme-provider";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

interface RootRouterContext {
  // The ReturnType of your useAuth hook or the value of your AuthContext
  auth: ReturnType<typeof useKindeAuth>;
}

export const Route = createRootRouteWithContext<RootRouterContext>()({
  component: RootComponent,
});

function RootComponent() {
  return (
    <React.Fragment>
      <ThemeProvider defaultTheme="system">
        <Outlet />
      </ThemeProvider>
    </React.Fragment>
  );
}

Daniel_Kinde•5d ago

I can't see anywhere you are setting auth?

__maxom__OP•5d ago

router.tsx: import { createRouter } from "@tanstack/react-router"; import { routeTree } from "./routeTree.gen"; import NotFound from "./not-found"; // Create a new router instance export const router = createRouter({ routeTree, defaultPreload: "intent", scrollRestoration: true, context: { auth: undefined!, // This will be set after we wrap the app in an AuthProvider }, defaultNotFoundComponent: () => { return <NotFound />; }, }); main.tsx

import "./index.css";

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "@tanstack/react-router";
import { KindeProvider, useKindeAuth } from "@kinde-oss/kinde-auth-react";

import { router } from "./router";

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

// Wrap the app in the KindeProvider
// eslint-disable-next-line react-refresh/only-export-components
function App() {
  const auth = useKindeAuth();
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID || ""}
      domain={import.meta.env.VITE_KINDE_DOMAIN || ""}
      redirectUri={window.location.origin}
      logoutUri={window.location.origin}
    >
      <RouterProvider router={router} context={{ auth }} />
    </KindeProvider>
  );
}

// Render the app
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
}

import "./index.css";

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "@tanstack/react-router";
import { KindeProvider, useKindeAuth } from "@kinde-oss/kinde-auth-react";

import { router } from "./router";

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

// Wrap the app in the KindeProvider
// eslint-disable-next-line react-refresh/only-export-components
function App() {
  const auth = useKindeAuth();
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID || ""}
      domain={import.meta.env.VITE_KINDE_DOMAIN || ""}
      redirectUri={window.location.origin}
      logoutUri={window.location.origin}
    >
      <RouterProvider router={router} context={{ auth }} />
    </KindeProvider>
  );
}

// Render the app
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
}

__root.tsx

import * as React from "react";
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
import { ThemeProvider } from "@/components/common/theme-provider";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

interface RootRouterContext {
  // The ReturnType of your useAuth hook or the value of your AuthContext
  auth: ReturnType<typeof useKindeAuth>;
}

export const Route = createRootRouteWithContext<RootRouterContext>()({
  component: RootComponent,
});

function RootComponent() {
  return (
    <React.Fragment>
      <ThemeProvider defaultTheme="system">
        <Outlet />
      </ThemeProvider>
    </React.Fragment>
  );
}

import * as React from "react";
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
import { ThemeProvider } from "@/components/common/theme-provider";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

interface RootRouterContext {
  // The ReturnType of your useAuth hook or the value of your AuthContext
  auth: ReturnType<typeof useKindeAuth>;
}

export const Route = createRootRouteWithContext<RootRouterContext>()({
  component: RootComponent,
});

function RootComponent() {
  return (
    <React.Fragment>
      <ThemeProvider defaultTheme="system">
        <Outlet />
      </ThemeProvider>
    </React.Fragment>
  );
}

_layout.tsx

import { createFileRoute, Outlet } from "@tanstack/react-router";

import { SidebarProvider } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/sidebars/app-sidebar";
import { SiteHeader } from "@/components/header/site-header";

export const Route = createFileRoute("/_app-layout")({
  beforeLoad: async ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      context.auth.login();
    }
  },
  component: AppLayoutComponent,
});

function AppLayoutComponent() {
  return (
    <div className="[--header-height:calc(theme(spacing.14))]">
      <SidebarProvider className="flex flex-col">
        <SiteHeader />
        <div className="flex flex-1">
          <AppSidebar />
          <Outlet />
        </div>
      </SidebarProvider>
    </div>
  );
}

import { createFileRoute, Outlet } from "@tanstack/react-router";

import { SidebarProvider } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/sidebars/app-sidebar";
import { SiteHeader } from "@/components/header/site-header";

export const Route = createFileRoute("/_app-layout")({
  beforeLoad: async ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      context.auth.login();
    }
  },
  component: AppLayoutComponent,
});

function AppLayoutComponent() {
  return (
    <div className="[--header-height:calc(theme(spacing.14))]">
      <SidebarProvider className="flex flex-col">
        <SiteHeader />
        <div className="flex flex-1">
          <AppSidebar />
          <Outlet />
        </div>
      </SidebarProvider>
    </div>
  );
}

Daniel_Kinde•5d ago

you're missing the RouterProvider

function InnerApp() {
  const auth = useAuth()
  return <RouterProvider router={router} context={{ auth }} />
}

function App() {
  return (
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  )
}

function InnerApp() {
  const auth = useAuth()
  return <RouterProvider router={router} context={{ auth }} />
}

function App() {
  return (
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  )
}

__maxom__OP•5d ago

Router Provide is a part of App() in main.tsx:

function App() {
  const auth = useKindeAuth();
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID || ""}
      domain={import.meta.env.VITE_KINDE_DOMAIN || ""}
      redirectUri={window.location.origin}
      logoutUri={window.location.origin}
    >
      <RouterProvider router={router} context={{ auth }} />
    </KindeProvider>
  );
}

function App() {
  const auth = useKindeAuth();
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID || ""}
      domain={import.meta.env.VITE_KINDE_DOMAIN || ""}
      redirectUri={window.location.origin}
      logoutUri={window.location.origin}
    >
      <RouterProvider router={router} context={{ auth }} />
    </KindeProvider>
  );
}

Daniel_Kinde•5d ago

If you look at the last snippet, the hook needs to be used inside the KindeProvider

__maxom__OP•5d ago

Tried doing this as well. Does not seem to work haha. FML

// eslint-disable-next-line react-refresh/only-export-components
function InnerApp() {
  const auth = useKindeAuth();
  return <RouterProvider router={router} context={{ auth }} />;
}

// Wrap the app in the KindeProvider
// eslint-disable-next-line react-refresh/only-export-components
function App() {
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID || ""}
      domain={import.meta.env.VITE_KINDE_DOMAIN || ""}
      redirectUri={window.location.origin}
      logoutUri={window.location.origin}
    >
      <InnerApp />
    </KindeProvider>
  );
}

// eslint-disable-next-line react-refresh/only-export-components
function InnerApp() {
  const auth = useKindeAuth();
  return <RouterProvider router={router} context={{ auth }} />;
}

// Wrap the app in the KindeProvider
// eslint-disable-next-line react-refresh/only-export-components
function App() {
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID || ""}
      domain={import.meta.env.VITE_KINDE_DOMAIN || ""}
      redirectUri={window.location.origin}
      logoutUri={window.location.origin}
    >
      <InnerApp />
    </KindeProvider>
  );
}

export const Route = createFileRoute("/_app-layout")({
  beforeLoad: async ({ context }) => {
    if (!context.auth.isAuthenticated) {
      console.log(context.auth.isAuthenticated); //Getting false in console
      console.log(context.auth.getUser());
      // context.auth.login(); // Doesn't work
      // throw redirect({ to: context.auth.login() });  //to is of type string login() returns a promise
      // throw redirect({ href: context.auth.login() }); //href is of type string login() returns a promise
    }
  },
  component: AppLayoutComponent,
});

export const Route = createFileRoute("/_app-layout")({
  beforeLoad: async ({ context }) => {
    if (!context.auth.isAuthenticated) {
      console.log(context.auth.isAuthenticated); //Getting false in console
      console.log(context.auth.getUser());
      // context.auth.login(); // Doesn't work
      // throw redirect({ to: context.auth.login() });  //to is of type string login() returns a promise
      // throw redirect({ href: context.auth.login() }); //href is of type string login() returns a promise
    }
  },
  component: AppLayoutComponent,
});

AFAIK, Tanstack router redirects does not support external urls. I can redirect to an internal route and build my login screens. Circling back to one of my previous questions, can I do something like login(email: email, password: password) , i.e. pass argument to some Kinde function so that I can skip the hosted page and just use API's ?

Gaming

Programming

Kinde Error:

Did you find this page helpful?