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.

#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.

We will use URLPattern to determine what to render. Vite already supports this in dev mode, but you'll need to make sure your server is properly configured or replace this with another routing strategy.

In order to do this, we'll extract the form and the band list from the main.ts file, and export them from their own modules.

#Update our Festival component

We're going to encapsulate our logic for rendering a festival and extract it to its own file. We can import it, and pass in a festival ID to tell it what to render, similar to a front-end framework component.

#Update our New Band component

We're going to do the same thing for our form that adds a new band to our festival. We'll pass in the festival so we can be sure we're adding the band in the right place.

#Create a route

Last, we need to set up our main.ts so that it can react to different routes.

#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