Add Collaboration to your App

This guide will take your festival app to the next level by showing you how to use invite links to collaborate with others.

#Understanding Groups

Jazz uses Groups to manage how users are able to access data. Each group member normally has one of three primary 'roles': reader, writer, or admin.

You can add users to groups manually, or you can use invite links to allow people to join groups themselves. Invite links work even for unauthenticated users!

#Create an invite link

Let's create an invite link that others can use to access our data. We'll create an invite link that allows others to make updates to our festival.

When we create a link, we can choose what level of permission to grant. Here, we want others to be able to collaborate, so we'll grant writer permissions.

#Accept an invite

Now we need to set up a way for Jazz to handle the links for the users who are following them.

Jazz provides a handler which we can add to our Festival component to accept the invite. This will automatically fire when there's an invite link in the URL, and grant the user the right accesses.

"use client";
import {
  createInviteLink,
  useAcceptInvite,
  useAccount,
  useCoState
} from "jazz-tools/react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Festival as FestivalSchema, JazzFestAccount } from "@/app/schema";

export function Festival({id}: {id?: string}) {
  const [inviteLink, setInviteLink] = useState<string>("");
  const { me } = useAccount(JazzFestAccount, {
  const { me, agent } = useAccount(JazzFestAccount, {
    resolve: { root: { myFestival: true } },
  });
  const router = useRouter();
  const isGuest = agent.$type$ !== "Account"
  if (!isGuest) {
    useAcceptInvite({
      invitedObjectSchema: FestivalSchema,
      onAccept: (festivalID: string) => {
        router.push(`/festival/${festivalID}`);
      },
    });
  }
  
  const festivalId = id ?? me?.root.myFestival.$jazz.id;
  const festival = useCoState(FestivalSchema, festivalId);
  if (!festival) return null; // not loaded yet
  const inviteLinkClickHandler = () => {
    const link = createInviteLink(festival, "writer");
    setInviteLink(link);
  };
  return (
    <>
      <ul>
        {festival.map(
          (band) => band && <li key={band.$jazz.id}>{band.name}</li>,
        )}
      </ul>
      <input type="text" value={inviteLink} readOnly />
      <button type="button" onClick={inviteLinkClickHandler}>
        Create Invite Link
      </button>
    </>
  );
}

#Create the festival page

Now we need to create the festival page, so that we can view other people's festivals and collaborate with them.

#Update our Festival component

We're going to continue updating our existing Festival component so that it can optionally take a prop for the festival ID.

#Update our New Band component

We'll also update our NewBand component so that it can take a prop for the festival ID, which will make it reusable on our home page and the new festival page.

#Create a route

#Put it all together

Now we can test it out by inviting someone to collaborate on our festival.

1. Open your app and sign in.
2. Open a new incognito window and sign up with a new passkey.
3. From your first browser tab, create an invite link for the festival.
4. You should be able to invite someone to collaborate on the festival.
5. Paste the invite link into the incognito window. You should be able to add bands to the festival!

Congratulations! 🎉 You've added public sharing to your app! You've learned what groups are, and how Jazz manages permissions, as well as how to invite others to collaborate on data in your app with you.

#Next steps

• Learn how to authenticate users so you can access data wherever you are.
• Discover how you can use groups as members of other groups to build advanced permissions structures.
• Find out how to use server workers to build more complex applications