#FOMO fear of missing out, is the social anxiety you feel when you're not invited to the cool new social media Clubhouse. Turn your fomo into jomo by coding up invite-only phone authentication with React & Firebase https://fireship.io/lessons/invite-only-firebase-phone-auth


Source code: https://github.com/fireship-io/invite-only-phone-auth
Firebase Phone Auth: https://firebase.google.com/docs/auth/web/phone-auth
Clubhouse App: https://apps.apple.com/us/app/clubhouse-drop-in-audio-chat/id1503133294

#tech #dev

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:16:51.265Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
2d5e3f0a-eccf-4f0f-b8c3-23593af7406e
ade79a2059610f0a756b3d188cc36e50bf7e59ff2d89b15ea97b0e1dcdebe066
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
FOMO, fear of missing out, is the social anxiety you feel when all your friends get invited to Timmy's birthday party, but you're stuck at home watching TV with your creepy uncle.
We live in a world where almost everybody is psychologically dependent on social media, and that's great news if you're an app developer because it's easy to harness people's social anxiety to grow your user base and make your VC backers unbelievably rich and happy.
In today's tutorial, you'll learn how to manipulate FOMO from in marketing perspective by building an invite only app inspired by Clubhouse from a technical perspective.
Marketers have been using FOMO for 1000 of years, but the modern term Was coined in 1996 by doctor Dan Herman.
It's used shamelessly as a marketing technique all over the tech world.
Buy Bitcoin, get on TikTok, get Get a Google plus invite, and most recently, get on Clubhouse.
Clubhouse, as the name implies, is an invite only app where you can listen to people talk about stuff, like Elon Musk creating more FOMO for Bitcoin, for example.
As an end user, it's kind of like being in an office building where you get to go to a bunch of meetings all day.
Sounds like fun, but you can only get in the clubhouse if someone invites you with your phone number.
But once you're in, you then get to invites to send to your best friends.
Then they invite 2 of their best friends, and the cycle continues until you have a massive FOMO pyramid.
It's not a pyramid scheme.
It is a it's not even a scheme per Say it's And that's a much more cost effective way to get users than spending most of your series a on Facebook ads.
The whole thing is a marketer's dream, really.
You have all the cool kids talking about it on social media, and if you happen to be a loser without an invite, you'll need to go beg for one from your best friend.
But, when your best friend says they gave out their invites to their better best friends, you'll just have to pretend like you don't care.
And that's what we call 100% organic, locally sourced fear of missing out.
FOMO can literally get people to do anything, like invest in assets that are worth almost nothing, buy stupid products that nobody needs, and even download apps that aren't all that good.
And now that you know how powerful it is, let's have some fun and take a look at How to implement FOMO from a technical perspective.
Now, before we get into the code, I want to point out that we'll be going through things pretty quickly, but you can reference the full source code on GitHub, and also the article on Fireship IO.
We'll be using React and Firebase for the refi stack for this demo, but You can apply the same logic to virtually any tech stack.
If we open up the demo, you'll notice a sign in page where the user is first required to enter their phone number.
If that phone number is not on the invite list in our database, then they can't sign in.
The invite list is just a database collection in Firestore where each document ID in the database is the phone number that's been invited.
Then it contains a field of sender that has the user ID of whoever or sent the invite.
But if the number is on the invite list, then the user can sign in.
When the button is clicked, it will send a text message to that phone number, then have the user verify the code in this form.
At which point, the user is signed in to the application.
And once authenticated, they can then invite the phone numbers of their best friends.
This will create a new invite in the database, which will then trigger a cloud function to send that user a text message inviting them to use the app.
Now one important thing to point out here is that Firebase will will automatically send the first text message for the user to verify the sign in.
The second message though, that goes to the invited user, will need to be sent programmatically, which is not something that Firebase can do.
But there are many programmatic SMS APIs out there with with the most famous option being Twilio.
I'm not a huge fan of Twilio myself, but luckily, there are a lot of good alternatives out there.
I've heard good is about MessageBird, and the API we'll be using in this video is Plivo.
It has a really nice UI and will give you a free phone number and credit to get started in the sandbox.
Now let's go ahead and jump into the source code.
To build this app, I started with a generic React application using the create react app Well, inside the project, I've installed 2 dependencies, Firebase and React Firebase Hooks.
The entire front end source code is contained inside the app dotjs file.
If we go in there, we'll import our Firebase dependencies, which include Firebase auth and Firestore, along with a few built in hooks from React And then the useAuthState hook from React Firebase Hooks, which allows us to listen to the state of the current user, whether they're logged in or logged out.
And lastly, we have use collection data, which allows us to make a query to a collection in the Firestore database and update the UI in real time whenever the data in that collection changes.
From there, we'll need to connect our Firebase project to the React app.
We can do that by creating a web app from the Firebase console, which will give us a set of project credentials to copy.
And while we're in the Firebase console, let's go over to the authentication tab and make sure to enable phone authentication.
Now we can go back to our code and initialize the Firebase this app.
The 2 SDKs that we'll be using are Firebase auth and Firestore, so let's go ahead and reference those as global variables.
In the root app component, we're going to Listen to the user's authentication state.
If we do have a user, which means they're logged in, then we'll go ahead and render the send invites component, which takes the current user as a prop.
Otherwise, we'll show the sign up component.
The initial user state will be signed out, so let's go ahead and focus on the sign up component.
Now in order to implement phone authentication, the user will need to verify a CAPTCHA.
Normally, this means the user has to go through the and process, uh, verifying that they're not a spam bot.
However, the modern user friendly way to do this is with an invisible recaptcha, which will attempt to verify the user in the background and only ask them questions when it's absolutely necessary.
To implement an invisible recaptcha, we'll first set it up as state on the component using the use state hook, and then we're going to reference a native DOM element with the use ref hook.
You need to have an empty div somewhere in the UI to attach the recaptcha to.
From there, we'll implement a callback in the useEffect hook.
If the recaptcha has not been defined yet, then we'll go ahead and define it by creating a new instance of a Firebase auth recaptchaverifier.
It takes the empty div as its first argument, then options as the second argument.
We'll just wanna make sure that it has a size of invisible.
From there, we can verify it by calling the verify method, which returns a promise.
And then once verified, we'll go ahead and set the reCAPTCHA instance on the component state.
And now that we have that state, we can go into the JSX and render a phone number verification component that passes the reCAPTCHA down as a prop.
That allows us to only show the login form after the reCAPTCHA has been verified.
Now let's implement the phone number verification component.
Its purpose is to collect the user's phone number digits from a form, then make a read request to Firestore to validate that that number has been invited.
If the number has been invited, then we'll set that value to true, And then the user can log in and Firebase will return a confirmation result, which is just a confirmation that they sent a text message to that user.
The user will then need to verify that code in a second form, and once that's verified, we can consider them fully dedicated.
Now, one final thing I'm doing here is formatting the number with a plus one in front of it.
When working with any programmatic phone API, they almost always want the phone number in echo 164 format.
It's just a plus sign with the country code followed by the main phone number digits.
Now in the JSX, we're going to create a controlled form input with React by setting the value to the digit state, then we'll update the state with the current value by listening to the onChange event and setting the digits to the value in the form when they change.
From there, we can implement to useEffect hook and give it the phone number as a dependency.
If the phone number length equals 12, then we know we have a full length phone number, at which point we can make a read request to the database to see if that phone number exists in the invites collection.
Refgit will read the document, And if it exists, then we'll go ahead and set the invited state to exist, which will either be true or false.
From there, we can go back to the HTML and we'll add a button that is hidden if the user is not invited.
But if they are invited, then we'll fire the sign in with phone number method when the button is clicked.
We'll make it an async function So we can await the auth sign in with phone number method, which takes the phone number and the recaptcha as arguments.
The return value is the confirmation result, which again and is a confirmation from Firebase that they sent a text message to that user.
The final step in this component is to then show another form when that confirmation result is present.
It's also a controlled input on the code state on the component.
Then below that, we have a button that will fire the verify code function when it's clicked.
The verify code function is also an async function that will confirm the code on the confirmation result.
And that's how we get an invited user logged into the app.
But now that they're logged in, we need to give them a way to send invites to their friends.
The front end implementation happens here in the send invites component.
1st, we have a database query that grabs all of the invites that that user has sent.
If the query length is less than too, then we allow that user to create a new invite in the database with somebody else's phone number.
That's easy enough, but The tricky part is how do we now send a text message to that user?
That's a job that needs to happen from a back end server, which we can implement in Firebase using Cloud Functions.
By running the Firebase init functions command, I can quickly add a back end to this React app.
Let's go into the functions directory and open the index dotjs file.
Now what we want our back end to do is run a cloud function whenever a new Firestore document is created in the invites its collection.
That's really easy to achieve by simply exporting a function that points to that path in the database.
Then we use on create to run some back end code whenever a new document is created there.
To send a text message, we need 3 pieces of information.
We need the from phone number, which is our phone number, the to number, which is the 1 the user has invited to the app and then the actual message that we want to send to that phone number.
Now in order to send the text, we need to use a third party service like Twilio or in this case, Plivo.
Plivo has an SDK for Node, so we can install that in the functions directory with npm.
We can then import it And then initialize the client with our ID and token, which you'll find on the dashboard when you sign up for this service.
And finally, we send the text message by calling client messages create.
That returns a promise, so we'll make it the return value from the function because a Cloud Function expects a promise as its return value.
You can deploy your back end to the cloud by running Firebase deploy only functions.
And now if you go to the UI and create a new invite, it should send a text message to that user.
Congratulations.
You no longer have FOMO but JOMO because you can just build your own FOMO driven app from scratch.
I'm gonna go ahead and wrap things up there, but I do wanna point out that the code we've implemented is not fully secure yet because we haven't implemented Firestorm rules yet.
If you wanna learn how to build fully secure features with React and Firebase, consider becoming a pro member at Fireship IO and taking my full course on that topic.
Thanks for watching, and I will see you in the next one.

