Better Auth Organizations – Invitation Flow (Part 3)

In this video, we are going to create invitation emails for our organization.

So when we click here, invite org to organization, we are going to send an actual invitation email. Here it is. So

now I can just use this link from here.

And now if I paste it in as the invited user, we are going to see here inside of our organization. If I refresh that or

our organization. If I refresh that or is now part of my organization. This

video is part of the better o starter series and tell me which feature would you like to see next. I'm basically

listening to you guys. And now let's start building this thing. What we have here currently is this dashboard where we have all the organizations that our current user belongs to. So if we click

to any of these organizations, we can see all other users that are not actually in this organization. So what

we want to do is to turn this add orc to organization button to actually invite orc to organization. So he needs to receive an actual email and to be added

to our organization right here. To do

that we are going to the better o documentation. Here we are clicking

documentation. Here we are clicking docs. Then inside the plugins we are

docs. Then inside the plugins we are going to the organization plugin. And

here in the right sidebar, we are going to the invitations feature. So we are going to use this one to implement our organization invitations. And first

organization invitations. And first thing we need to do is to set up our invitation email. So we need to copy and

invitation email. So we need to copy and paste this send invitation email function inside of our organization plug-in. So that one is easy. We're just

plug-in. So that one is easy. We're just

going to our o.ts TS and we need to find our plugins. Here they are.

our plugins. Here they are.

Organization. We are going to paste in this send invitation email function. And

now instead of this send organization invitation, we need to create our actual email templates. So I'm going to take

email templates. So I'm going to take all these props so we can copy paste them to our AI and we are going to use again new email tool for creation of

nicel lookinging emails. And here we're going to say create an email for organization invitation. And here are

organization invitation. And here are the props. So I'm going to paste in the

the props. So I'm going to paste in the props from our function right there. And

now AI is going to create us a nice looking email for this invitation email.

And there it is. This one looks good enough. So we are going to use this one.

enough. So we are going to use this one.

I'm going to copy and paste this entire code. We are going to our email. So here

code. We are going to our email. So here

we have verify email and reset password.

We are going to create a new one organization invitation.tsx.

organization invitation.tsx.

And I'm going to paste in the whole thing. So we are going to remove this

thing. So we are going to remove this preview data here. And for our props, we need to create a nice interface which we

are going to use here. And we shouldn't have any errors. That's it. So

everything should work properly. We just

need to fix this invite link right here and also here to use resend to send everything to our new organization

invitation email like this. Nice. Let's

see what's missing here. We need to fix a little bit of syntax. There it is. So

now we are sending as our email sender name. This one is from our configuration

name. This one is from our configuration to the email which we are sending here.

And this is our subject. It's okay for now. And we have our organization

now. And we have our organization invitation email. So it should work. Now

invitation email. So it should work. Now

we have to fix this invite link. And

there are multiple ways how we can solve this invite link. Basically what is it going to do? All the users that accept the invitation are going to come to this

link and there we can do bunch of logic.

So for example, I had a question. If

user doesn't have an account and we can call some email that is not even in our app, we could here potentially create

our user. So that's why I'm going to

our user. So that's why I'm going to create a completely separated API route here inside of our app API. We can

create here a new folder and we are going to call it accept invitation.

And if we check the documentation right here in the better o we can see that when we are sending the invitation we

need to create that link ourselves. So

it is here. You'll need to construct and send the invitation link to the user. So

the link should include the invitation ID. that is really an important piece of

ID. that is really an important piece of information and which will be used with the accept invitation function when the user clicks on it. So we need to put

this invitation ID as a slug inside of our API route. So here invitation ID and then we are going to create our

route.ts.

route.ts.

So here we can now just export this one and we need to accept our invitation.

For that we can go to the accept invitation function and we are going to choose here the server side. So we are going to paste this one inside of

function right here. So I'm pasting it in accept invitation. We are calling the o from our lib o which is basically our

better o. And here we are just sending

better o. And here we are just sending this invitation ID to our API. And we

can now just console log here the data that we receive. And we can remove this next response. We're not going to return

next response. We're not going to return any response. We are just going to

any response. We are just going to redirect in case that invitation was successful. So now we need to actually

successful. So now we need to actually send our invitation. So for that we are going to this component right here. And

instead of add orc, we are just going to turn it to invite orc. So this one is on our slug page, I'm just typing in slug.

Here it is. Then we have all users. So

here we have the organization ID. We

have the users with the user interface.

So here we have the email name and everything that we need. So we can just turn this add member into the handle invite

member like this. And then here we are going to just rename it. And we again go to the documentation.

We need to find invite. Here it is. So

we are doing it now the client side. I'm

going to copy this code from here and I'm going to add it inside of our handle invite member. I'm going to remove this

invite member. I'm going to remove this add member function. We are adding o client and now we need email. So that

one we have it user email. So we are putting in the user from our user right here. So I'm going to send the whole

here. So I'm going to send the whole user. We just need to change the type.

user. We just need to change the type.

So this one is going to be user. And now

we put in the role member organization ID. We have that one. Resend. We are not

ID. We have that one. Resend. We are not going to use recent because that one is in case we want to resend this invitation if it is already sent. So we

