Kinde•3mo ago

How to use Is_create_org in NextJs.

The documentation is very brief on this parameter for NextJs. It doesn't give any details on what it actually does. I was assuming I could do something like:- <RegisterLink is_create_org={true}>Sign Up</...> but it doesn't appear to accept that parameter. When a user signs up, I want them to enter an organisation name that will be created besides their account. Thx.

7 Replies

DaveOP•3mo ago

Thank you Quacksire for the info but is CreateOrgLink the same as is_create_org? I'd like to understand how is_create_org supposed to be used. Thx.

Kenton•3mo ago

I am wondering the same thing Dave. When a user signs up, how do we let them specify the name of the org they want to create and associate them with that org. The docs reference is_create_org but where do we use it to enable this flow. Do you have any guides or repositories showing how to accomplish this sign up flow quacksire? How do Dave and I use is_create_org?

DaveOP•3mo ago

So, <LoginLink> = log in user, <RegisterLink> = register new user, <CreateOrgLink> = create a new organisation, yes??
In my ideal world. for new user registration there'd be an "organisation name" besides first/last name properties for user sign up, that when OK is clicked a new user is registered and a new organisation created for which the user is the first member. To do this It appears RegisterLink and CreateOrgLink are not helpful. Furthermore, to implement this I'd need to choose to create my own custom register and login pages, which is unfortunate since I'm perfectly happy with the pre-packaged login page. Am I missing anything??? I'm using NextJs. App Router. When implementing my own Register page, I will be creating an organisation and then add a user to that organisation. I don't see much in the NextJs docs for doing this. To keep with the flavour of NextJS, I'd like to create a server action to create an organisation and signup a user. Are there any hooks for doing this or is Kinde Management API the only way? THanks, Dave

Kenton•3mo ago

Throwing out an idea. Users are added to default org on signup. What if we added code to middleware to redirect user to /create-org page if the users org-code === default org code? It would look something like this:

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { NextResponse } from "next/server";

export default withAuth(
  async function middleware(req) {
    console.log("User Kinde Auth Data", req.kindeAuth);

    // Correctly access the pathname
    const pathname = req.nextUrl.pathname;
    console.log('Pathname:', pathname);

    const orgCode = req.kindeAuth?.token?.org_code;
    console.log('Org Code:', orgCode);

    // Redirect logic based on org_code and pathname
    if (pathname !== '/' && !pathname.includes('auth') && pathname !== '/create-org' && orgCode === 'your-default-org-code') {
      const url = req.nextUrl.clone();
      url.pathname = '/create-org';
      return NextResponse.redirect(url);
    }
  },
  {
    isReturnToCurrentPage: true,
    loginPage: "/login", // update to you sign in page
  }
);

export const config = {
  matcher: ["/dashboard", "/other-protected-route", "/other-protected-route/:path*"]
};

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { NextResponse } from "next/server";

export default withAuth(
  async function middleware(req) {
    console.log("User Kinde Auth Data", req.kindeAuth);

    // Correctly access the pathname
    const pathname = req.nextUrl.pathname;
    console.log('Pathname:', pathname);

    const orgCode = req.kindeAuth?.token?.org_code;
    console.log('Org Code:', orgCode);

    // Redirect logic based on org_code and pathname
    if (pathname !== '/' && !pathname.includes('auth') && pathname !== '/create-org' && orgCode === 'your-default-org-code') {
      const url = req.nextUrl.clone();
      url.pathname = '/create-org';
      return NextResponse.redirect(url);
    }
  },
  {
    isReturnToCurrentPage: true,
    loginPage: "/login", // update to you sign in page
  }
);

export const config = {
  matcher: ["/dashboard", "/other-protected-route", "/other-protected-route/:path*"]
};

/create-org would show another screen where the user fills out their desired org name. On submit, we create the org and move that user to the org. This flow allows us to continue using the hosted sign up and sign in pages AND we don't run into a situation where we create orgs and user abandons sign up leaving us having to clean up empty orgs. To my knowledge, if a user has been invited to an org and they arrive at the sign up page, they should be added to the org they have been invited to instead of the default org. Could you confirm this quacksire?

DaveOP•3mo ago

I really like your idea, Kenton. Have you tried it yet?

Kenton•3mo ago

The middleware I provided is working well but I’m running into issues with the Kinde Management API: https://discord.com/channels/1070212618549219328/1278099615916490843/1278099615916490843 I did manually move one of my users to a different org and theoretically it all worked as expected. If you know how to use the management API, let me know.

DaveOP•3mo ago

Hi Quacksire, I'm a little confused re. "the user needs to be logged in to create an org". If they are already logged in, then their account has been created from registration. But there's a configuration flag for organisations in the UI:- "Add users to this organization if no organization is specified" "Always add users to the default organization if no organization is selected or created when they register" I'm assuming there is a parameter that can be passed when registering a user?

Gaming

Programming

How to use Is_create_org in NextJs.