Speaker 0: FOMO, fear of missing out, is the social anxiety you feel when all your friends get invited to Timmy's birthday party, but you're stuck at home watching TV with your creepy uncle. We live in a world where almost everybody is psychologically dependent on social media, and that's great news if you're an app developer because it's easy to harness people's social anxiety to grow your user base and make your VC backers unbelievably rich and happy. In today's tutorial, you'll learn how to manipulate FOMO from in marketing perspective by building an invite only app inspired by Clubhouse from a technical perspective. Marketers have been using FOMO for 1000 of years, but the modern term Was coined in 1996 by doctor Dan Herman. It's used shamelessly as a marketing technique all over the tech world.

Buy Bitcoin, get on TikTok, get Get a Google plus invite, and most recently, get on Clubhouse. Clubhouse, as the name implies, is an invite only app where you can listen to people talk about stuff, like Elon Musk creating more FOMO for Bitcoin, for example. As an end user, it's kind of like being in an office building where you get to go to a bunch of meetings all day. Sounds like fun, but you can only get in the clubhouse if someone invites you with your phone number. But once you're in, you then get to invites to send to your best friends.

Then they invite 2 of their best friends, and the cycle continues until you have a massive FOMO pyramid. It's not a pyramid scheme. It is a it's not even a scheme per Say it's And that's a much more cost effective way to get users than spending most of your series a on Facebook ads. The whole thing is a marketer's dream, really. You have all the cool kids talking about it on social media, and if you happen to be a loser without an invite, you'll need to go beg for one from your best friend.

But, when your best friend says they gave out their invites to their better best friends, you'll just have to pretend like you don't care. And that's what we call 100% organic, locally sourced fear of missing out. FOMO can literally get people to do anything, like invest in assets that are worth almost nothing, buy stupid products that nobody needs, and even download apps that aren't all that good. And now that you know how powerful it is, let's have some fun and take a look at How to implement FOMO from a technical perspective. Now, before we get into the code, I want to point out that we'll be going through things pretty quickly, but you can reference the full source code on GitHub, and also the article on Fireship IO.

We'll be using React and Firebase for the refi stack for this demo, but You can apply the same logic to virtually any tech stack. If we open up the demo, you'll notice a sign in page where the user is first required to enter their phone number. If that phone number is not on the invite list in our database, then they can't sign in. The invite list is just a database collection in Firestore where each document ID in the database is the phone number that's been invited. Then it contains a field of sender that has the user ID of whoever or sent the invite.

But if the number is on the invite list, then the user can sign in. When the button is clicked, it will send a text message to that phone number, then have the user verify the code in this form. At which point, the user is signed in to the application. And once authenticated, they can then invite the phone numbers of their best friends. This will create a new invite in the database, which will then trigger a cloud function to send that user a text message inviting them to use the app.

Now one important thing to point out here is that Firebase will will automatically send the first text message for the user to verify the sign in. The second message though, that goes to the invited user, will need to be sent programmatically, which is not something that Firebase can do. But there are many programmatic SMS APIs out there with with the most famous option being Twilio. I'm not a huge fan of Twilio myself, but luckily, there are a lot of good alternatives out there. I've heard good is about MessageBird, and the API we'll be using in this video is Plivo.

It has a really nice UI and will give you a free phone number and credit to get started in the sandbox. Now let's go ahead and jump into the source code. To build this app, I started with a generic React application using the create react app Well, inside the project, I've installed 2 dependencies, Firebase and React Firebase Hooks. The entire front end source code is contained inside the app dotjs file. If we go in there, we'll import our Firebase dependencies, which include Firebase auth and Firestore, along with a few built in hooks from React And then the useAuthState hook from React Firebase Hooks, which allows us to listen to the state of the current user, whether they're logged in or logged out.

And lastly, we have use collection data, which allows us to make a query to a collection in the Firestore database and update the UI in real time whenever the data in that collection changes. From there, we'll need to connect our Firebase project to the React app. We can do that by creating a web app from the Firebase console, which will give us a set of project credentials to copy. And while we're in the Firebase console, let's go over to the authentication tab and make sure to enable phone authentication. Now we can go back to our code and initialize the Firebase this app.

The 2 SDKs that we'll be using are Firebase auth and Firestore, so let's go ahead and reference those as global variables. In the root app component, we're going to Listen to the user's authentication state. If we do have a user, which means they're logged in, then we'll go ahead and render the send invites component, which takes the current user as a prop. Otherwise, we'll show the sign up component. The initial user state will be signed out, so let's go ahead and focus on the sign up component.

Now in order to implement phone authentication, the user will need to verify a CAPTCHA. Normally, this means the user has to go through the and process, uh, verifying that they're not a spam bot. However, the modern user friendly way to do this is with an invisible recaptcha, which will attempt to verify the user in the background and only ask them questions when it's absolutely necessary. To implement an invisible recaptcha, we'll first set it up as state on the component using the use state hook, and then we're going to reference a native DOM element with the use ref hook. You need to have an empty div somewhere in the UI to attach the recaptcha to.

From there, we'll implement a callback in the useEffect hook. If the recaptcha has not been defined yet, then we'll go ahead and define it by creating a new instance of a Firebase auth recaptchaverifier. It takes the empty div as its first argument, then options as the second argument. We'll just wanna make sure that it has a size of invisible. From there, we can verify it by calling the verify method, which returns a promise.

And then once verified, we'll go ahead and set the reCAPTCHA instance on the component state. And now that we have that state, we can go into the JSX and render a phone number verification component that passes the reCAPTCHA down as a prop. That allows us to only show the login form after the reCAPTCHA has been verified. Now let's implement the phone number verification component. Its purpose is to collect the user's phone number digits from a form, then make a read request to Firestore to validate that that number has been invited.

If the number has been invited, then we'll set that value to true, And then the user can log in and Firebase will return a confirmation result, which is just a confirmation that they sent a text message to that user. The user will then need to verify that code in a second form, and once that's verified, we can consider them fully dedicated. Now, one final thing I'm doing here is formatting the number with a plus one in front of it. When working with any programmatic phone API, they almost always want the phone number in echo 164 format. It's just a plus sign with the country code followed by the main phone number digits.

Now in the JSX, we're going to create a controlled form input with React by setting the value to the digit state, then we'll update the state with the current value by listening to the onChange event and setting the digits to the value in the form when they change. From there, we can implement to useEffect hook and give it the phone number as a dependency. If the phone number length equals 12, then we know we have a full length phone number, at which point we can make a read request to the database to see if that phone number exists in the invites collection. Refgit will read the document, And if it exists, then we'll go ahead and set the invited state to exist, which will either be true or false. From there, we can go back to the HTML and we'll add a button that is hidden if the user is not invited.

But if they are invited, then we'll fire the sign in with phone number method when the button is clicked. We'll make it an async function So we can await the auth sign in with phone number method, which takes the phone number and the recaptcha as arguments. The return value is the confirmation result, which again and is a confirmation from Firebase that they sent a text message to that user. The final step in this component is to then show another form when that confirmation result is present. It's also a controlled input on the code state on the component.

Then below that, we have a button that will fire the verify code function when it's clicked. The verify code function is also an async function that will confirm the code on the confirmation result. And that's how we get an invited user logged into the app. But now that they're logged in, we need to give them a way to send invites to their friends. The front end implementation happens here in the send invites component.

1st, we have a database query that grabs all of the invites that that user has sent. If the query length is less than too, then we allow that user to create a new invite in the database with somebody else's phone number. That's easy enough, but The tricky part is how do we now send a text message to that user? That's a job that needs to happen from a back end server, which we can implement in Firebase using Cloud Functions. By running the Firebase init functions command, I can quickly add a back end to this React app.

Let's go into the functions directory and open the index dotjs file. Now what we want our back end to do is run a cloud function whenever a new Firestore document is created in the invites its collection. That's really easy to achieve by simply exporting a function that points to that path in the database. Then we use on create to run some back end code whenever a new document is created there. To send a text message, we need 3 pieces of information.

We need the from phone number, which is our phone number, the to number, which is the 1 the user has invited to the app and then the actual message that we want to send to that phone number. Now in order to send the text, we need to use a third party service like Twilio or in this case, Plivo. Plivo has an SDK for Node, so we can install that in the functions directory with npm. We can then import it And then initialize the client with our ID and token, which you'll find on the dashboard when you sign up for this service. And finally, we send the text message by calling client messages create.

That returns a promise, so we'll make it the return value from the function because a Cloud Function expects a promise as its return value. You can deploy your back end to the cloud by running Firebase deploy only functions. And now if you go to the UI and create a new invite, it should send a text message to that user. Congratulations. You no longer have FOMO but JOMO because you can just build your own FOMO driven app from scratch.