are going to remove this part. And now

we can just put in if error that we put in the toast error and everything. And

we can just remove this data. We're not

going to use it. And here change text instead of added just invited. So now we can actually try it out. Let's get back

to our app. And here we're going to click invite or to organization. And we

have an issue. So let's inspect here and go to the console to see what's going on. So you're not allowed to invite

on. So you're not allowed to invite users to this organization. We don't

have permissions for this. And this is really an interesting issue that we have. So if we go to our permissions, so

have. So if we go to our permissions, so lib off, we can see here that everything looks okay. But what we need to do is

looks okay. But what we need to do is from the better o documentation, if we go here to our access control and

we go to our permissions. So we did all this stuff in the previous video but what we actually need are these default statements and also this admin account.

So we are going to add this part inside of our permissions file and we are going to add it here in the statements default

statements and also for our owner. So

here we need all those default statements in order for this one to work. So let's try it out now. Now, if

work. So let's try it out now. Now, if

we invite, let's see if it's going to work. Invite or to organization. And

work. Invite or to organization. And

there it is. Invitation sent to members.

So, now I should receive here the invitation email. And here it is. It's

invitation email. And here it is. It's

looking really nice, exactly how we made it. Let's make it a little bit bigger.

it. Let's make it a little bit bigger.

So, we have the accept invitation button, but this link is not leading us where it should. So, we need to change

that. So here inside of our o.ts

that. So here inside of our o.ts we need to turn this invite link into something that we created and that's

that API route. So here we are going to put the next public URL and then let's see what's the name actually of our route. So it's accept invitation and

route. So it's accept invitation and then the invitation ID. So it should be good like this except we need to add

just API. So now we should actually

just API. So now we should actually shoot our actual API route and let's go there to our accept invitation and here

we are just going to say redirect and we can just lead maybe better to dashboard like this. So we are going to

import redirect from next navigation.

Delete this console log. And actually no let's leave this console log so we can see what we have. In case of some error we can just put in here try and catch.

So like this. Here we're going to put redirect. And here console log error. Or

redirect. And here console log error. Or

we can simply just throw some error also like this. Awesome. So let's now try it

like this. Awesome. So let's now try it out. We need to invite again our orc

out. We need to invite again our orc user. So inviting you here. I'm going to

user. So inviting you here. I'm going to delete this thingy. Fail to invite member. Okay. So that user is already

member. Okay. So that user is already invited to this organization.

Okay. So let's first just put normal messages here. All users. So handle

messages here. All users. So handle

invite member. We are going to put toast message to be actually our error dossage like this. So we can see here normal

like this. So we can see here normal message what is actually happening. So

this message really looks good. That's a

good thing with better off. They're

creating really nice messages for our users. Let's delete now the invitation

users. Let's delete now the invitation from our database. So I'm going to the tables invitation. And here it is. We

tables invitation. And here it is. We

have this invitation. I'm just going to delete this one so we can send a new one. And now we can invite or to

one. And now we can invite or to organization. invitation sent to our

organization. invitation sent to our members. So, I can click now on that

members. So, I can click now on that link that we have. Here it is. I have

the new email. I'm going to just copy this path right here. I'm going to copy this link and I'm going to bring in now

another window where I'm logged in as that other user and we are going to paste in that link. So, here it is.

accept invitation and let's see what kind of errors we have. So first error is that we are unauthorized to do this.

So that means that inside of our API route the application doesn't see if we are logged in or not. And the other one is that we need to send back a next

response. That is my bad. So let's fix

response. That is my bad. So let's fix all those things. I'm going to the route accept invitation. So instead of

accept invitation. So instead of redirect we are going to say return next response redirect and I'm going to import that one from next server and

also here we are going to do exactly the same thing. So in case that we have an

same thing. So in case that we have an error we are just going to redirect to our dashboard. So we are presuming that

our dashboard. So we are presuming that here our user is logged in and that's the problem here why we are getting that error from better o. So we need to send

here our headers. There it is. AI

already knows it and we are going to import it from next headers. So now that one should work. Let's see if it is working or not. We are going to that

second user. I'm going to click enter

second user. I'm going to click enter here again for our invitation and let's see if it is working or not. So we are in and we can see that we are part of my

organization. But let's check it inside

organization. But let's check it inside of our database just in case. So

invitations. I'm refreshing this one and we can see the new invitation and status is accepted. So this one is working. And

is accepted. So this one is working. And

if we go to members, we can see that let's say here it is the 31st of July.

That's today. We accepted this user and he is a member of the my organization organization. So we successfully

organization. So we successfully accepted the invitation and that part is working. Awesome. And if we get back now

working. Awesome. And if we get back now to our app and here we can see that only org dev is part of the organization. So

if I refresh the screen we are going to get also orc here. So the entire feature is working and we can now send invitations to every user from this

list. So next feature that we can work

list. So next feature that we can work on, we could put here an input where we can send invitation to users that don't exist in our database. So when we click

invite, we can first create user account inside of our DB. We can check if that user already exists and after that send

the invitation to that user. So then

user can click the invitation, log in inside of the app and get accepted to the organization and be part of this page right Here.