Skip to content

Instantly share code, notes, and snippets.

@sheppardjm

sheppardjm/actions.ts

Created October 5, 2023 22:11
Show Gist options
  • Save sheppardjm/67339bd2565e507d21c5fb6df7082686 to your computer and use it in GitHub Desktop.
Save sheppardjm/67339bd2565e507d21c5fb6df7082686 to your computer and use it in GitHub Desktop.
Download ZIP
Add a new Kinde organization in server components using Nextjs server actions
Raw
actions.ts
"use server";
import { redirect } from "next/navigation";
export async function createOrgAction(formData: FormData) {
const org = formData.get("org");
redirect(`/organization/${org}`);
}
Raw
next.config.mjs
/** @type {import("next").NextConfig} */
const config = {
...
experimental: {
serverActions: true,
},
};
export default config;
Raw
organization-[org]-page.tsx
import { CreateOrgLink } from "@kinde-oss/kinde-auth-nextjs/server";
export default function Page({ params: { org } }: { params: { org: string } }) {
return (
<div>
<h1>{org}</h1>
<CreateOrgLink orgName={org}>Create Organization</CreateOrgLink>
</div>
);
}
Raw
organization-page.tsx
import { OrgInput } from "./orgInput";
export default function Page() {
return (
<>
<OrgInput />
</>
);
}
Raw
orgInput.tsx
"use client";
import { useState } from "react";
import { createOrgAction } from "../actions";
export const OrgInput = () => {
const [org, setOrg] = useState(null);
return (
<>
<form action={createOrgAction}>
<input
type="text"
placeholder="Organization Name"
name="org"
onChange={(e) => setOrg(e.target.value)}
/>
<button type="submit">Create Organization</button>
</form>
</>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment