Next.js & Identity (auth) Tutorial #7 - Netlify Functions

Key Takeaways

okay then my friends so now we've pretty much nailed this authentication flow we can log in sign up and we can also log out as well and we have those conditional links showing in the nav bar so this is all working but what i'd like to do now is somehow use that authentication information so if a user is logged in then we give them a different experience on the website to someone who's not logged in now ultimately what i'd like to do is make it so that when a visitor goes to the guides page only if you're logged in and you're going to be able to see the guides content if you're not logged in then we're not going to allow you to see that and we'll somehow protect it so how are we going to use netlify identify to help us do this well normally with protected pages or content in a next js application we might use get server side props which results in a server rendered page and inside that function we could check if a user is currently logged in if they are then we get the data and we render the page to send back to the browser if they're not we might redirect them to a login page instead but at the time of recording this video you can't access the current identity user from netlify in the get server side props function so there is no way of telling if the user is logged in hopefully it will be added in the future so we can use this option but currently we can't so the alternative i'll show you is by using netlify's serverless functions to create an api for data that we want to show because inside netlify functions we can access the current user and determine if they are logged in so netlify functions are basically cloud functions that we can develop locally and then deploy to netlify it's basically a way to write server-side code without our own server hence why they're referred to as serverless functions now each function that we write has its own file with its own unique file name that is what the function will essentially be called when we deploy it for example i could create a function called ninjas.js inside that function i might fetch some data and return it then i'd deploy that file to netlife to create a netlife function called ninjas netlify will then give me an api endpoint for that function which i can use from my next application to call the function and retrieve the data it gets so like i said before the reason we're using these netlife functions is because ultimately we can access user identity information inside them netlify provides us a way to do that so the way our site will work with protected content is as follows first of all we request the page that might be protected in the browser and we would get a static page back without the content that we're protecting from unauthenticated users so the rest of the page like the navbar might show but the protected content won't now in the browser from our component right here we make a call to a netlife function using the api endpoint for that function that netlify gives to us now that function can determine whether the user making this request from this browser is currently logged in if they are then we'd send back the data for that page and we would render it in the browser if they're not we might send a 401 response instead and not the content and then inside our component we can either redirect them or prompt them to log in now i know this approach kind of works against the win when it comes to ssg and ssr which is why i'm hoping that in the future we can't access user information inside the get server side props function so that we can send back a fully pre-rendered page instead but for now this approach just for gated content is still okay for any other data that you use that is not protected from unauthenticated users you can still use get static props or get server side props if you need to but anyway let's get started by making a simple function to begin with so the first step when we're creating netlife functions is to create a folder for them to live in so oops you don't want to do that inside no modules just on the root of your project we're going to create one called functions and then inside that each function has its own file so we'll create one called super mario js so this is just going to be a simple test function now when we're creating a function we have to attach it to exports and we say dot handler so this is basically the handler function and we're going to set that equal to an async function all right so inside this function we could run some code so that when we request this function or when we make a call to this function later on it's going to run this code now the first thing i'm going to do is log something to the console and we'll just say function run and the reason i'm doing this is to show you where logs to the console are output later on so you can view them all right so the next thing i'll do is create a data constant and i'm going to set that equal to an object and this object has three properties a name mario h35 and job plumber so this is just some dummy data i want to send back to the browser when the browser makes a request for this function so what we'll do is return a response now to the browser so let me do a comment return response to browser and the way we do this is just using a return statement like so and then inside here we can say the status code of the response and in our case that's going to be 200 because that means everything's okay and then we also can send back some data in the response which goes in the body property now we can't just send back the data like so it has to be in json format so we can say json.stringify to stringify this data and then we're going to send back that json and that is it my friends that is our first function created all right so say we want to now upload this to netlify so we can get an api endpoint and use that to run the function and get the data back well the first thing we have to do is create a netlife configuration file so that netlify knows what folder our functions are in when we try to deploy them so let's create that file in the root of your project create a new file and we're going to call this netlify dot toml t-o-m-l and then inside here we can in square brackets say for the build and then i'm going to say where the functions are so functions equals and then in a string functions so now it knows if we're using functions to look inside the functions folder that's what we called it right here all right so that's all there is to it that's all we need to do now i want to deploy this now so the function is on netlify and to do that we need to push up to github so let's add the changes git add and then i'm going to say git commits and this commit is going to be super mario function and then press enter then i want to push this so git push origin main this is going to trigger a deployment on netlife for us so let's just take a look at that i'm going to go to deploys and we can see now it's starting up all right then so once that's published if you scroll up and then go to functions we can see this super mario function right here so this is where netlify is going to list all of our different functions now it's also created this one called next image and that's just a function created by the essential next js plugin to handle image requests using next all right so this super mario function right here if we click on this this is the function log and you know that i did this console log over here when this function is requested to run it's gonna log anything out inside the function log and this is the end point right here for our function as well so we could copy this and we could request it directly in a browser so i could paste in over here and press enter and we're going to get the response right here all right so let me try this out press enter and we can see we get this json back right here cool so that is working and also if we go over to the function log i'm just going to refresh right here so we can see the updated function log and we see right away the function ran so this is working cool now we can request this from a browser but we can also request it from our component so i could send a get request to our function endpoints and then inside our components when we get that response we could do something with the data we could output it to the browser but before we do that i want to show you how to test functions locally on our computer while we develop our site because right now if i try to access the function on localhost it won't work so if i just copy this bit right here yep and then go back and put it after localhost this is not going to work let me take out the duplicate forward slash it's not going to work right because it doesn't really know about this function locally so i'm going to show you how we can actually run our functions locally without having to deploy them while we're creating our application next