In this guide, I’m going to teach you everything you need to know about working with IP addresses inside of Bubble. I’m not only going to explain how we can extract someone’s IP address from their browser, but how you could reformat that information into something useful; as well as, of course, store that information in your own database.
Then, finally, I’m going to give you a real-world demo of how you can actually use this information within an app. And in my example today I’m going to show you how we can exclude certain features of an app to use this within a certain region. Look, there’s so much that I want to cover throughout this build, so let’s just grab our Bubble editor, and we can dive right into it.
Full Transcript of Tutorial
1. Fetching a users IP address
What I’d love to do is jump straight into Bubble and show you how you can start extracting a user’s IP address. And so I’ve created a brand new editor here.
And at this point in time I have a blank page within my application. The only thing I’ve done is I’ve just updated the background color of this page to a light shade of gray so that way I can see where it sits in my overall Bubble canvas.
Now, when it comes to the process of extracting someone’s IP address, today we’re going to be using two free plugins to help build this feature. So, if I head into my plugins tab, I’ve already installed the plugins, but what you’ll need to do is open up your plugin library and just search for, first of all, the ‘Ipify’ plugin, which is a free plugin built by Bubble. And then there’s another plugin called ‘IP Geo’.
So what I’d recommend doing at this point in time is just installing the Ipify plugin first. And as I mentioned, this is a free plugin to install. We can then jump over to our design tab.
Let’s say, if we ever wanted to display the user’s IP address on a page, we could simply just add a text element onto our page here. We could choose to insert dynamic data and in order to pull the user’s IP address, we’d need to use this option known as “Get data from an external API.” So, the Ipify plugin itself is an API. Thankfully it’s built into a plugin though, so we don’t need to write any manual code or API calls.
So, from the dropdown menu, you then see the option to get the user’s IP address, and this is the option linked to the Ipify plugin.
And it truly is as simple as that.
So if I was to now run a preview of my application here, what you’ll see is in the top left-hand corner of my page, my IP address has been displayed.
As a side note, you might find that the first time you preview your application, it might just take a little bit of time to load this information. But as you can see, the process of actually displaying someone’s IP address couldn’t be simpler.
Now, that’s of course how we can show someone’s IP address, but what happens if we want to actually store that data in our database? That’s a great question. And today, I’m going to show you how to not only store the IP address in your database, but later on, I’ll also show you how it’s possible to enrich that data and extract someones country code.
So, I’m just going to jump back into Bubble here. Now, for the sake of our tutorial today, I want to show you a real-world example of when you might need to save someone’s IP address.
2. Saving a users IP address in your Bubble database
When it came to the process of actually creating this tutorial, I thought to myself, ‘what’s a product out there that’s quite reliant on IP addresses?’. Then, I realised to myself that a lot of streaming services rely on IP addresses because they tend to restrict content to certain regions.
And so what I’ve done today is I created a sample app of my own, which is its own streaming service.
So I’m just going to jump over to my index page here. And this is where I’m super excited to announce the official launch LachFlix.
LachFlix is the new hottest streaming service that shows you all of your favorite Lachlan Kirkwood streaming content. So if I was to take a quick preview of this page here, and if we were to scroll on down, you’ll see we’ve got all our favorite streaming shows like Lachlan Things, Lachlan Game, Lachlan in Paris, Lachlan River. You name it, this service has it.
Now, of course, behind the scenes, I’ve been cutting deals with production agencies to only make this content accessible in certain regions. So, although all these shows have worldwide demand, I’ve decided that I just want to be exclusive and share this content for particular countries.
And so, what I’d like to do is create an experience that saves a user’s IP address every single time they open up the homepage of my application.
If I jump back into Bubble, what I’m going to do is head over to the workflow tab of this page, and I’m going to create a brand new workflow from scratch.
I’d like this new workflow to run every single time the page is loaded. Now, within this workflow, I’d like to save an IP address under a particular user’s account. But before I do that, what I’d also love to do is show you how I’ve set up my database, which is going to allow me to actually store someone’s IP address in it.
So, I’m just going to quickly divert to my data tab here, and under my user data type, you’ll see I have a couple of different data fields. So to start with, I’m storing stuff like the user’s name and their profile photo.
That’s nice and straightforward.
But I’m also storing the user’s IP address. And this is just going to be structured as a plain text field. And later on in our tutorial, I’m going to show you how we can store information about the user’s city and country – which of course we will also extract from their IP address.
So, if I just jump back into our workflow tab, what I’d like to do within this workflow is make changes to the ‘current user’s’ account and update their IP address. So, I’m going to add a step in our workflow. I’m going to head to our data tab, and I’m going to choose to make changes to a thing because the thing I’d like to change is going to be the current user. And in this case, I’d like to update their IP address field. And of course, in order to extract a user’s IP address, I’m just going to have to pull the data from my Ipify plugin. So I’m going to, once again, select the “get data from external API” option. The API provider will be the “get current user’s IP address” and it truly is as simple as that.
But one thing I’d like to point out is that at this point in time, this workflow’s going to run every single time the page is loaded. So, if the user is at home, and they’re wanting to open up the streaming service, it’s going to update their IP address based on their main location.
But then what happens if the user returns to our website that night and they’re still at home? It’s also going to update the IP address with the exact same value.
Now, while that’s not the end of the world, it seems a little pointless that we’re going to continually update this IP address even if it doesn’t change.
What I’d like to do is update the user’s IP address only if they’re in a separate location.
So, what we can do is create a condition on our workflow trigger. So whenever the page is loaded and we can recognise that we only want to update the user’s IP address if their current IP address is different from the previous IP address saved under their account already.
In order to create this experience, I’m going to create a condition on the workflow trigger. Within this condition, I’m just going to recognise if the ‘user’s current IP address’ – so, once again, I’m going to get data from an external API. The API provider will be the “get current user’s IP address.”
Now, I’ll want to recognise if their current IP address is not the same as the current user’s saved IP address. So that is their last stored IP address.
That means that if a user now changes location, this workflow will run and it will update that IP address successfully in our database. Of course, if the user doesn’t change locations, it will just remain the same. And now, just like that, that’s how easy it is to store someone’s IP address directly in your database.
3. Formatting an IP address as a location
Now at this point, we’ve learned how to fetch and store a users IP address in our database. It does, however, seem a little pointless to just store a user’s IP address (which is a string of numbers saved as text), because there’s not really much you can actually do with that.
What I’m interested in doing with my billion-dollar streaming service, however, is create exclusions for what countries actually have access to my listed content.
And now, this is where we can get into the next stage of our tutorial. And within this, I’m going to explain how you can extract more information from a user’s IP address – so things like their city or their country. And then I’m going to show you how we can create exclusions on my content within the streaming service that will only allow people in certain regions to stream certain content.
So, if we jump back into Bubble here, what I’d love to do is head over to my plugins tab – because we’re going to need to install yet another plugin in order to bring this feature to life.
And that plugin is known as the IP Geo plugin. Now, this is another free plugin, so you’ll just need to open up your plugin library, search for the ‘IP Geo’ plugin, install that, and then the first thing I want to do is similar just show you how we can actually display the data from this plugin on a page.
If I jump into my design tab, I’m just going to head back over to the original page we’d built out.
This is of course the page where we were displaying the user’s IP address. What I’d like to do is just make a copy of this text element on my page, and then going to right-click in this field and choose to clear this expression. This will then remove all that dynamic data.
With this example, what I’d love to do is just extract the country and city from my personal IP address. In order to do that, I’m once again going to need to get data from an external API – only, in this case, the API provided will be our ‘IP info API’. This expression links to the IP Geo plugin we’ve just installed.
Now, what you’ll see here is that we’re required to add in our own IP address from which this plugin is going to extract the information from.
At this point in time, the plugin hasn’t currently added a static IP address by default, whereas what you’ll need to do is replace this with the current user’s actual IP address.
The way we can do that is of course, by linking this to our Ipify plugin, which is able to pull the user’s IP address.
So we’re going to remove this text here and we’re going to insert dynamic data. And what we’re going to do is select to “get data from another external API” and our API provider will be our Ipify plugin.
At this point, we’re going to once again, select the “get current user’s API address.” I can then close this, and now you’ll see that it’s adding that as a dynamic value. And from this IP address, I can now select what I would like to extract from this. In this instance, I’d like to select the user’s city, their region, their country, and so on.
And then let’s say, if I want to display my city, I’m just going to make a quick copy of this text element. I will then update the value I’m displaying to not be the country, but instead, be the city.
Now, if I was to go and run a quick preview of this page, what you’ll see is over in the top left hand corner of my app, we’re not only displaying my IP address, but we’re also displaying my country code, as well as the city that I live in.
So, as you can see, displaying this information is just as straightforward as it was to display someone’s IP address.
But similar to before, how can we take this one step further and actually store this information in our database
I’m glad you asked, because it couldn’t get any simpler.
Let’s jump back into Bubble here. And let’s open up the home page of my awesome streaming service. Now, from this page, we’re going to jump back into our workflow editor.
I’m going to open up the workflow that was triggered every single time the page was loaded, and I’m going to open up step number one – which is where we were making changes to the user’s account.
And so, if you remember, we’re currently storing the user’s IP address in our database. What I’d like to do is update the additional data fields I’ve mentioned.
In my database, under our user datatype, we had two data fields known as our city and country. These were both stored as just text fields.
So what I’m going to do is just jump back into my workflow editor and I’m going to choose to change these fields. I’ll start by selecting the city. So for this user’s city, I’m going to need to once again extract the data from my IP Geo plugin, which means I’ll select the “get data from an external API” option.
The API provider will first be my IP Geo plugin, and of course, I’m going to need to use the value of the ‘current user’s IP address’. So I’m just going to remove this static value here, then, I’ll insert dynamic data. Once again, I’ll select the “get data from another external API” option, and this time it’s going to be the data from my Ipify plugin. The data I’ll want to fetch will be the “get current user’s IP address” option.
And in this case, I’d just like to store the value of the city. Then from here, I’m going to want to store the value of the country. So I’m going to select that.
When it comes to selecting a users country data, this field will need to reference the data value pulled from out external API. The API provider will be my IP Geo plugin, then I’ll need to update the IP address.
I’ll once again remove the static value, insert dynamic data, and of course, select to get additional data from an external API. I will then select the Ipify plugin. Now, the very last thing I’ll need to do is just select that I want to store the user’s country, and just like that, it’s that simple to store a user’s city and country data in our database.
4. Excluding app features to users in specific IP regions
The very last thing I wanted to explain in this guide is how we can actually exclude access to certain features in my app based on a user’s IP address.
What we’re going to do is jump back into my Bubble editor and we’re going to open up my design tab. Now, on my streaming service, I’m just going to quickly give you a rundown of how I built this so that way everything makes sense to you as I walk through this feature.
On my homepage, I essentially just have a hero section, which is a group with an image in it as well as some text and a button.
Below this, I have a repeating group, which is pulling from a list of videos in my database, So, I’m just performing a search for all my videos, it’s super straightforward. I haven’t tried to overcomplicate things.
Then, inside of this repeating group, I just have a thumbnail image as well as a text element that just displays the video’s title and how many seasons it has.
I’ve also added a popup onto this page that’s triggered whenever someone clicks on any thumbnail image.
Within this popup, I’ve set the type of content to be a video. That means that whenever someone clicks on a thumbnail image, I’ll be sending the data of that video throguh to my popup element.
Now, I’ve already built out a workflow to make this popup functional, but for the sake of my guide, I’ll quickly show you how this is setup.
Whenever the thumbnail image is clicked, I’m just displaying data into my popup. So I’m sending through the data of the video that’s selected from my repeating group, and then I’m just showing it in my popup. It’s nothing too advanced.
But in my design tab, for my popup here, I also have a play button. Now, this button doesn’t really do anything right now for the sake of our tutorial.
Now, let’s say I wanted to restrict access to this button based on a user’s country from their IP address, what I could do is create a condition on this button that just recognises if the user’s IP address falls outside of a particular region.
I’ll define a new condition. Within this condition, I’m just going to recognise if the current user – if their country is not the country code I’d like to select – then this content should not be available to them.
So, if you remember before, when I took a preview of my page where I had displayed the country code as well as my city from my IP address. The country was displayed as AU, and that’s because I’m based in Australia. But let’s say for the sake of this tutorial, I only want this content to be available to those users in the United States. The country code for that is US.
So, from here, I’m just going to type in that as a free text option. If you weren’t sure what a country code is, by all means, just open up a Google search and just search what a country code is for a region based on its IP address.
Now, if you really wanted, you could also restrict this by cities, but in my example today, I’m only going to restrict this by countries.
So right now, if the current user’s country is not in the United States, which is the US country code, what I’d like to do is update the text that’s displayed in this button. I’ll have this display something like, “This content is not available in your region.”
What I also love about conditions in Bubble is that you can toggle these on and off to see what that’s going to look like whenever this condition is true.
So, what I can see here is that because we have quite a bit of text in this, the height of our button is going to expand. So what I’d like to do is also update the width of this button whenever this condition has become true. So I’m going to change another property here. I’m going to change the width. Instead of the width being 150 pixels, I’m going to set this to as 400 pixels, which you now see is long enough to fit in all of my content. And that is everything I’d like to change.
What I’d love to do is just quickly run a preview of this to show you what this is going to look like based in my account, which is not located in the United States. So, I’m going to run a preview of my app here.
I’m going to scroll on down to my content. I’m going to click on one of my TV series and because I’m not based in the United States, this content is not available in my region.
But what I’d love to show you is that because I’m based in Australia, if I was to update that condition to make it accessible to myself.
So I’m going to jump back into Bubble. Instead of having this content only be available in the US, I’m going to have this be available in Australia. So the country code is now AU. I can then jump back into my preview, refresh my page, scroll back on down to the same TV series, open this up, and what you’ll now see is that this content is available for me to stream.
And just like that, that wraps up everything I wanted to cover within this particular tutorial today.