I'm gonna go ahead and wrap things up there, but I do wanna point out that the code we've implemented is not fully secure yet because we haven't implemented Firestorm rules yet. If you wanna learn how to build fully secure features with React and Firebase, consider becoming a pro member at Fireship IO and taking my full course on that topic. Thanks for watching, and I will see you in the next one.
FOMO, fear of missing out, is the social anxiety you feel when all your friends get invited to Timmy's birthday party, but you're stuck at home watching TV with your creepy uncle. We live in a world where almost everybody is psychologically dependent on social media, and that's great news if you're an app developer because it's easy to harness people's social anxiety to grow your user base and make your VC backers unbelievably rich and happy. In today's tutorial, you'll learn how to manipulate FOMO from in marketing perspective by building an invite only app inspired by Clubhouse from a technical perspective. Marketers have been using FOMO for 1000 of years, but the modern term Was coined in 1996 by doctor Dan Herman. It's used shamelessly as a marketing technique all over the tech world. Buy Bitcoin, get on TikTok, get Get a Google plus invite, and most recently, get on Clubhouse.
social media
marketing
advertising
industry
customers
Clubhouse, as the name implies, is an invite only app where you can listen to people talk about stuff, like Elon Musk creating more FOMO for Bitcoin, for example. As an end user, it's kind of like being in an office building where you get to go to a bunch of meetings all day. Sounds like fun, but you can only get in the clubhouse if someone invites you with your phone number. But once you're in, you then get to invites to send to your best friends. Then they invite 2 of their best friends, and the cycle continues until you have a massive FOMO pyramid. It's not a pyramid scheme. It is a it's not even a scheme per Say it's And that's a much more cost effective way to get users than spending most of your series a on Facebook ads. The whole thing is a marketer's dream, really. You have all the cool kids talking about it on social media, and if you happen to be a loser without an invite, you'll need to go beg for one from your best friend. But, when your best friend says they gave out their invites to their better best friends, you'll just have to pretend like you don't care. And that's what we call 100% organic, locally sourced fear of missing out. FOMO can literally get people to do anything, like invest in assets that are worth almost nothing, buy stupid products that nobody needs, and even download apps that aren't all that good.
And now that you know how powerful it is, let's have some fun and take a look at How to implement FOMO from a technical perspective. Now, before we get into the code, I want to point out that we'll be going through things pretty quickly, but you can reference the full source code on GitHub, and also the article on Fireship IO. We'll be using React and Firebase for the refi stack for this demo, but You can apply the same logic to virtually any tech stack.
software
If we open up the demo, you'll notice a sign in page where the user is first required to enter their phone number. If that phone number is not on the invite list in our database, then they can't sign in.
The invite list is just a database collection in Firestore where each document ID in the database is the phone number that's been invited. Then it contains a field of sender that has the user ID of whoever or sent the invite. But if the number is on the invite list, then the user can sign in.
databases
When the button is clicked, it will send a text message to that phone number, then have the user verify the code in this form. At which point, the user is signed in to the application. And once authenticated, they can then invite the phone numbers of their best friends. This will create a new invite in the database, which will then trigger a cloud function to send that user a text message inviting them to use the app. Now one important thing to point out here is that Firebase will will automatically send the first text message for the user to verify the sign in.
The second message though, that goes to the invited user, will need to be sent programmatically, which is not something that Firebase can do. But there are many programmatic SMS APIs out there with with the most famous option being Twilio. I'm not a huge fan of Twilio myself, but luckily, there are a lot of good alternatives out there. I've heard good is about MessageBird, and the API we'll be using in this video is Plivo. It has a really nice UI and will give you a free phone number and credit to get started in the sandbox. Now let's go ahead and jump into the source code. To build this app, I started with a generic React application using the create react app Well, inside the project, I've installed 2 dependencies, Firebase and React Firebase Hooks. The entire front end source code is contained inside the app dotjs file. If we go in there, we'll import our Firebase dependencies, which include Firebase auth and Firestore, along with a few built in hooks from React And then the useAuthState hook from React Firebase Hooks, which allows us to listen to the state of the current user, whether they're logged in or logged out. And lastly, we have use collection data, which allows us to make a query to a collection in the Firestore database and update the UI in real time whenever the data in that collection changes. From there, we'll need to connect our Firebase project to the React app. We can do that by creating a web app from the Firebase console, which will give us a set of project credentials to copy.
twitter
databases
software
software development
And while we're in the Firebase console, let's go over to the authentication tab and make sure to enable phone authentication. Now we can go back to our code and initialize the Firebase this app. The 2 SDKs that we'll be using are Firebase auth and Firestore, so let's go ahead and reference those as global variables. In the root app component, we're going to Listen to the user's authentication state. If we do have a user, which means they're logged in, then we'll go ahead and render the send invites component, which takes the current user as a prop. Otherwise, we'll show the sign up component. The initial user state will be signed out, so let's go ahead and focus on the sign up component. Now in order to implement phone authentication, the user will need to verify a CAPTCHA. Normally, this means the user has to go through the and process, uh, verifying that they're not a spam bot. However, the modern user friendly way to do this is with an invisible recaptcha, which will attempt to verify the user in the background and only ask them questions when it's absolutely necessary. To implement an invisible recaptcha, we'll first set it up as state on the component using the use state hook, and then we're going to reference a native DOM element with the use ref hook. You need to have an empty div somewhere in the UI to attach the recaptcha to. From there, we'll implement a callback in the useEffect hook. If the recaptcha has not been defined yet, then we'll go ahead and define it by creating a new instance of a Firebase auth recaptchaverifier. It takes the empty div as its first argument, then options as the second argument. We'll just wanna make sure that it has a size of invisible. From there, we can verify it by calling the verify method, which returns a promise. And then once verified, we'll go ahead and set the reCAPTCHA instance on the component state. And now that we have that state, we can go into the JSX and render a phone number verification component that passes the reCAPTCHA down as a prop. That allows us to only show the login form after the reCAPTCHA has been verified. Now let's implement the phone number verification component. Its purpose is to collect the user's phone number digits from a form, then make a read request to Firestore to validate that that number has been invited. If the number has been invited, then we'll set that value to true, And then the user can log in and Firebase will return a confirmation result, which is just a confirmation that they sent a text message to that user. The user will then need to verify that code in a second form, and once that's verified, we can consider them fully dedicated. Now, one final thing I'm doing here is formatting the number with a plus one in front of it. When working with any programmatic phone API, they almost always want the phone number in echo 164 format. It's just a plus sign with the country code followed by the main phone number digits. Now in the JSX, we're going to create a controlled form input with React by setting the value to the digit state, then we'll update the state with the current value by listening to the onChange event and setting the digits to the value in the form when they change.
From there, we can implement to useEffect hook and give it the phone number as a dependency. If the phone number length equals 12, then we know we have a full length phone number, at which point we can make a read request to the database to see if that phone number exists in the invites collection.
phones
Refgit will read the document, And if it exists, then we'll go ahead and set the invited state to exist, which will either be true or false. From there, we can go back to the HTML and we'll add a button that is hidden if the user is not invited. But if they are invited, then we'll fire the sign in with phone number method when the button is clicked. We'll make it an async function So we can await the auth sign in with phone number method, which takes the phone number and the recaptcha as arguments. The return value is the confirmation result, which again and is a confirmation from Firebase that they sent a text message to that user. The final step in this component is to then show another form when that confirmation result is present. It's also a controlled input on the code state on the component. Then below that, we have a button that will fire the verify code function when it's clicked. The verify code function is also an async function that will confirm the code on the confirmation result. And that's how we get an invited user logged into the app. But now that they're logged in, we need to give them a way to send invites to their friends. The front end implementation happens here in the send invites component. 1st, we have a database query that grabs all of the invites that that user has sent. If the query length is less than too, then we allow that user to create a new invite in the database with somebody else's phone number. That's easy enough, but The tricky part is how do we now send a text message to that user? That's a job that needs to happen from a back end server, which we can implement in Firebase using Cloud Functions. By running the Firebase init functions command, I can quickly add a back end to this React app. Let's go into the functions directory and open the index dotjs file. Now what we want our back end to do is run a cloud function whenever a new Firestore document is created in the invites its collection.
That's really easy to achieve by simply exporting a function that points to that path in the database. Then we use on create to run some back end code whenever a new document is created there. To send a text message, we need 3 pieces of information. We need the from phone number, which is our phone number, the to number, which is the 1 the user has invited to the app and then the actual message that we want to send to that phone number.
phones
databases
Now in order to send the text, we need to use a third party service like Twilio or in this case, Plivo. Plivo has an SDK for Node, so we can install that in the functions directory with npm. We can then import it And then initialize the client with our ID and token, which you'll find on the dashboard when you sign up for this service. And finally, we send the text message by calling client messages create. That returns a promise, so we'll make it the return value from the function because a Cloud Function expects a promise as its return value. You can deploy your back end to the cloud by running Firebase deploy only functions. And now if you go to the UI and create a new invite, it should send a text message to that user. Congratulations. You no longer have FOMO but JOMO because you can just build your own FOMO driven app from scratch. I'm gonna go ahead and wrap things up there, but I do wanna point out that the code we've implemented is not fully secure yet because we haven't implemented Firestorm rules yet.
If you wanna learn how to build fully secure features with React and Firebase, consider becoming a pro member at Fireship IO and taking my full course on that topic. Thanks for watching, and I will see you in the next one.
security
FOMO, fear of missing out, is the social anxiety you feel when all your friends get invited to Timmy's birthday party, but you're stuck at home watching TV with your creepy uncle. We live in a world where almost everybody is psychologically dependent on social media, and that's great news if you're an app developer because it's easy to harness people's social anxiety to grow your user base and make your VC backers unbelievably rich and happy. In today's tutorial, you'll learn how to manipulate FOMO from in marketing perspective by building an invite only app inspired by Clubhouse from a technical perspective. Marketers have been using FOMO for 1000 of years, but the modern term Was coined in 1996 by doctor Dan Herman. It's used shamelessly as a marketing technique all over the tech world. Buy Bitcoin, get on TikTok, get Get a Google plus invite, and most recently, get on Clubhouse. Clubhouse, as the name implies, is an invite only app where you can listen to people talk about stuff, like Elon Musk creating more FOMO for Bitcoin, for example. As an end user, it's kind of like being in an office building where you get to go to a bunch of meetings all day. Sounds like fun, but you can only get in the clubhouse if someone invites you with your phone number. But once you're in, you then get to invites to send to your best friends. Then they invite 2 of their best friends, and the cycle continues until you have a massive FOMO pyramid. It's not a pyramid scheme. It is a it's not even a scheme per Say it's And that's a much more cost effective way to get users than spending most of your series a on Facebook ads. The whole thing is a marketer's dream, really. You have all the cool kids talking about it on social media, and if you happen to be a loser without an invite, you'll need to go beg for one from your best friend. But, when your best friend says they gave out their invites to their better best friends, you'll just have to pretend like you don't care. And that's what we call 100% organic, locally sourced fear of missing out. FOMO can literally get people to do anything, like invest in assets that are worth almost nothing, buy stupid products that nobody needs, and even download apps that aren't all that good. And now that you know how powerful it is, let's have some fun and take a look at How to implement FOMO from a technical perspective. Now, before we get into the code, I want to point out that we'll be going through things pretty quickly, but you can reference the full source code on GitHub, and also the article on Fireship IO. We'll be using React and Firebase for the refi stack for this demo, but You can apply the same logic to virtually any tech stack. If we open up the demo, you'll notice a sign in page where the user is first required to enter their phone number. If that phone number is not on the invite list in our database, then they can't sign in. The invite list is just a database collection in Firestore where each document ID in the database is the phone number that's been invited. Then it contains a field of sender that has the user ID of whoever or sent the invite. But if the number is on the invite list, then the user can sign in. When the button is clicked, it will send a text message to that phone number, then have the user verify the code in this form. At which point, the user is signed in to the application. And once authenticated, they can then invite the phone numbers of their best friends. This will create a new invite in the database, which will then trigger a cloud function to send that user a text message inviting them to use the app. Now one important thing to point out here is that Firebase will will automatically send the first text message for the user to verify the sign in. The second message though, that goes to the invited user, will need to be sent programmatically, which is not something that Firebase can do. But there are many programmatic SMS APIs out there with with the most famous option being Twilio. I'm not a huge fan of Twilio myself, but luckily, there are a lot of good alternatives out there. I've heard good is about MessageBird, and the API we'll be using in this video is Plivo. It has a really nice UI and will give you a free phone number and credit to get started in the sandbox. Now let's go ahead and jump into the source code. To build this app, I started with a generic React application using the create react app Well, inside the project, I've installed 2 dependencies, Firebase and React Firebase Hooks. The entire front end source code is contained inside the app dotjs file. If we go in there, we'll import our Firebase dependencies, which include Firebase auth and Firestore, along with a few built in hooks from React And then the useAuthState hook from React Firebase Hooks, which allows us to listen to the state of the current user, whether they're logged in or logged out. And lastly, we have use collection data, which allows us to make a query to a collection in the Firestore database and update the UI in real time whenever the data in that collection changes. From there, we'll need to connect our Firebase project to the React app. We can do that by creating a web app from the Firebase console, which will give us a set of project credentials to copy. And while we're in the Firebase console, let's go over to the authentication tab and make sure to enable phone authentication. Now we can go back to our code and initialize the Firebase this app. The 2 SDKs that we'll be using are Firebase auth and Firestore, so let's go ahead and reference those as global variables. In the root app component, we're going to Listen to the user's authentication state. If we do have a user, which means they're logged in, then we'll go ahead and render the send invites component, which takes the current user as a prop. Otherwise, we'll show the sign up component. The initial user state will be signed out, so let's go ahead and focus on the sign up component. Now in order to implement phone authentication, the user will need to verify a CAPTCHA. Normally, this means the user has to go through the and process, uh, verifying that they're not a spam bot. However, the modern user friendly way to do this is with an invisible recaptcha, which will attempt to verify the user in the background and only ask them questions when it's absolutely necessary. To implement an invisible recaptcha, we'll first set it up as state on the component using the use state hook, and then we're going to reference a native DOM element with the use ref hook. You need to have an empty div somewhere in the UI to attach the recaptcha to. From there, we'll implement a callback in the useEffect hook. If the recaptcha has not been defined yet, then we'll go ahead and define it by creating a new instance of a Firebase auth recaptchaverifier. It takes the empty div as its first argument, then options as the second argument. We'll just wanna make sure that it has a size of invisible. From there, we can verify it by calling the verify method, which returns a promise. And then once verified, we'll go ahead and set the reCAPTCHA instance on the component state. And now that we have that state, we can go into the JSX and render a phone number verification component that passes the reCAPTCHA down as a prop. That allows us to only show the login form after the reCAPTCHA has been verified. Now let's implement the phone number verification component. Its purpose is to collect the user's phone number digits from a form, then make a read request to Firestore to validate that that number has been invited. If the number has been invited, then we'll set that value to true, And then the user can log in and Firebase will return a confirmation result, which is just a confirmation that they sent a text message to that user. The user will then need to verify that code in a second form, and once that's verified, we can consider them fully dedicated. Now, one final thing I'm doing here is formatting the number with a plus one in front of it. When working with any programmatic phone API, they almost always want the phone number in echo 164 format. It's just a plus sign with the country code followed by the main phone number digits. Now in the JSX, we're going to create a controlled form input with React by setting the value to the digit state, then we'll update the state with the current value by listening to the onChange event and setting the digits to the value in the form when they change. From there, we can implement to useEffect hook and give it the phone number as a dependency. If the phone number length equals 12, then we know we have a full length phone number, at which point we can make a read request to the database to see if that phone number exists in the invites collection. Refgit will read the document, And if it exists, then we'll go ahead and set the invited state to exist, which will either be true or false. From there, we can go back to the HTML and we'll add a button that is hidden if the user is not invited. But if they are invited, then we'll fire the sign in with phone number method when the button is clicked. We'll make it an async function So we can await the auth sign in with phone number method, which takes the phone number and the recaptcha as arguments. The return value is the confirmation result, which again and is a confirmation from Firebase that they sent a text message to that user. The final step in this component is to then show another form when that confirmation result is present. It's also a controlled input on the code state on the component. Then below that, we have a button that will fire the verify code function when it's clicked. The verify code function is also an async function that will confirm the code on the confirmation result. And that's how we get an invited user logged into the app. But now that they're logged in, we need to give them a way to send invites to their friends. The front end implementation happens here in the send invites component. 1st, we have a database query that grabs all of the invites that that user has sent. If the query length is less than too, then we allow that user to create a new invite in the database with somebody else's phone number. That's easy enough, but The tricky part is how do we now send a text message to that user? That's a job that needs to happen from a back end server, which we can implement in Firebase using Cloud Functions. By running the Firebase init functions command, I can quickly add a back end to this React app. Let's go into the functions directory and open the index dotjs file. Now what we want our back end to do is run a cloud function whenever a new Firestore document is created in the invites its collection. That's really easy to achieve by simply exporting a function that points to that path in the database. Then we use on create to run some back end code whenever a new document is created there. To send a text message, we need 3 pieces of information. We need the from phone number, which is our phone number, the to number, which is the 1 the user has invited to the app and then the actual message that we want to send to that phone number. Now in order to send the text, we need to use a third party service like Twilio or in this case, Plivo. Plivo has an SDK for Node, so we can install that in the functions directory with npm. We can then import it And then initialize the client with our ID and token, which you'll find on the dashboard when you sign up for this service. And finally, we send the text message by calling client messages create. That returns a promise, so we'll make it the return value from the function because a Cloud Function expects a promise as its return value. You can deploy your back end to the cloud by running Firebase deploy only functions. And now if you go to the UI and create a new invite, it should send a text message to that user. Congratulations. You no longer have FOMO but JOMO because you can just build your own FOMO driven app from scratch. I'm gonna go ahead and wrap things up there, but I do wanna point out that the code we've implemented is not fully secure yet because we haven't implemented Firestorm rules yet. If you wanna learn how to build fully secure features with React and Firebase, consider becoming a pro member at Fireship IO and taking my full course on that topic. Thanks for watching, and I will see you in the next one.
FOMO,
fomo
fear
fear
of
of
missing
missing
out,
out
is
is
the
the
social
social
anxiety
anxiety
you
you
feel
feel
when
when
all
all
your
your
friends
friends
get
get
invited
invited
to
to
Timmy's
timmy's
birthday
birthday
party,
party
but
but
you're
you're
stuck
stuck
at
at
home
home
watching
watching
TV
tv
with
with
your
your
creepy
creepy
uncle.
uncle
We
we
live
live
in
in
a
a
world
world
where
where
almost
almost
everybody
everybody
is
is
psychologically
psychologically
dependent
dependent
on
on
social
social
media,
media
and
and
that's
that's
great
great
news
news
if
if
you're
you're
an
an
app
app
developer
developer
because
because
it's
it's
easy
easy
to
to
harness
harness
people's
people's
social
social
anxiety
anxiety
to
to
grow
grow
your
your
user
user
base
base
and
and
make
make
your
your
VC
vc
backers
backers
unbelievably
unbelievably
rich
rich
and
and
happy.
happy
In
in
today's
today's
tutorial,
tutorial
you'll
you'll
learn
learn
how
how
to
to
manipulate
manipulate
FOMO
fomo
from
from
in
in
marketing
marketing
perspective
perspective
by
by
building
building
an
an
invite
invite
only
only
app
app
inspired
inspired
by
by
Clubhouse
clubhouse
from
from
a
a
technical
technical
perspective.
perspective
Marketers
marketers
have
have
been
been
using
using
FOMO
fomo
for
for
1000
1000
of
of
years,
years
but
but
the
the
modern
modern
term
term
Was
was
coined
coined
in
in
1996
1996
by
by
doctor
doctor
Dan
dan
Herman.
herman
It's
it's
used
used
shamelessly
shamelessly
as
as
a
a
marketing
marketing
technique
technique
all
all
over
over
the
the
tech
tech
world.
world
Buy
buy
Bitcoin,
bitcoin
get
get
on
on
TikTok,
tiktok
get
get
Get
get
a
a
Google
google
plus
plus
invite,
invite
and
and
most
most
recently,
recently
get
get
on
on
Clubhouse.
clubhouse
Clubhouse,
clubhouse
as
as
the
the
name
name
implies,
implies
is
is
an
an
invite
invite
only
only
app
app
where
where
you
you
can
can
listen
listen
to
to
people
people
talk
talk
about
about
stuff,
stuff
like
like
Elon
elon
Musk
musk
creating
creating
more
more
FOMO
fomo
for
for
Bitcoin,
bitcoin
for
for
example.
example
As
as
an
an
end
end
user,
user
it's
it's
kind
kind
of
of
like
like
being
being
in
in
an
an
office
office
building
building
where
where
you
you
get
get
to
to
go
go
to
to
a
a
bunch
bunch
of
of
meetings
meetings
all
all
day.
day
Sounds
sounds
like
like
fun,
fun
but
but
you
you
can
can
only
only
get
get
in
in
the
the
clubhouse
clubhouse
if
if
someone
someone
invites
invites
you
you
with
with
your
your
phone
phone
number.
number
But
but
once
once
you're
you're
in,
in
you
you
then
then
get
get
to
to
invites
invites
to
to
send
send
to
to
your
your
best
best
friends.
friends
Then
then
they
they
invite
invite
2
2
of
of
their
their
best
best
friends,
friends
and
and
the
the
cycle
cycle
continues
continues
until
until
you
you
have
have
a
a
massive
massive
FOMO
fomo
pyramid.
pyramid
It's
it's
not
not
a
a
pyramid
pyramid
scheme.
scheme
It
it
is
is
a
a
it's
it's
not
not
even
even
a
a
scheme
scheme
per
per
Say
say
it's
it's
And
and
that's
that's
a
a
much
much
more
more
cost
cost
effective
effective
way
way
to
to
get
get
users
users
than
than
spending
spending
most
most
of
of
your
your
series
series
a
a
on
on
Facebook
facebook
ads.
ads
The
the
whole
whole
thing
thing
is
is
a
a
marketer's
marketer's
dream,
dream
really.
really
You
you
have
have
all
all
the
the
cool
cool
kids
kids
talking
talking
about
about
it
it
on
on
social
social
media,
media
and
and
if
if
you
you
happen
happen
to
to
be
be
a
a
loser
loser
without
without
an
an
invite,
invite
you'll
you'll
need
need
to
to
go
go
beg
beg
for
for
one
one
from
from
your
your
best
best
friend.
friend
But,
but
when
when
your
your
best
best
friend
friend
says
says
they
they
gave
gave
out
out
their
their
invites
invites
to
to
their
their
better
better
best
best
friends,
friends
you'll
you'll
just
just
have
have
to
to
pretend
pretend
like
like
you
you
don't
don't
care.
care
And
and
that's
that's
what
what
we
we
call
call
100%
100%
organic,
organic
locally
locally
sourced
sourced
fear
fear
of
of
missing
missing
out.
out
FOMO
fomo
can
can
literally
literally
get
get
people
people
to
to
do
do
anything,
anything
like
like
invest
invest
in
in
assets
assets
that
that
are
are
worth
worth
almost
almost
nothing,
nothing
buy
buy
stupid
stupid
products
products
that
that
nobody
nobody
needs,
needs
and
and
even
even
download
download
apps
apps
that
that
aren't
aren't
all
all
that
that
good.
good
And
and
now
now
that
that
you
you
know
know
how
how
powerful
powerful
it
it
is,
is
let's
let's
have
have
some
some
fun
fun
and
and
take
take
a
a
look
look
at
at
How
how
to
to
implement
implement
FOMO
fomo
from
from
a
a
technical
technical
perspective.
perspective
Now,
now
before
before
we
we
get
get
into
into
the
the
code,
code
I
i
want
want
to
to
point
point
out
out
that
that
we'll
we'll
be
be
going
going
through
through
things
things
pretty
pretty
quickly,
quickly
but
but
you
you
can
can
reference
reference
the
the
full
full
source
source
code
code
on
on
GitHub,
github
and
and
also
also
the
the
article
article
on
on
Fireship
fireship
IO.
io
We'll
we'll
be
be
using
using
React
react
and
and
Firebase
firebase
for
for
the
the
refi
refi
stack
stack
for
for
this
this
demo,
demo
but
but
You
you
can
can
apply
apply
the
the
same
same
logic
logic
to
to
virtually
virtually
any
any
tech
tech
stack.
stack
If
if
we
we
open
open
up
up
the
the
demo,
demo
you'll
you'll
notice
notice
a
a
sign
sign
in
in
page
page
where
where
the
the
user
user
is
is
first
first
required
required
to
to
enter
enter
their
their
phone
phone
number.
number
If
if
that
that
phone
phone
number
number
is
is
not
not
on
on
the
the
invite
invite
list
list
in
in
our
our
database,
database
then
then
they
they
can't
can't
sign
sign
in.
in
The
the
invite
invite
list
list
is
is
just
just
a
a
database
database
collection
collection
in
in
Firestore
firestore
where
where
each
each
document
document
ID
id
in
in
the
the
database
database
is
is
the
the
phone
phone
number
number
that's
that's
been
been
invited.
invited
Then
then
it
it
contains
contains
a
a
field
field
of
of
sender
sender
that
that
has
has
the
the
user
user
ID
id
of
of
whoever
whoever
or
or
sent
sent
the
the
invite.
invite
But
but
if
if
the
the
number
number
is
is
on
on
the
the
invite
invite
list,
list
then
then
the
the
user
user
can
can
sign
sign
in.
in
When
when
the
the
button
button
is
is
clicked,
clicked
it
it
will
will
send
send
a
a
text
text
message
message
to
to
that
that
phone
phone
number,
number
then
then
have
have
the
the
user
user
verify
verify
the
the
code
code
in
in
this
this
form.
form
At
at
which
which
point,
point
the
the
user
user
is
is
signed
signed
in
in
to
to
the
the
application.
application
And
and
once
once
authenticated,
authenticated
they
they
can
can
then
then
invite
invite
the
the
phone
phone
numbers
numbers
of
of
their
their
best
best
friends.
friends
This
this
will
will
create
create
a
a
new
new
invite
invite
in
in
the
the
database,
database
which
which
will
will
then
then
trigger
trigger
a
a
cloud
cloud
function
function
to
to
send
send
that
that
user
user
a
a
text
text
message
message
inviting
inviting
them
them
to
to
use
use
the
the
app.
app
Now
now
one
one
important
important
thing
thing
to
to
point
point
out
out
here
here
is
is
that
that
Firebase
firebase
will
will
will
will
automatically
automatically
send
send
the
the
first
first
text
text
message
message
for
for
the
the
user
user
to
to
verify
verify
the
the
sign
sign
in.
in
The
the
second
second
message
message
though,
though
that
that
goes
goes
to
to
the
the
invited
invited
user,
user
will
will
need
need
to
to
be
be
sent
sent
programmatically,
programmatically
which
which
is
is
not
not
something
something
that
that
Firebase
firebase
can
can
do.
do
But
but
there
there
are
are
many
many
programmatic
programmatic
SMS
sms
APIs
apis
out
out
there
there
with
with
with
with
the
the
most
most
famous
famous
option
option
being
being
Twilio.
twilio
I'm
i'm
not
not
a
a
huge
huge
fan
fan
of
of
Twilio
twilio
myself,
myself
but
but
luckily,
luckily
there
there
are
are
a
a
lot
lot
of
of
good
good
alternatives
alternatives
out
out
there.
there
I've
i've
heard
heard
good
good
is
is
about
about
MessageBird,
messagebird
and
and
the
the
API
api
we'll
we'll
be
be
using
using
in
in
this
this
video
video
is
is
Plivo.
plivo
It
it
has
has
a
a
really
really
nice
nice
UI
ui
and
and
will
will
give
give
you
you
a
a
free
free
phone
phone
number
number
and
and
credit
credit
to
to
get
get
started
started
in
in
the
the
sandbox.
sandbox
Now
now
let's
let's
go
go
ahead
ahead
and
and
jump
jump
into
into
the
the
source
source
code.
code
To
to
build
build
this
this
app,
app
I
i
started
started
with
with
a
a
generic
generic
React
react
application
application
using
using
the
the
create
create
react
react
app
app
Well,
well
inside
inside
the
the
project,
project
I've
i've
installed
installed
2
2
dependencies,
dependencies
Firebase
firebase
and
and
React
react
Firebase
firebase
Hooks.
hooks
The
the
entire
entire
front
front
end
end
source
source
code
code
is
is
contained
contained
inside
inside
the
the
app
app
dotjs
dotjs
file.
file
If
if
we
we
go
go
in
in
there,
there
we'll
we'll
import
import
our
our
Firebase
firebase
dependencies,
dependencies
which
which
include
include
Firebase
firebase
auth
auth
and
and
Firestore,
firestore
along
along
with
with
a
a
few
few
built
built
in
in
hooks
hooks
from
from
React
react
And
and
then
then
the
the
useAuthState
useauthstate
hook
hook
from
from
React
react
Firebase
firebase
Hooks,
hooks
which
which
allows
allows
us
us
to
to
listen
listen
to
to
the
the
state
state
of
of
the
the
current
current
user,
user
whether
whether
they're
they're
logged
logged
in
in
or
or
logged
logged
out.
out
And
and
lastly,
lastly
we
we
have
have
use
use
collection
collection
data,
data
which
which
allows
allows
us
us
to
to
make
make
a
a
query
query
to
to
a
a
collection
collection
in
in
the
the
Firestore
firestore
database
database
and
and
update
update
the
the
UI
ui
in
in
real
real
time
time
whenever
whenever
the
the
data
data
in
in
that
that
collection
collection
changes.
changes
From
from
there,
there
we'll
we'll
need
need
to
to
connect
connect
our
our
Firebase
firebase
project
project
to
to
the
the
React
react
app.
app
We
we
can
can
do
do
that
that
by
by
creating
creating
a
a
web
web
app
app
from
from
the
the
Firebase
firebase
console,
console
which
which
will
will
give
give
us
us
a
a
set
set
of
of
project
project
credentials
credentials
to
to
copy.
copy
And
and
while
while
we're
we're
in
in
the
the
Firebase
firebase
console,
console
let's
let's
go
go
over
over
to
to
the
the
authentication
authentication
tab
tab
and
and
make
make
sure
sure
to
to
enable
enable
phone
phone
authentication.
authentication
Now
now
we
we
can
can
go
go
back
back
to
to
our
our
code
code
and
and
initialize
initialize
the
the
Firebase
firebase
this
this
app.
app
The
the
2
2
SDKs
sdks
that
that
we'll
we'll
be
be
using
using
are
are
Firebase
firebase
auth
auth
and
and
Firestore,
firestore
so
so
let's
let's
go
go
ahead
ahead
and
and
reference
reference
those
those
as
as
global
global
variables.
variables
In
in
the
the
root
root
app
app
component,
component
we're
we're
going
going
to
to
Listen
listen
to
to
the
the
user's
user's
authentication
authentication
state.
state
If
if
we
we
do
do
have
have
a
a
user,
user
which
which
means
means
they're
they're
logged
logged
in,
in
then
then
we'll
we'll
go
go
ahead
ahead
and
and
render
render
the
the
send
send
invites
invites
component,
component
which
which
takes
takes
the
the
current
current
user
user
as
as
a
a
prop.
prop
Otherwise,
otherwise
we'll
we'll
show
show
the
the
sign
sign
up
up
component.
component
The
the
initial
initial
user
user
state
state
will
will
be
be
signed
signed
out,
out
so
so
let's
let's
go
go
ahead
ahead
and
and
focus
focus
on
on
the
the
sign
sign
up
up
component.
component
Now
now
in
in
order
order
to
to
implement
implement
phone
phone
authentication,
authentication
the
the
user
user
will
will
need
need
to
to
verify
verify
a
a
CAPTCHA.
captcha
Normally,
normally
this
this
means
means
the
the
user
user
has
has
to
to
go
go
through
through
the
the
and
and
process,
process
uh,
uh
verifying
verifying
that
that
they're
they're
not
not
a
a
spam
spam
bot.
bot
However,
however
the
the
modern
modern
user
user
friendly
friendly
way
way
to
to
do
do
this
this
is
is
with
with
an
an
invisible
invisible
recaptcha,
recaptcha
which
which
will
will
attempt
attempt
to
to
verify
verify
the
the
user
user
in
in
the
the
background
background
and
and
only
only
ask
ask
them
them
questions
questions
when
when
it's
it's
absolutely
absolutely
necessary.
necessary
To
to
implement
implement
an
an
invisible
invisible
recaptcha,
recaptcha
we'll
we'll
first
first
set
set
it
it
up
up
as
as
state
state
on
on
the
the
component
component
using
using
the
the
use
use
state
state
hook,
hook
and
and
then
then
we're
we're
going
going
to
to
reference
reference
a
a
native
native
DOM
dom
element
element
with
with
the
the
use
use
ref
ref
hook.
hook
You
you
need
need
to
to
have
have
an
an
empty
empty
div
div
somewhere
somewhere
in
in
the
the
UI
ui
to
to
attach
attach
the
the
recaptcha
recaptcha
to.
to
From
from
there,
there
we'll
we'll
implement
implement
a
a
callback
callback
in
in
the
the
useEffect
useeffect
hook.
hook
If
if
the
the
recaptcha
recaptcha
has
has
not
not
been
been
defined
defined
yet,
yet
then
then
we'll
we'll
go
go
ahead
ahead
and
and
define
define
it
it
by
by
creating
creating
a
a
new
new
instance
instance
of
of
a
a
Firebase
firebase
auth
auth
recaptchaverifier.
recaptchaverifier
It
it
takes
takes
the
the
empty
empty
div
div
as
as
its
its
first
first
argument,
argument
then
then
options
options
as
as
the
the
second
second
argument.
argument
We'll
we'll
just
just
wanna
wanna
make
make
sure
sure
that
that
it
it
has
has
a
a
size
size
of
of
invisible.
invisible
From
from
there,
there
we
we
can
can
verify
verify
it
it
by
by
calling
calling
the
the
verify
verify
method,
method
which
which
returns
returns
a
a
promise.
promise
And
and
then
then
once
once
verified,
verified
we'll
we'll
go
go
ahead
ahead
and
and
set
set
the
the
reCAPTCHA
recaptcha
instance
instance
on
on
the
the
component
component
state.
state
And
and
now
now
that
that
we
we
have
have
that
that
state,
state
we
we
can
can
go
go
into
into
the
the
JSX
jsx
and
and
render
render
a
a
phone
phone
number
number
verification
verification
component
component
that
that
passes
passes
the
the
reCAPTCHA
recaptcha
down
down
as
as
a
a
prop.
prop
That
that
allows
allows
us
us
to
to
only
only
show
show
the
the
login
login
form
form
after
after
the
the
reCAPTCHA
recaptcha
has
has
been
been
verified.
verified
Now
now
let's
let's
implement
implement
the
the
phone
phone
number
number
verification
verification
component.
component
Its
its
purpose
purpose
is
is
to
to
collect
collect
the
the
user's
user's
phone
phone
number
number
digits
digits
from
from
a
a
form,
form
then
then
make
make
a
a
read
read
request
request
to
to
Firestore
firestore
to
to
validate
validate
that
that
that
that
number
number
has
has
been
been
invited.
invited
If
if
the
the
number
number
has
has
been
been
invited,
invited
then
then
we'll
we'll
set
set
that
that
value
value
to
to
true,
true
And
and
then
then
the
the
user
user
can
can
log
log
in
in
and
and
Firebase
firebase
will
will
return
return
a
a
confirmation
confirmation
result,
result
which
which
is
is
just
just
a
a
confirmation
confirmation
that
that
they
they
sent
sent
a
a
text
text
message
message
to
to
that
that
user.
user
The
the
user
user
will
will
then
then
need
need
to
to
verify
verify
that
that
code
code
in
in
a
a
second
second
form,
form
and
and
once
once
that's
that's
verified,
verified
we
we
can
can
consider
consider
them
them
fully
fully
dedicated.
dedicated
Now,
now
one
one
final
final
thing
thing
I'm
i'm
doing
doing
here
here
is
is
formatting
formatting
the
the
number
number
with
with
a
a
plus
plus
one
one
in
in
front
front
of
of
it.
it
When
when
working
working
with
with
any
any
programmatic
programmatic
phone
phone
API,
api
they
they
almost
almost
always
always
want
want
the
the
phone
phone
number
number
in
in
echo
echo
164
164
format.
format
It's
it's
just
just
a
a
plus
plus
sign
sign
with
with
the
the
country
country
code
code
followed
followed
by
by
the
the
main
main
phone
phone
number
number
digits.
digits
Now
now
in
in
the
the
JSX,
jsx
we're
we're
going
going
to
to
create
create
a
a
controlled
controlled
form
form
input
input
with
with
React
react
by
by
setting
setting
the
the
value
value
to
to
the
the
digit
digit
state,
state
then
then
we'll
we'll
update
update
the
the
state
state
with
with
the
the
current
current
value
value
by
by
listening
listening
to
to
the
the
onChange
onchange
event
event
and
and
setting
setting
the
the
digits
digits
to
to
the
the
value
value
in
in
the
the
form
form
when
when
they
they
change.
change
From
from
there,
there
we
we
can
can
implement
implement
to
to
useEffect
useeffect
hook
hook
and
and
give
give
it
it
the
the
phone
phone
number
number
as
as
a
a
dependency.
dependency
If
if
the
the
phone
phone
number
number
length
length
equals
equals
12,
12
then
then
we
we
know
know
we
we
have
have
a
a
full
full
length
length
phone
phone
number,
number
at
at
which
which
point
point
we
we
can
can
make
make
a
a
read
read
request
request
to
to
the
the
database
database
to
to
see
see
if
if
that
that
phone
phone
number
number
exists
exists
in
in
the
the
invites
invites
collection.
collection
Refgit
refgit
will
will
read
read
the
the
document,
document
And
and
if
if
it
it
exists,
exists
then
then
we'll
we'll
go
go
ahead
ahead
and
and
set
set
the
the
invited
invited
state
state
to
to
exist,
exist
which
which
will
will
either
either
be
be
true
true
or
or
false.
false
From
from
there,
there
we
we
can
can
go
go
back
back
to
to
the
the
HTML
html
and
and
we'll
we'll
add
add
a
a
button
button
that
that
is
is
hidden
hidden
if
if
the
the
user
user
is
is
not
not
invited.
invited
But
but
if
if
they
they
are
are
invited,
invited
then
then
we'll
we'll
fire
fire
the
the
sign
sign
in
in
with
with
phone
phone
number
number
method
method
when
when
the
the
button
button
is
is
clicked.
clicked
We'll
we'll
make
make
it
it
an
an
async
async
function
function
So
so
we
we
can
can
await
await
the
the
auth
auth
sign
sign
in
in
with
with
phone
phone
number
number
method,
method
which
which
takes
takes
the
the
phone
phone
number
number
and
and
the
the
recaptcha
recaptcha
as
as
arguments.
arguments
The
the
return
return
value
value
is
is
the
the
confirmation
confirmation
result,
result
which
which
again
again
and
and
is
is
a
a
confirmation
confirmation
from
from
Firebase
firebase
that
that
they
they
sent
sent
a
a
text
text
message
message
to
to
that
that
user.
user
The
the
final
final
step
step
in
in
this
this
component
component
is
is
to
to
then
then
show
show
another
another
form
form
when
when
that
that
confirmation
confirmation
result
result
is
is
present.
present
It's
it's
also
also
a
a
controlled
controlled
input
input
on
on
the
the
code
code
state
state
on
on
the
the
component.
component
Then
then
below
below
that,
that
we
we
have
have
a
a
button
button
that
that
will
will
fire
fire
the
the
verify
verify
code
code
function
function
when
when
it's
it's
clicked.
clicked
The
the
verify
verify
code
code
function
function
is
is
also
also
an
an
async
async
function
function
that
that
will
will
confirm
confirm
the
the
code
code
on
on
the
the
confirmation
confirmation
result.
result
And
and
that's
that's
how
how
we
we
get
get
an
an
invited
invited
user
user
logged
logged
into
into
the
the
app.
app
But
but
now
now
that
that
they're
they're
logged
logged
in,
in
we
we
need
need
to
to
give
give
them
them
a
a
way
way
to
to
send
send
invites
invites
to
to
their
their
friends.
friends
The
the
front
front
end
end
implementation
implementation
happens
happens
here
here
in
in
the
the
send
send
invites
invites
component.
component
1st,
1st
we
we
have
have
a
a
database
database
query
query
that
that
grabs
grabs
all
all
of
of
the
the
invites
invites
that
that
that
that
user
user
has
has
sent.
sent
If
if
the
the
query
query
length
length
is
is
less
less
than
than
too,
too
then
then
we
we
allow
allow
that
that
user
user
to
to
create
create
a
a
new
new
invite
invite
in
in
the
the
database
database
with
with
somebody
somebody
else's
else's
phone
phone
number.
number
That's
that's
easy
easy
enough,
enough
but
but
The
the
tricky
tricky
part
part
is
is
how
how
do
do
we
we
now
now
send
send
a
a
text
text
message
message
to
to
that
that
user?
user
That's
that's
a
a
job
job
that
that
needs
needs
to
to
happen
happen
from
from
a
a
back
back
end
end
server,
server
which
which
we
we
can
can
implement
implement
in
in
Firebase
firebase
using
using
Cloud
cloud
Functions.
functions
By
by
running
running
the
the
Firebase
firebase
init
init
functions
functions
command,
command
I
i
can
can
quickly
quickly
add
add
a
a
back
back
end
end
to
to
this
this
React
react
app.
app
Let's
let's
go
go
into
into
the
the
functions
functions
directory
directory
and
and
open
open
the
the
index
index
dotjs
dotjs
file.
file
Now
now
what
what
we
we
want
want
our
our
back
back
end
end
to
to
do
do
is
is
run
run
a
a
cloud
cloud
function
function
whenever
whenever
a
a
new
new
Firestore
firestore
document
document
is
is
created
created
in
in
the
the
invites
invites
its
its
collection.
collection
That's
that's
really
really
easy
easy
to
to
achieve
achieve
by
by
simply
simply
exporting
exporting
a
a
function
function
that
that
points
points
to
to
that
that
path
path
in
in
the
the
database.
database
Then
then
we
we
use
use
on
on
create
create
to
to
run
run
some
some
back
back
end
end
code
code
whenever
whenever
a
a
new
new
document
document
is
is
created
created
there.
there
To
to
send
send
a
a
text
text
message,
message
we
we
need
need
3
3
pieces
pieces
of
of
information.
information
We
we
need
need
the
the
from
from
phone
phone
number,
number
which
which
is
is
our
our
phone
phone
number,
number
the
the
to
to
number,
number
which
which
is
is
the
the
1
1
the
the
user
user
has
has
invited
invited
to
to
the
the
app
app
and
and
then
then
the
the
actual
actual
message
message
that
that
we
we
want
want
to
to
send
send
to
to
that
that
phone
phone
number.
number
Now
now
in
in
order
order
to
to
send
send
the
the
text,
text
we
we
need
need
to
to
use
use
a
a
third
third
party
party
service
service
like
like
Twilio
twilio
or
or
in
in
this
this
case,
case
Plivo.
plivo
Plivo
plivo
has
has
an
an
SDK
sdk
for
for
Node,
node
so
so
we
we
can
can
install
install
that
that
in
in
the
the
functions
functions
directory
directory
with
with
npm.
npm
We
we
can
can
then
then
import
import
it
it
And
and
then
then
initialize
initialize
the
the
client
client
with
with
our
our
ID
id
and
and
token,
token
which
which
you'll
you'll
find
find
on
on
the
the
dashboard
dashboard
when
when
you
you
sign
sign
up
up
for
for
this
this
service.
service
And
and
finally,
finally
we
we
send
send
the
the
text
text
message
message
by
by
calling
calling
client
client
messages
messages
create.
create
That
that
returns
returns
a
a
promise,
promise
so
so
we'll
we'll
make
make
it
it
the
the
return
return
value
value
from
from
the
the
function
function
because
because
a
a
Cloud
cloud
Function
function
expects
expects
a
a
promise
promise
as
as
its
its
return
return
value.
value
You
you
can
can
deploy
deploy
your
your
back
back
end
end
to
to
the
the
cloud
cloud
by
by
running
running
Firebase
firebase
deploy
deploy
only
only
functions.
functions
And
and
now
now
if
if
you
you
go
go
to
to
the
the
UI
ui
and
and
create
create
a
a
new
new
invite,
invite
it
it
should
should
send
send
a
a
text
text
message
message
to
to
that
that
user.
user
Congratulations.
congratulations
You
you
no
no
longer
longer
have
have
FOMO
fomo
but
but
JOMO
jomo
because
because
you
you
can
can
just
just
build
build
your
your
own
own
FOMO
fomo
driven
driven
app
app
from
from
scratch.
scratch
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there,
there
but
but
I
i
do
do
wanna
wanna
point
point
out
out
that
that
the
the
code
code
we've
we've
implemented
implemented
is
is
not
not
fully
fully
secure
secure
yet
yet
because
because
we
we
haven't
haven't
implemented
implemented
Firestorm
firestorm
rules
rules
yet.
yet
If
if
you
you
wanna
wanna
learn
learn
how
how
to
to
build
build
fully
fully
secure
secure
features
features
with
with
React
react
and
and
Firebase,
firebase
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO
io
and
and
taking
taking
my
my
full
full
course
course
on
on
that
that
topic.
topic
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss how FOMO (facing your phone) can be used for marketing purposes, citing the success of Timmy's birthday parties. They also explain how to implement FOMO from a technical perspective, including building a code and using React and programmatic SMS APIs. The process of verifying phone numbers and setting a phone number recovery component is discussed, along with setting a phone number in " echo]] and setting a phone number in "one." A code is not fully secure yet due to security rules in place, and the process of setting a phone number recovery component and sending invites to users is provided.
Invite Only! Use FOMO to grow your app // Exclusive Phone SignIn Tutorial
FOMO, fear of missing out, is the social anxiety you feel when all your friends get invited to Timmy's birthday party, but you're stuck at home watching TV with your creepy uncle. We live in a world where almost everybody is psychologically dependent on social media, and that's great news if you're an app developer because it's easy to harness people's social anxiety to grow your user base and make your VC backers unbelievably rich and happy. In today's tutorial, you'll learn how to manipulate FOMO from in marketing perspective by building an invite only app inspired by Clubhouse from a technical perspective. Marketers have been using FOMO for 1000 of years, but the modern term Was coined in 1996 by doctor Dan Herman. It's used shamelessly as a marketing technique all over the tech world. Buy Bitcoin, get on TikTok, get Get a Google plus invite, and most recently, get on Clubhouse. Clubhouse, as the name implies, is an invite only app where you can listen to people talk about stuff, like Elon Musk creating more FOMO for Bitcoin, for example. As an end user, it's kind of like being in an office building where you get to go to a bunch of meetings all day. Sounds like fun, but you can only get in the clubhouse if someone invites you with your phone number. But once you're in, you then get to invites to send to your best friends. Then they invite 2 of their best friends, and the cycle continues until you have a massive FOMO pyramid. It's not a pyramid scheme. It is a it's not even a scheme per Say it's And that's a much more cost effective way to get users than spending most of your series a on Facebook ads. The whole thing is a marketer's dream, really. You have all the cool kids talking about it on social media, and if you happen to be a loser without an invite, you'll need to go beg for one from your best friend. But, when your best friend says they gave out their invites to their better best friends, you'll just have to pretend like you don't care. And that's what we call 100% organic, locally sourced fear of missing out. FOMO can literally get people to do anything, like invest in assets that are worth almost nothing, buy stupid products that nobody needs, and even download apps that aren't all that good. And now that you know how powerful it is, let's have some fun and take a look at How to implement FOMO from a technical perspective. Now, before we get into the code, I want to point out that we'll be going through things pretty quickly, but you can reference the full source code on GitHub, and also the article on Fireship IO. We'll be using React and Firebase for the refi stack for this demo, but You can apply the same logic to virtually any tech stack. If we open up the demo, you'll notice a sign in page where the user is first required to enter their phone number. If that phone number is not on the invite list in our database, then they can't sign in. The invite list is just a database collection in Firestore where each document ID in the database is the phone number that's been invited. Then it contains a field of sender that has the user ID of whoever or sent the invite. But if the number is on the invite list, then the user can sign in. When the button is clicked, it will send a text message to that phone number, then have the user verify the code in this form. At which point, the user is signed in to the application. And once authenticated, they can then invite the phone numbers of their best friends. This will create a new invite in the database, which will then trigger a cloud function to send that user a text message inviting them to use the app. Now one important thing to point out here is that Firebase will will automatically send the first text message for the user to verify the sign in. The second message though, that goes to the invited user, will need to be sent programmatically, which is not something that Firebase can do. But there are many programmatic SMS APIs out there with with the most famous option being Twilio. I'm not a huge fan of Twilio myself, but luckily, there are a lot of good alternatives out there. I've heard good is about MessageBird, and the API we'll be using in this video is Plivo. It has a really nice UI and will give you a free phone number and credit to get started in the sandbox. Now let's go ahead and jump into the source code. To build this app, I started with a generic React application using the create react app Well, inside the project, I've installed 2 dependencies, Firebase and React Firebase Hooks. The entire front end source code is contained inside the app dotjs file. If we go in there, we'll import our Firebase dependencies, which include Firebase auth and Firestore, along with a few built in hooks from React And then the useAuthState hook from React Firebase Hooks, which allows us to listen to the state of the current user, whether they're logged in or logged out. And lastly, we have use collection data, which allows us to make a query to a collection in the Firestore database and update the UI in real time whenever the data in that collection changes. From there, we'll need to connect our Firebase project to the React app. We can do that by creating a web app from the Firebase console, which will give us a set of project credentials to copy. And while we're in the Firebase console, let's go over to the authentication tab and make sure to enable phone authentication. Now we can go back to our code and initialize the Firebase this app. The 2 SDKs that we'll be using are Firebase auth and Firestore, so let's go ahead and reference those as global variables. In the root app component, we're going to Listen to the user's authentication state. If we do have a user, which means they're logged in, then we'll go ahead and render the send invites component, which takes the current user as a prop. Otherwise, we'll show the sign up component. The initial user state will be signed out, so let's go ahead and focus on the sign up component. Now in order to implement phone authentication, the user will need to verify a CAPTCHA. Normally, this means the user has to go through the and process, uh, verifying that they're not a spam bot. However, the modern user friendly way to do this is with an invisible recaptcha, which will attempt to verify the user in the background and only ask them questions when it's absolutely necessary. To implement an invisible recaptcha, we'll first set it up as state on the component using the use state hook, and then we're going to reference a native DOM element with the use ref hook. You need to have an empty div somewhere in the UI to attach the recaptcha to. From there, we'll implement a callback in the useEffect hook. If the recaptcha has not been defined yet, then we'll go ahead and define it by creating a new instance of a Firebase auth recaptchaverifier. It takes the empty div as its first argument, then options as the second argument. We'll just wanna make sure that it has a size of invisible. From there, we can verify it by calling the verify method, which returns a promise. And then once verified, we'll go ahead and set the reCAPTCHA instance on the component state. And now that we have that state, we can go into the JSX and render a phone number verification component that passes the reCAPTCHA down as a prop. That allows us to only show the login form after the reCAPTCHA has been verified. Now let's implement the phone number verification component. Its purpose is to collect the user's phone number digits from a form, then make a read request to Firestore to validate that that number has been invited. If the number has been invited, then we'll set that value to true, And then the user can log in and Firebase will return a confirmation result, which is just a confirmation that they sent a text message to that user. The user will then need to verify that code in a second form, and once that's verified, we can consider them fully dedicated. Now, one final thing I'm doing here is formatting the number with a plus one in front of it. When working with any programmatic phone API, they almost always want the phone number in echo 164 format. It's just a plus sign with the country code followed by the main phone number digits. Now in the JSX, we're going to create a controlled form input with React by setting the value to the digit state, then we'll update the state with the current value by listening to the onChange event and setting the digits to the value in the form when they change. From there, we can implement to useEffect hook and give it the phone number as a dependency. If the phone number length equals 12, then we know we have a full length phone number, at which point we can make a read request to the database to see if that phone number exists in the invites collection. Refgit will read the document, And if it exists, then we'll go ahead and set the invited state to exist, which will either be true or false. From there, we can go back to the HTML and we'll add a button that is hidden if the user is not invited. But if they are invited, then we'll fire the sign in with phone number method when the button is clicked. We'll make it an async function So we can await the auth sign in with phone number method, which takes the phone number and the recaptcha as arguments. The return value is the confirmation result, which again and is a confirmation from Firebase that they sent a text message to that user. The final step in this component is to then show another form when that confirmation result is present. It's also a controlled input on the code state on the component. Then below that, we have a button that will fire the verify code function when it's clicked. The verify code function is also an async function that will confirm the code on the confirmation result. And that's how we get an invited user logged into the app. But now that they're logged in, we need to give them a way to send invites to their friends. The front end implementation happens here in the send invites component. 1st, we have a database query that grabs all of the invites that that user has sent. If the query length is less than too, then we allow that user to create a new invite in the database with somebody else's phone number. That's easy enough, but The tricky part is how do we now send a text message to that user? That's a job that needs to happen from a back end server, which we can implement in Firebase using Cloud Functions. By running the Firebase init functions command, I can quickly add a back end to this React app. Let's go into the functions directory and open the index dotjs file. Now what we want our back end to do is run a cloud function whenever a new Firestore document is created in the invites its collection. That's really easy to achieve by simply exporting a function that points to that path in the database. Then we use on create to run some back end code whenever a new document is created there. To send a text message, we need 3 pieces of information. We need the from phone number, which is our phone number, the to number, which is the 1 the user has invited to the app and then the actual message that we want to send to that phone number. Now in order to send the text, we need to use a third party service like Twilio or in this case, Plivo. Plivo has an SDK for Node, so we can install that in the functions directory with npm. We can then import it And then initialize the client with our ID and token, which you'll find on the dashboard when you sign up for this service. And finally, we send the text message by calling client messages create. That returns a promise, so we'll make it the return value from the function because a Cloud Function expects a promise as its return value. You can deploy your back end to the cloud by running Firebase deploy only functions. And now if you go to the UI and create a new invite, it should send a text message to that user. Congratulations. You no longer have FOMO but JOMO because you can just build your own FOMO driven app from scratch. I'm gonna go ahead and wrap things up there, but I do wanna point out that the code we've implemented is not fully secure yet because we haven't implemented Firestorm rules yet. If you wanna learn how to build fully secure features with React and Firebase, consider becoming a pro member at Fireship IO and taking my full course on that topic. Thanks for watching, and I will see you in the next one.
The speakers discuss how FOMO (facing your phone) can be used for marketing purposes, citing the success of Timmy's birthday parties. They also explain how to implement FOMO from a technical perspective, including building a code and using React and programmatic SMS APIs. The process of verifying phone numbers and setting a phone number recovery component is discussed, along with setting a phone number in " echo]] and setting a phone number in "one." A code is not fully secure yet due to security rules in place, and the process of setting a phone number recovery component and sending invites to users is provided.