__maxom__ Comments - Answer Overflow

Topics

__maxom__

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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 ?

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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>
  );
}

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

_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>
  );
}

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

__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>
  );
}

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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>
  );
}

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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 />; }, });

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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>
  );
}

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

@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 ?

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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.

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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.

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

Sure

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

Hi @Zaki , how do you get kindeClient ? It is not a part of the Kinde react module

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

I’ll try this today. Thanks

30 replies

•Created by __maxom__ on 2/16/2025 in #💻┃support

Kinde Error:

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

30 replies