Getting Started with Firebase Admin in NextJs

today we're going to be looking at how you can set up Firebase admin with nextjs 13 specifically so you can use some Firebase functions in your server components and your API Roots I'm going to show you how to set it up really easily and also some best practices let's jump into it the first step is to have a Firebase project so I'm going to go over to the Firebase console here and set one up so on the console we're going to click add project we're going to enter a project name I'm going to name it subscribe click continue for Google analytics enable or disable it based on your needs click create project this is going to spin up a new project here and once that's done spinning up you'll see a page like this you want to create a new web app again give it any name you want I'm going to call this subscribe app click Register App and then it's going to take you to the next section saying add Firebase SDK we're going to skip this for now as I'm not showing you how to use the Firebase SDK I'm showing you how to use the Firebase admin one today so if you click continue to console go over to this settings gear here click project settings click service accounts once this loads up we should see a generate new private key now make sure you've got nodejs selected and click generate new private key generate key and this is going to go ahead and download a Json file which contains some configuration values we'll use later while we're in Firebase console this will be a good time to set up the database if you haven't already to do that all you're going to need to do is come over here click build fir store database it will have a button that says create database I've already created mine it's going to ask you two things it's going to ask you whether you want to be in production mode or test mode if you're going to exclusively use the Firebase admin SDK I recommend launching in production mode this just adds a rule so that no one else can access the database unless they're on the admin SDK if you're going to be using the other Firebase SDK for for some more client side user authentication stuff I recommend leaving it as is now and tackling that when you get to that hurdle so in here in my fir store database I have a collection called images that I've set up I then have a document called logo as its doc ID and then in there I just have a field called URL with a string for the URL of a logo we're going to use and then I also have a collection called links and in here I have a document where I've automated the document ID and then in here I have some fielded description title and URL we're going to be pulling these through to the front end and utilizing them in our server components the last thing to note in here is if you go down to storage and you had some storage if I click get started here again you're going to be asked this production mode and test mode again as I said before if you're going to be using the front end SDK you may want to use this if you're just going to be using the admin SDK I highly recommend launching in production mode so we'll create that there and we'll utilize that later as well now over in the code I've loaded up a nextjs template project what this was this is built using Create next app so it's is going to be your basic template on a nextjs application using server components and the app router the first thing we're going to want to do when we're over here is we're going to want to create a EMV file to store those secrets that we downloaded earlier so I've got them loaded up from the downloads file here now it's worth noting as I said before this file should be secretive it shouldn't be uploaded to G and you're just going to want to store it in the environment variables if someone got access to this they would have access to your database because they have the Firebase admin privileges so the thing we're going to want to copy from here is go into ourv and there's going to be four values that we're going to need I'm going to paste these in here you can pause to take a look at them I'm going to also leave a link to a Blog in the description below where you can copy and paste these from so the next public Firebase project ID and next public Firebase storage bucket these are actually going to be public so they're going to be available to the front end to use because of this next public bit but the Firebase private key and the client email which should remain private aren't going to be and these will only be accessed on the server so to copy those over if we come into this file you'll see the project ID here I'm going to copy this in and now for storage bucket mostly the default will be the project ID do appspot.com if you want to check that or you have a different setup what you can do is you can come over into the Firebase admin DK and if you click project settings here and scroll down here to the web app we have earlier you'll actually see the value here so there we go it's going to be that project ID plus appspot.com so if I paste that in here now next up we're going to want the private key this is quite a long value so you can do shift alt right arrow and copy that and with that copy in we can go and get the last value which is going to be that client email so if I copy in that client email here paste that into the EMV here and there we go that's going to be the values we need to connect to the admin SDK so I'm going to show you how to do that now I like to create a folder called DB to store in everything related to Firebase this just helps keep it organized and in here we're going to create Firebase admin. TS as I'm using typescript now in here what we're going to want to do this is where going to pull in the admin STK so we're going to do import admin from firebase-admin this is where you're going to want to install it if you don't already have it installed so you do pmpm or mpmi and then firebase-admin now once that's installed what we're going to want to do is I'm going to find an interface you don't have to do this if you're on JavaScript if on typ script I recommend it so we're going to import that interface this is going to be what we need and basically matches our environment variables here so we have a project ID client email storage bucket and private key so the next step is we're going to want to create a function to create our Firebase admin app so if I do export function create Firebase admin app like so and this is actually going to take in params so we're going to use that as an argument and again these params are actually going to be what we've defined up here earlier now next up we're going to want to pull in the private key but it's worth noting the private key here you'll see it has these back SL NS this is going to be a string at the moment so we're going to want to convert this into actual new lines so what we're going to do is we're going to define a function to format this for us so that's going to be format private key and that's just going to take the key as a string and in here we're just going to Simply return the key but we're going to do replace and I'm going to type in some rejects again you can copy and paste this from a blog post I show it's just going to be n SLG and then it's going to be replaced with this so as I said all that's doing is that is replacing any of those back SL NS with a new line so once we've got that we can go ahead and Define the private key here as private key is going to equal format private key and then we're going to get that from our params so params do private key the next line we're going to do is is basically going to check that when we run this admin app function that there isn't one already existing as we don't need to go through that creation process again so what you're going to do is you're going to do if and then you can to do admin. apps length if that is greater than zero then all you're going to need to do is return admin. apppp so as I said this is just going to return the current application if it was already initialized if it wasn't we're going to go on to configure it next we're going to need aert value for our credentials so what we're going to do is we're going to do conert and we're going to use a filebase function here called admin. credential doert and this is going to take in an object now this object we're going to use here this is literally just going to be the project ID client email and the private key so we're going to come in here do project ID that's going to be our params do pro ID then client email is going to be client email again that's going to be pulled in from the params client email and then for the private key we can shorthand this as we've defined this up here because we added this format private key function earlier so we're going to use that value there now lastly all you want to do do is return admin do initialize app so this is the bit that's going to actually initialize it and you're going to do credential that's going to take an object so you're going to put in that sert value that we defined earlier then you're going to have a project ID this is going to be from the params again params do project ID and then lastly we're going to do the storage bucket if you needed one so that's from params do storage bucket and there we go that is the create Firebase admin app next I'm going to create is a way to initialize this so to create our initialize function here what I'm going to do is export async function init admin and inside of here we're going to need an object called params and this is going to be the object that pulls in those values that we defined up here we're just going to pull them in from the environment variables so the first line we're going to need is going to be project ID and that's going to be process. em. next undoru undor Firebase undor projector ID now I'm actually going to paste in the values we have earlier but essentially all you're going to do is process. EMV and then just go and copy and paste this key that we have over here so we can pull through those environment variables next thing I'm going to do since I'm on typescript I'm going to make sure these are strings because otherwise they'll be string or undefined and functional mon us if you're on JavaScript you won't have to do this and if you're on typescript and want a better way to do this I recommend checking out create T3 apps EMV module it adds some type safety to environment variables but for now I'm going to do it this way so the last thing we're going to do is in this function we're going to return an instance of the function we called earlier and I'm going to pass in params there so we're ready to start using the admin SDK once we utilize this function so I'm going to show you how to do that now so what what we're do in here is in DB I'm just going to create a new one called Firebase TS now this is a good time to actually point out an important package called server only now you don't have to use this but what this does is adds a build time check to make sure that the functions within the folder that uses this or file sorry that uses this it's being called on the server only so it will just warn you if it was called in a client component for example it adds no sort of bundle size but all you have to do is just do import server only and I'm actually going to put that in the Firebase admin over here as well just to make sure that it's not being called on the client side again it's just a build time check it will throw an error at you at build time so once we're in here what we're going to want to do I'm going to want to define a function to get my links so this is going to come from the Firebase database here I have a collection called links I have two documents in there and I have description title and URL so in here I'm going to do export const get links this is going to be equal to an async function and in this function the first line is going to be const fire store and it's going to be equal to get fir store and that's going to be coming from this Firebase admin fire store import here next up what we're going to want to do is we're going to create a link snapshot this is going to be con link snapshot this is going to be equal to and then we're going to await this it's going to be fir store. collection and then the collection name and then it's going to be dogap the next line after this I'm going to convert this into some documents so this is going to be documents I'm going to do link snapshot do docs so every all of the documents within that link collection that we've got here I'm going to map them so what we're going to have here is we're going to have a link and I'm just going to to map them straight to return an object so I'm going to put in Brackets here and that's going to be URL and you're going to do link. dat so that pulls through the data from that document and then the value we're looking for so URL for my case then I'm going to have a title so link. dat. tile and then I'm going to have a description as well so that's going to be link. dat. description and lastly I'm going to want to return those documents there so we can use them so as you'll see here we now have a list from this function and it's going to be with the URL title and description pull through from the Firebase admin SDK now you will have to init the admin bit that we set up earlier before you run this function I'll go ahead and show you how to do that in a server component once we've got the function completed for pulling in the logo URL so this is going to be how you're going to Target a specific document so to Target our specific document here what we're going to do is we're going to export a const this is going to be called get logo again this is just going to be an async function and in here we're going to need that const fire store bit again so that's going to be equal to that get fir store that we used earlier and then the next bit of this is we're going to need that link snapshot again or logo snapshot in this case so what I'm going to do is point logo snap shop and that's going to be equal to wait firestore do collection and this was stored in an images collection for me and then on top of here we're going to get the doc called logo and then lastly we're going to make sure we get that the next line I'm going to do is going to be to get the data from the logo so const logo data and this is going to equal the logo snapshot. data now using typescript what I'm going to do is I'm going to make sure that this is just a type which is going to be URL string or undefined as this is important to know logo snapshot. dat will be undefined if it can't find anything there and on this next line we're going to handle that so what we're going to do is firstly we're going to check if logo snapshot do exists so this is just Firebase way of saying true if the document exists or we're going to say if the logo data is undefined so what you want to do is make sure you're using that there so that you're falsifying it so if the logo snapshot doesn't exist or there's no logo data we are going to Simply return null in this function you may want to throw an error or do a console log or something like that and then after that we can just go ahead and finally return our logo data. URL now we've got two functions to pull something in from Firebase so let's go ahead and use them now in a server component so I'm going to go to the page. TSX here now what we're going to want to do is make sure this is an async function so it can be used as a server component and we can await stuff and the first line you're going to want to do here is await in it admin as I said earlier this is how you can start to use that get Firebase that we have here or get fir store so every time get fir store is called it's going to want to have an instance of the application already um up and running so that's what this init admin does is it makes sure that when get fire store is called there is an application set up next we're just going to do links and that's going to equal await get link links and that's going to be imported from our file and function we created earlier and finally logo is going to equal a wait and then get logo as this is a server component it doesn't matter where these are this will be called on the server not on the client side so what I'm going to do is I'm going to come down here I'm going to change the source of this image here I'm going to change this to be logo unless logo is null it can go back to that for cell. SVG and I'm going to change what we had down here for all of the links so I'm going to get rid of three of these here so all the way up to here and what I'm going to do is I'm going to do a map of links so that we can have a link per link that we've pulled in so if I do links make sure if that's undefined it's not doing anything and we call map and I'm going do link and then I'm just going to go straight into an object here or straight into the jsx put this at the end here going to want to make sure there's a key on this I'm just going to put the key equal to the title for now as I said this isn't really a react tutorial but I'm just doing this quickly to show you how we've sort of pulled in those links there and I'm going to go ahead and change this hre here to just the link. URL and then I'm going to change this docs here to the link. tile and finally this text down here to link do description now we go ahead and save that I'm going to spin up the dev server here pmpm run Dev and hopefully we should see all of those values pulled through from firestore and there we have it in our front end here we have the image pulled in VIA that URL in our database and we have the two links pulled in from our database next up I'm going to show you how you can pull in this image from Storage I'm also going to show you how you can OBS secate the download URL if you're using the get download URL function because this has an access token that again is hard to guess and it's already pretty secure but it does mean anyone with that access token could access the image I'll explain a bit more about this later and how we could use an API route to add a further layer of abstraction to this so no one can even see the access token so firstly what we're going to want to do is in our storage we're going to want to add an image so I've added logo.png here now if you set this up you'll be asked the same questions so production or test mode I put this in production mode as again I'm only using the admin SDK so it's just going to have that rule allow read write if false so no one else can access this unless again as I said for the public download URLs even if you have a rule like that and they have the access token they will be able to access the image you can come in here and click create new access token which would make that one expire or you could click revoke to get rid of it but again every time you ask for the public download URL it is worth noting that it will go back here and you'll have to revoke it again so over in our Firebase TS I'm going to create a new function this is going to be export const get logo from storage and this is going to be equal to an async function and what we're going to want here is something new which is going to be a bucket so I'm going to do const bucket this is going to equal get storage so that's going to be a function from Firebase admin storage and then we're going to do do bucket and call that function there next we're going to want to make sure we have a file so const file is going to be equal to bucket. file and that's going to be the path for where it is on your Firebase storage so for me it was just at the root level logo. PNG if you had a folder or something it would be completed logo.png so now we've got this we're going to get the public download URL so I'm going to do const image URL and this is going to equal to anwa and we're going to do get download URL and that's going to be an import from Firebase admin storage here and then we're going to put this in Brackets and we're going to pass this the file that we have referenced here and lastly I'm going to return the image URL so if we go over into our page. TSX I'm going to change this get logo call here to get logo from Storage save that and if we go over into our next JS application we should see the logo looks the same but that will be now pulled in Via our admin SDK via the storage now it's worth noting you may have run into an error about something to do with your hosts if you're running into something with remote patterns it's going to look a little something like this so that you can actually host images from Firebase storage googleapis.com so the next thing we're going to look at is how you can obate that download URL as I said because what we're going to ahead do here is I come under here and I do console.log image URL save that and click this link here you'll see that I have access to this just from anywhere and this is because of this token here as I said that matches this token down here if I go ahead and just type anything there I'll get permission denied so I do need the access token to access it but if you want to hide this from your users you can add another layer using an API route so we're going to check that out now so over in our app folder here we're going to want to create a new folder called API for our API route and then also that under that we're going to want to create our root so I'm going to just call it SL API image in here we're going to want to create the root. TS folder and then finally in here we're going to want to export an async function and this is going to be the get request that we need so if I do export async function get and this is just going to be request and then in typescript we're going to have a request type there and then inside here we're going to want to make sure we're in an admin again this is to make sure when we're running the functions as I said that the admin has been initialized and then in here we're going to do const image URL and we can actually pull through that function that we had earlier so that's going to be get logo from Storage so this is now pulling through that URL that we had earlier but this is server side so no one on the front end will see it and what we can do with this is we can actually just pass through a fetch request so if I do response it's going to equal await Fetch and that's going to be be the image URL what we can then do is return a new response and that's just going to be with response. body and response. headers is what I'm going to use here this is going to have to be in a object here and then we're going to put headers just. headers so basically what this is doing is just passing through that fetch request so that it's done on the server side first and then we pass it through to the front end as I said this will hide the URL with the access token and the URL will now be API image so I'll go ahead and show you that here so in my page. TSX I've already changed the logo to just be a static throughout of API image and if we go into our application you can see the logo is there and being pulled through and if I go to/ API image the image is being pulled through correctly there's no access token it's completely hidden now on the server side so that is everything that I had to show you today if you have any more questions about Firebase do consult the links Down Below in the description I'll leave some to some documentation and also a blog post that explains a bit more of this again if you have any more comments feel free to reach out on Twitter or leave a comment in the description below thanks for watching

Channel: Jolly Coding

Views: 4,833

Keywords: nextjs, firebase-admin, download urls

Id: 30ydBNgDsow

Length: 24min 15sec (1455 seconds)

Published: Mon Oct 09 2023