Hey everyone! In this video, I'm going to show you how to add a subscription payment system to your web app so that you can collect monthly payments from your customers. This is useful if you want to build an app where your business model is a fixed price monthly subscription like Netflix, Spotify or Dropbox. By the end of this project, you're going to build an app where your customers can log in, buy a premium subscription for $10 a month and manage or cancel the subscription from their account page. Here is our tech stack. For the front-end, we're going to use NextJS to build a static website. And then we're going to use Firebase for the back-end, but mainly for the authentication. And we're going to use Stripe to integrate the payments. I'm going to show you how to integrate Firebase and Stripe into our app. But I will expect you to already have some experience with NextJS. To get started, go to this GitHub repository where you can download the sample project and use the starting point branch. You're going to get a skeleton of the project where all the UI is there for you, but there's no functionality added yet. Once you've downloaded the repo, go into the project directory and run "npm install" or "yarn install" to get all of the dependencies added. Once everything's installed, type in "yarn dev" or "npm run dev" to start the development server. Once the local server is up and running, you should be able to visit this local URL and see the project. So it will be a home page and there'll be a button to log in. Nothing really works yet, but we can click around. And our goal is to add authentication to this app so that you can log in. And then when you log in, we also want the member to be able to upgrade to a "premium" account. Or if they're already a premium member, for this status panel to show that. And also for this button to change so that you can manage or cancel your subscription instead. And then you can also sign-out as well. Before we begin, let's just spend a moment talking about our project architecture. So we're going to have our users interact with the front-end, which is just going to be a React or a NextJS website. And we're going to use Firebase for authentication. Now, once we're authenticated, we're also going to set up a Stripe account and we can connect to that directly with the front-end as well. This is one of the ways that we can do it, but we're not going to do that. Another option is if we had some kind of backend in between the front-end and Stripe, for example, it could be a Python backend, or it can be a Lambda function on AWS. We can also have the front-end talk to the backend and then have the backend talk to Stripe directly. And the backend might also want to talk to Firebase directly to make sure that you are an authenticated user. And this is probably a better design because we want the backend to know about the payments, the subscription, and the authentication, Because ultimately it's probably the back-end side of the service that will provide value for our customers. And I would generally go with a design like this, but this is a little bit too complicated for this project today. So we're going to do something even simpler. We're going to have our users interact with our static website, which is going to be in NextJS, and that's going to talk to Firebase. So we're going to have an integration with Firebase there. And Firebase is where we authenticate our users. But because authentication and payments are quite closely related to each other, like we need to know which authenticated users are paying for what subscription, it's probably better to connect Firebase directly to Stripe. So we don't have the front-end kind of acting like a middleman between these two services. Luckily, Firebase gives us a really easy way to integrate with Stripe. So we're going to use that, have Firebase connected with Stripe, and then we're going to interact with our payments, our authentication, our backend, everything through Firebase directly from NextJS. So this is what we're aiming to build. Now, the reason I chose these three technologies in particular is because they're quite popular and they're quite good at what they do. So NextJS is a very popular front-end framework. Firebase is also really popular for authentication and it's free. And Stripe is also the most popular option for payments processing. These three technologies also work really well together as a combination. For the first part of this project, let's first get our authentication working with Firebase. First, you need to head to "firebase.google.com" and then log in with your account or sign up if you don't have an account. Once you've done that, you should go to the Firebase console where you'll see a list of your projects. Or you might not see anything if you don't have any projects yet. And click on this button here to add a new project. And you can enter any name you want. So I'm going to call this "Stripe-app" and then click continue. And you can turn all this stuff on if you want, but I'm just going to turn it off because I don't really need it for this tutorial. And I'm going to hit "Create Project". And after a minute or so it should be done and you can just click continue. So now you'll be taken to your project dashboard and just scroll down and click on authentication over here, go to the top and click get started. And here Firebase basically provides all of the authentication backend for you. So all you have to do is select what type of authentication you want. For this one, I'm going to keep it really simple and just choose Google as my authentication system. And I'm going to click "Enable". And you can just leave all of these as default. You might have to put in a support email, and then you can click "Save". And I don't really like to have my own list of user emails and passwords because it's just more things for me to manage. So unless I really need to, I try to build all these apps with third party authentication like Google. And once this is done, we've done everything we need to from the console. So the next step is to create a Firebase client from our NextJS app so that we can use this Google authentication from our website and login. So to do that, go back to the project overview. And we're going to create an app here. So here where it says get started by adding Firebase to your app, you have a couple of options. And we're going to go with "web" because the NextJS is a web interface. And here again, just fill it in with whatever you want. And I'm just going to register the app. Once that's done, Firebase will show you some instructions on how you can install the Firebase SDK or the Firebase client into your NextJS project. And also show you how to configure it with all your API keys and your project settings. So let's go ahead and bring this into our project. We're going to install the Firebase SDK. And we're also going to install React Firebase hooks because we're going to need that later. And I'm using yarn, but you can also use "npm install" if you prefer that. So go back to your terminal and type in "yarn add firebase" and "yarn add react-firebase-hooks". Or "npm install" instead of "yarn add "if you're using npm. And then hit enter. Once that's done, open up the project in your code editor. And you should see all of the project code here. So there's a source directory, an app, and then there's two pages. So the main page and the account page. And that's basically it at this point. Every button in here is basically just a redirect. So there's no functionality yet. So we're going to add the login. But first we need a Firebase client in our app. So go to the source directory and create a new file there. And I'm just going to call this one firebase.ts. And if you go back to your Firebase console, we'll just copy this whole client configuration here and just paste it into that file. So now we have this "app" variable that we can import into our other files, and it will give us an instance of the Firebase SDK. But I don't like to use this directly. Instead, I like to actually wrap it up in a getter function or something like this. So a function called "initFirebase". And that's because when I retrieve a singleton from a class like this, I prefer to have a method that I can change if I wanted to behave differently. So I like to wrap it up. And this way, we'll just use this instead. And it will just return whatever this is. Or if we need to change how we initialize it, we can modify it here. Now go over to our page.tsx and make sure that this is the one in the app directory and not the one in the account directory, because that's going to be the account page. So go to the homepage and page.tsx. And we're going to import and initialize Firebase. So here, I'm going to call it "app = initFirebase". And make sure that it imports it from the file we just created here like that as well. And this is going to be the Firebase SDK instance. So we can make calls to Firebase, the one that we created using this app. And the first thing we're going to do is user sign in. So to do that, we're going to need a couple more pieces, and I'm going to import them here. So we're going to import getAuth, GoogleAuthProvider, and signInWithPopUp. And this is going to be all from "firebase/auth", which we should already have installed with our Firebase library. So we are going to create an auth instance. And then we just basically call get auth and pass in the SDK that we just created. We're also going to create a GoogleAuthProvider. So make sure that you have these three lines added. And once that's done, we can now modify our sign in function, which currently just redirects to the account page to actually do the sign in for the user with a pop up. So we're going to store the result of the sign in. And this is an async function, sign in with pop up. So we're going to need an "await" here, we just pass in the auth object and the provider. And once that's done, we also want to get the user. So the result is a user credential. And if you want to see what it has, you can just click through. But if it's signed in successfully, this should be non-null. So if the sign in is successful, and the user is not null, we can then go to the account. Let's go back to our browser to test it out. So make sure you still have your local development server running. And you can just refresh the page as well to make sure that it has all the latest changes and then click "Login with Google". And now you should see this pop up, prompting you to choose a login. So if you click on one of your accounts, it should sign you in. And now you should be taken to this page. But now let's also implement the sign-out button. And let's actually make these things update based on the user. Go back to your code editor. And this time, we're going to go to the "account" page. So go to "account" and then open page.tsx inside account. And here you can see I've hard-coded all the user credentials. First, we're going to need to initialize the app and authentication as well. So just copy those two lines from the previous page and make sure that you have all the imports as well. And once this is done, we can get the username and the email from "auth.currentUser". So we can do it like this. And if you save that and go back to the page, we can check whether or not those fields have been updated. So now it's updated to the actual Google account that I signed in with. So that's good. Now we also want to make this sign-out button work.ß So let's go back to the code. And here we have our sign out function. And to implement the sign out, all we have to do is just call this auth object that we imported. And it has a "signOut" function. So that's pretty simple. Go ahead and hit save. And then I'll go back to my browser and hit "Sign Out". And it's taken us back to this page. And we should also be signed out. And that pretty much does it for the authentication. I actually also added something called an "AuthRouter" here. So this is just a class that basically, when you go to this page, it's going to check what the path you're on. And if you're logged in or not automatically, and vice versa, if you go to the homepage, but you are logged on, it's going to go to the account page. I'm not going to go into detail of how to implement this because it's not essential to the project. But it is there if you want to use it. And it's there in the GitHub repository as well, if you want to take a closer look. So it's going to be part of the layout here. And if you go to the page, and see I'm signed in right now, but if I try to go to the homepage, it won't let me sign in. And if I sign out, it won't let me go to the "account" page either. So it just bounces me back to that. So yeah, I just wanted to let you know that this is going to be in the GitHub repo. But we're not going to go over this in any more detail. Now that we can sign in and sign out of our app, the next step is to set up the payment system. And we're going to do that using Stripe. Stripe is the most popular online payment platform in the world. It lets you create and manage products that your customers can pay for using their credit cards. So to get started, first go to stripe.com. And either sign in or create a new account if you don't have one already. And once you have an account, you should be able to see your dashboard. So make sure that you click on "test mode", because this will put it into a mode where you can sort of just go crazy and test it and use fake credit cards just to make sure the whole system works. And you can turn it back to production mode if you actually want to switch on real payments and real credit cards. But for this tutorial, let's just use "test mode". And everything will work exactly the same. And we're not going to need to do anything here yet. But just get familiar with this page because we're going to come back to it later. You can manage all your payments and customers and products here. And you can go to developers here to get your API key, which is what you'll need for Firebase to talk to Stripe. So if you go here, you'll be able to see all your API keys, web hooks, and all that stuff. We'll get to that later on. But just get comfortable with this page and make sure it's all set up. Now remember, we went over this already, Stripe actually has a JavaScript library. So we can connect Stripe directly to our NextJS app, and then have a client and SDK and everything for that as well. But again, we don't really want to do that because we still need Stripe to be tightly integrated with Firebase. The reason for that is if you go to your Stripe customer dashboard, you'll see that the customers created from Stripe actually have different IDs to the Firebase customers. So if you go to your Firebase app, go to your console, and then authentication, you can see a list of your customers here. And it's got this unique user ID. But Stripe has their own completely different set of IDs and customer authentication, but you still need these two things to be connected. So since it's not possible to separate those things anyways, it makes more sense that we integrate Stripe via Firebase in our web app, rather than have our web app talk to each one separately. However, if you are curious about Stripes front-end client, you can go to stripe.com/docs/js, where you can read about their react or their JavaScript library. Now to integrate Stripe with Firebase. If we did this manually, it'd be quite complex. For example, we'd have to make sure that every time a new user signs in with Firebase, we also create a corresponding user in Stripe's account system and somehow map those IDs together. And we also need Firebase's data. For example, if you're using the database to have updated information about that user. Like if they're subscribed or not, or when their last login was, etc. So a bunch of different things need to be coordinated between the two. And this is quite complex if we had to build it ourselves. But luckily, Stripe has actually built an extension for Firebase. So we can pretty much get all of that for free with a click of a button. So let's see how to do that. So go back to the Firebase project dashboard for your app, and go to authentication. And here there's this tab called "extensions". So click on that. And here you can browse a bunch of different extensions made for Firebase by different companies. And you're looking for this one called "Run Payments With Stripe", and it's made by Stripe. So if you don't find that you can search for it, but it should be here on the front page, and then just click install, you'll then be taken to this page to configure the extension. And the first thing it's going to ask you to do is set up billing. That's because when you use this extension, it creates a whole bunch of other resources, like cloud functions and databases. But you probably won't get charged anything for this, because it typically takes millions of calls to the services for it to exceed the free tier that you get. So you get something like 1 million free users per month. So don't be intimidated by this plan. However, to get to the next step, you do need to add a credit card. So go ahead and do that and then click "upgrade project" to continue. And then just click "continue". And you can also set a budget amount so that you get alerted when it hits a certain amount. And here I'm just going to set $50, but I don't think it's even going to cost anything. And now the next step, you're going to be notified of all the resources that this extension will create. You might actually have to enable each of these things if they haven't been ready for your account. But apart from that, you don't have to do anything yourself. So you can click "next". And then you're on to step three, you can review the access granted. Again, not much for you to do, just click "next". And in step four, you'll get prompted to configure your extension. You get to choose your deployment location. So you get a bunch of options here. It doesn't really matter for me, I'm just going to choose "us-central-1". And then you can leave all of these as default. But if you want to change them, then mouse over this tooltip to read more about what they do. And finally, we're going to need this Stripe API key. So we'll go to our Stripe dashboard, click on "developers". And again, make sure that it's enabled in "test mode". And on the developer page, you should be able to see this API key tab here. So click on that you have the secret key, which it just gives Firebase full access to everything on your Stripe. So you can use that as well. But if you want to be more secure, you can create a restricted key instead. So this is like a key that only lets Firebase do certain things. And you can do that by clicking this "create restricted key" button, and just making sure that it has all of the permissions that Firebase asked for. So customers, checkout sessions, and whatever it says here. So you can go and create this or you can use this one, but I've already created a Firebase key. So I'm just going to use the one I've already created, click to copy it. Now this is a secret key. So if you're doing this for real, then make sure that this doesn't get committed to public GitHub repo or that anyone can see this. For this video, it is a test and I will delete this key afterwards. So that's why I can show it now. But if you're doing this for real, then make sure that this key doesn't get revealed to anyone else. Once you've copied the key, just paste it in here and then click "Create Secret". After a while, it should finish. And now you have the key configured. We'll also need a Stripe webhook, but you actually can't get one yet until this extension is created. So we're just going to skip out everything and click "Install Extension". And this usually takes a couple of minutes. So we're going to have to wait a while. When the extension finished installing, you can click the "Get Started" button and you'll see instructions and resources on how to use it. So here it says that there is a client SDK so that we can interact with it from NextJS quite easily. We'll get to that in a second, but there's also instructions to finish configuring this extension. We'll have to set up Firestore, which is going to be our database, and we'll have to give it these roles. So let's go ahead and do that now. I'm just going to copy these roles over here and then we'll go over to our project, click on Firestore and then click "Create Database". And here I'm just going to leave it on default. And yeah, I'm just going to select the default location as well. When it's done, we'll go over to the rules tab over here and then replace this with the rules we copied over from the extension page. So highlight all of this and then delete it, paste all of the rules we just copied. Okay. And let's go back to our extension. So the next step is to configure Stripe webhooks. And you can pretty much just read these instructions and follow it yourself, but I'll show you how to do it so we can go through it together as well. First, we have to go to the Stripe dashboard, and we need this URL. So we're going to have to copy this. This is a specific URL to your Firebase app. Go to your dashboard and click on "webhooks". And you can see I have a couple created here already that I was testing, but we're going to make a new one. So click "Add Endpoint". And here you can paste that Firebase URL you just copied. And here you're going to have to select events to listen to. So the webhook is kind of like a way for Stripe to tell Firebase when something has happened. If you click "Select Events", you can see all of these different events that can trigger this webhook. So for example, things like the balance changing or when the account is updated. If you go back to the Firebase extension page, there's a list of all the events that you need. And it's a little bit tedious, but I recommend just adding them because even though you can click "Select All Events", this is probably going to send too much data to your cloud function. And you don't really want to give a webhook or anything really more events, more permissions, or capabilities than it needs to do its job. It's just kind of not necessary. So it is a little bit painful, but go ahead and add each of them in. So for example, here we have product created, updated, and deleted. And if you go to the dashboard and type in one of those things, you can just select each one. So here I've clicked to manually add all of those events that Firebase told us, and I'm going to click "Add Events". And here you can double check to make sure you've got everything. And once that's done, just hit "Add Endpoint". And now your endpoint should show up here. So to take this webhook back to the Firebase extension, we're going to need the signing secret. So click to "reveal" this and then copy this entire string and then go back to your extension page. Go to "extension configuration" and click "Reconfigure Extension". And now you can attach that webhook secret to this extension. So we'll hit "Create Secret". And when this is done, scroll all the way up and click "Save". Once the extension is done updating, we're pretty much finished with this part of the integration and we can continue building out our app. The first thing I want to do is adding a checkout session or a checkout button for our app. So let's go back to our Stripe dashboard. And first, we're going to need to create a product for our users to buy. So go to products, and then click "Add Product" over here. And here I'm just going to type in "stripe test product". And you don't really have to fill out all of these things yet. But you can if you want to. We'll scroll down, I'm going to set the price to $10 AUD. And it's going to be "recurring" because I want it to be a monthly subscription. And that's pretty much it. You can configure all these things if you want to, but I'm happy with this. So I'm going to click "Save Product". And now we have it here. And we have this price ID as well that we're going to need later. So just keep this in mind. This is where you can find it. Now on the extensions page, if you go to API and resources, there's actually a list of all the different functionality that we gained from making this integration. So now instead of calling Stripe directly, we can call Firebase and we can create customers, create checkout sessions, or even create a customer portal link for them to manage the subscriptions. So we can do all of these things. Now to actually use the Stripe Firebase extension in our app, go back to the documentation and read how this extension works. The top recommendation is to use this client SDK. It actually looks really nice. For example, we can create a checkout session with just three lines of code. But unfortunately, I tried this and it didn't work because this extension is 2 years old. And I don't think it was updated to use the newest Firebase API. So all of this stuff is a little bit out of date. So you can either roll back your Firebase version to the older version, but I don't think that's a good idea because you might get bugs or security risks. Instead, I'm going to basically just re-implement this API and call the Cloud Functions directly, which you can see here. Now, if you scroll down further in the docs, there's actually code examples as well on how to do all this stuff that the SDK does for us. So for example, here, we can create a checkout session and this actually has the raw JavaScript code that doesn't need that Stripe SDK. So we pass in the price ID here and then we get all of this stuff. Again, because this was done with the previous version of Firebase API, I don't think this works either, but I copied this whole thing into ChatGPT and asked it to convert it to the latest version of the Firebase API and that seemed to work. So to add the checkout, let's go back to our code now and go to the "account" folder. So I'm going to create a new file in here, which I'm going to call "stripePayment.ts". And this is going to be the utility class that interacts with Stripe through Firebase. And I'm just going to paste the code here. So it's not important to be able to write this from scratch because this is quite fiddly. So I recommend just copying this from my GitHub repo or pausing the screen and then copying the code directly, but I'll go through quickly what it does. So we've created a function here called "getCheckoutUrl" and we're going to need the Firebase app and the price ID. Then we're going to get the user, return it if there's no user, because obviously we can't do a checkout if they're not logged in. Then we're going to get the Firestore database and check for the checkout sessions. And if you go to Firebase and actually go to your Firestore, you'll see that once you start signing in with users, it actually creates a bunch of things for you, like customers here and products as well. So this is all being kept in sync at Firebase right now. And one of the things that we have on the customer is things like a Stripe link and checkout sessions and things like that. That's where it gets it from. So we go back to the code and now we're going to create a checkout session and this will basically give us a checkout URL. So I'm not sure what all of this stuff does behind the scenes, but basically we need to return a promise that will resolve into our URL. And that's going to be this thing here. Again, there's not much value in trying to learn what all this does. It's like once you write it once and it works and you can test it, you're pretty much done. So just copy it, or maybe Stripe has fixed their SDK by then and you don't need to go through all of this. So now I have that functionality. Let's go back to our account page and let's change this upgrade to premium button because right now on the test site, this doesn't really do anything. Like if I open the inspect tab and I press this, it just logs upgrade to premium, but it doesn't actually do anything. So let's go to here and let's create our price ID first. So a price ID, we can get that from our Stripe dashboard, go over to your products and copy this and we'll paste that as a string. And now we'll create a checkout URL. So I'm going to call it checkout URL, and I'm going to copy that function I created in the other file. And this needs an instance of our app, which we already created here. So pass that in and then pass in the price ID as well. So this is an async function. So we'll need an await, but once that's done, we should get a URL here and then we can just use the next navigation router to direct to that checkout URL. So hit "save" and make sure that the router you're using here is from "next/navigation", because there's also a use router from "next/router", but I don't think that's the one we need. So just make sure that it is this router from "next/navigation" and I'm going to hit "save" and go back to our site and actually test that out. So here I'm back on the site to test it out and you can click refresh just to make sure it has all the changes properly loaded in and click "upgrade to premium". And nothing might happen at first. It might take a while because it has to run a cloud function and get all the data from Stripe and all that stuff. But eventually it should take you to this checkout page and you can see it's all here. It is in test mode and the product we created Stripe test product is showing up here at $10 per month. And here is where we can enter our credit card information and actually test the whole payment flow. But when you're in test mode, you can't use real cards because it's all fake. So there's actually a bunch of fake credit cards that Stripes provides for us to use. So go over to Stripe documentation, which is stripe. com/docs and just search for "test card". And here you get three test cards. So you can test a "successful payment" or "payment failed" or "authentication needed". So let's copy the successful payment card here and we'll go in and just enter that. And then for everything else, it doesn't matter what we enter. We can just put in anything and then just put in a name on card. And yeah, I think everything else should be okay. We might have to enter an address. And then click "subscribe". And once it's done, it should take us back to our page and we're actually already subscribed. So for example, if you go back here and then you go to home, you should see your fake subscription show up in the dashboard and you can click to see your customers, your balances and all that stuff here. And likewise in the Firebase database, you should also see some status being updated for this particular user. So for example, if you go to this customer here, which is the one I signed up as, there's different checkout sessions. There's different payment options now being stored in the database and you can even click "subscriptions" and see this new subscription we just created and see all of the data associated with that. So this is available to us directly in Firebase. We don't have to talk to Stripe directly to get this information. It's kept in sync by our extension. Now for this to be useful for our app, we need to talk to this database on Firebase to get the subscription status. So let's go ahead and do that next. Let's head back to our app. And I'm also going to create another file here called getPremiumStatus. And again, I'm just going to paste the code that I'm going to use. And once again, I don't think you need to know the full details of how this code works. It's pretty convoluted and you only need to do it once. So you can just copy the code, but let's just go over it really quickly. We pass in an instance of the app and we get the user from that instance of the app. We get a reference to the database and then we basically check that subscriptions item that we clicked through just now to make sure that there's actually an active or a trialing subscription. That's pretty much the core of what this function does. It waits to get that result and then return either "true" or "false" based on whether a subscription was found. So just to go back and show you again, it's checking this item for this particular user and checking that there is an active subscription. So go ahead and copy this from the repo or from the screen and let's use it in our app. So let's go back to the account page. So here I have the premium status of this app, which is a hook and I've set it to "false". And we need to update this based on the results of this function. Now we can call this "getPremiumStatus" function directly. It is an async function, so we need to do it in another hook. So let's do it like this. So the hook creates this async function and then calls it. And the async function itself-- first, it checks if there is a user. If there's no user, it just returns "false" automatically. Otherwise, it will call this with the app instance and try to get the premium status. And this array with the app and the user ID basically just means to use this effect again or to invoke this hook again if any of these value changes. And we're interested in that because if the app client changes or if the user changes, we probably want to check the premium status again. And once we have the premium status configured, the app should already update the status panel based on that information. So let's go back and check if that is the case. So now if I refresh my account, you'll see that I am a premium member here. And just to check that it actually works for non-premium members, I'm going to sign out and I'm going to log in again. But this time I'm going to use a different user where I haven't actually paid for the subscription. So I'm going to use this guest user. And then if I log in as a guest, I'm still a standard member and I still can upgrade to premium. But let's go back to our premium user. And the final thing we're going to want to do is that if you're a premium user, you're going to want to be able to view or cancel your subscription pretty easily. So this upgrade button has changed to a managed subscription button, but it doesn't work yet because we didn't implement it. So let's do that next. Adding account management is going to be the final touch for our app, which will let users manage or cancel the subscription. Luckily, Firebase and Stripe make it really easy for us to do this. In our Firebase Stripe extension page, there is actually this create portal link cloud function that we can use to get a URL for customers to manage their subscriptions. Go back to our project. And instead of creating a new file this time, I'm just going to use stripePayment because it kind of fits with the rest of this file. And again, I don't expect you to type out this code, but I have it already created here. So this is called "getPortalUrl" and just make sure that everything you have here is imported. So you need this getFunctions and httpCallable from Firebase. You can go to the top and import it like this, this from "firebase/functions". And either just copy the code from my GitHub or pause the screen and type it out. And make sure that your function region is also the same as the one that you selected when you created the app. So if you're not sure, go to Firebase and just check which region your cloud functions are in. And this is the name of the function we want to use. So "extension-firestore-createPortalLink". Pretty much this code just calls the function and returns the URL if it doesn't fail. So that's all it does here. And it's a little bit complicated, which is why I don't think it's worth memorizing, but that's what it does. So we take this function and let's go back to our account page and use it here in this manage subscription button. And it's going to be very similar to this upgrade to premium one, where we create a portal URL. Then we'll call our function, we'll import that and we'll call it with the app instance. And then we just push it into the router. Oh, and this is an async function. So you have to put "await" in front of that as well. So save that. And let's go back to our web app, go here. And I'm just going to refresh the page, make sure that it has all the changes. And now I can click manage subscription. And again, it might take a while because it needs to call the function. So this is a little bit slow. So if it's too slow for you, you can actually make it figure out the checkout URL first, and also like, you know, the portal URL, and just have that saved as a hook or something like that before you actually press the button. So that's a way to make it faster. But anyways, when you click it, you should see it take you to this subscription page, this portal page, and you can see the product we bought here. And you can cancel the plan as well, or you can just go back to the store. So all of your details are here, you can update or add payment methods. So this is how your users can manage their payments to your website. And that's pretty much done. Let's recap again, what we've just built. So let's click out sign out here, we have a simple web app interface that has login integrated with Google that we implemented using Firebase. So we can see our authentication back-end here. And we can enable more things if we want to. But I just chose Google as the authentication provider. And when a user signs up here, it will be connected to your Stripe account as well. So you click here, a user can log in with a Google and users can be a premium member or a standard member. And then if they're a premium member, they can click here to manage the subscription and they'll take you to the Stripe page. Otherwise, if they're a standard member, they can click to buy the product and enter their credit card details. And all of the code for this project is on my GitHub, which I'm going to link in the description below. So "stripe-firebase-app". I hope you enjoyed this project. If you want to work on more things like this, then please subscribe to my channel so you get notified when I put out new content. And if you have any ideas, feel free to let me know in the comments. Otherwise, I hope you found this useful and thank you for watching.
